Jan Carlo Viray Senior Front-End Developer, Orange County | Angular. React. Node

React Props in State an Anti-Pattern

Passing the initial state to a component as a prop is an anti-pattern because the getInitialState method is only called the first time the component renders - and never called after that. This means that if you re-render the parent, while passing a different value as a prop, the component will not update the UI because it will keep the state from the first time it was rendered. This will make the application very prone to errors.

Read More

React.js Lessons Learned

React.js lessons learned and some opinionated best practices. This is an ongoing compilation and in-progress work of everything I have learned from developing in React.js

Read More

React Best Practice Compilation

Here is a compilation of best practices I have learned and compiled building React.js applications. Feel free to add to this content by visiting my blog source and sending a pull request.

Read More

How to share/sync directory inside Vagrant

To share directories, add this to your config. config.vm.synced_folder "host/relative/path", "/guest/absolute/path". Below is an example within a full configuration file.

Read More

How to install Vagrant and VirtualBox

Vagrant provides easy to configure, reproducible, and portable work environments controlled by a single consistent workflow to help maximize the productivity and flexibility of you and your team. If you're a developer, Vagrant will isolate dependencies and their configuration within a single disposable, consistent environment, without sacrificing any of the tools you're used to working with (editors, browsers, debuggers, etc.). Once you or someone else creates a single Vagrantfile, you just need to vagrant up and everything is installed and configured for you to work. To get started, download Vagrant and VirtualBox.

Read More

State is an Anti-Pattern

As much as possible, do not use state at all. According to this comment, state should never have been in the library in the first place. It seems that if Flux was introduced in conjunction with React initially, state would not even exist. It seems that state was used to allow react to function by itself without flux. If a React component must have side-effects, it must use Flux actions instead of having state. Components ideally should have no state at all.

Read More

New Portfolio Site

I finally put my portfolio site at jcviray.com. I'm currently available for freelance/remote work and I specialize in Angular, React, Node, Mobile, Responsive. Let's connect at linkedin! Also, let's connect at twitter.

Read More

How To Reduce Docker Image Size?

Docker containers built from Dockerfiles can grow very big in size. There are a few simple tricks to cut back on some of the container fat. Here are some of the ones I've used.

Clean the APT

RUN apt-get clean
RUN rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

Flatten the Image

ID=$(docker run -d image-name /bin/bash)
docker export $ID | docker import – flat-image-name

Then, you can save it for backup too. ID=$(docker run -d image-name /bin/bash) (docker export $ID | gzip -c > image.tgz) gzip -dc image.tgz | docker import - flat-image-name

Read More

What Does Docker Link Do?

How does Docker link container? What happens during the process? Docker creates a secure tunnel between the containers that doesn't need to expose any ports externally on the container. Notice that there is no need to use either the -P or -p flags.

Read More

Docker Commands Cheat Sheet

A summary of commands I have come across while using Docker in my projects.

Read More

Docker Run

What happens in a docker run command?

Read More

ReactJS Overview

One unique selling points is that ReactJS can also be rendered server side and can work with client/server inter-operably.

Read More

Basic Docker Overview

Docker is a growing technology for and spreading like wildfire. Time to delve in the basics and apply it on your projects!

Read More

Disable Terminal Line Wrap

I’ve gotten a bit annoyed with terminal wrapping long lines. I’ve been using less for a long time already, but did not know the -S option, or “--chop-long-lines”.

Read More

Run Terminal in Docker

docker run -i -t ubuntu:latest /bin/bash

Read More

ES7 Async and Await Simplified

Promises have been the predominant solution to the "callback hell" issue with JavaScript, but starting with ES6, and now ES7 it is slowly being tucked behind the scenes to pave way for async and await.

Read More

Install Docker in Mac OSX

Docker is one of the "disruptive" technologies I have recently been watching. It is a great new paradigm for devops and deployment. I believe the future is on containers. Here's a quick intro on installing it on your Mac OSX machine.

Read More

React and Flux Tips

Being that React is all about dynamic data and being that it handles performance very well, at the cost of more boilerplate code to write, I think it is important to focus on simplicity, very small modules, very small code and dynamic code generation. Hard-coding should be limited and be of a thing of a past.

Read More

2015? New Focus and Pursuits

The traditional "first!" on this blog. Quite a rebirth from my other blogs. This time, it will be a focus on my career in development and possibly (ultimate goal), entrepreneurship. This year 2015 should be a good year!

My Focus and Pursuits this Year

Dev Ops

Containers and Docker changes (or levels?) the playing field. Being able to start and stop an isolated "vm" in less than a second is amazing! More than that, having layers and operating the server in a "git" fashion is pure magic! Developers now are able to be involved in deployment and server management. In fact, sometimes it is now expected. It is quite exciting to have this technology and it definitely is spreading like a wildfire.

On the case for "Agile"

It is quite a different world we live in now. Transition times must be shorter and execution must be faster. Ideas are everywhere and innovation is king.

I believe being "Agile" in every area (including personal life) and processes is the holy-grail towards surving and thriving in this fast-paced world. Almost every industry is moving doubly faster every year and innovation is everywhere. Execution must adapt to the continually changing world and requirements.

Full Stack Agile DevOps Engineer

Is there a beehive here? That's quite a lot of buzzzzwords! In fact, it is a title that does not even exist. I am currently Senior Front-End Developer, but am transitioning towards the title for myself personally and hopefully start getting some traction towards building a lean startup. Lots of ideas, very little time.

Entrepreneurship and Passive Income

I've always been more inclined towards business, entrepreneurship, leadership (not management!) and actually being involved in the community and public relations. Living in the engineering world is quite a contrast from my past, but has been very beneficial in seeing the world and opportunities in a more convincing eye. Nothing is impossible and all it takes is hard work and time. This year, hopefully my projects would take off!

Read More