Yarn: the JavaScript Package Manager

If you already use npm, you’re probably wondering what’s the point of Yarn?

Yarn is a somewhat new JavaScript package manager created by the engineers at Facebook.

  • It’s a faster and more secure dependency manager
  • It uses an offline cache – so after you’ve installed a package using Yarn, it will be available on your machine for offline access.

Quite honestly, what really reeled me in with Yarn was the speed at which it can install packages. It’s amazing how shaving off a few seconds from installing packages can really speed up your overall workflow.

Get Yarn

npm install –g yarn

Or use brew to add it. Once installed, you use the following format to add any dependency:

yarn add <name of package>

A Brief Overview of React.js

React is a user interface library that was developed at Facebook. React is written in different components and follows the principles of immutable data. It’s often used in enterprise applications, and it makes creating single page applications easier since they have a higher speed thanks to the virtual DOM. This means it writes to the browser DOM only when it is needed, instead of re-rendering an entire view when a change is made.

Virtual DOM

React creates an in-memory DOM where it only renders different parts of the DOM when a change occurs.

JSX

React utilizes JSX, which is a JavaScript extension syntax that allows you to quote HTML.

Babel

Babel is a transpiler that transpiles JavaScript code. It works for JSX as well as ES6 and beyond. Babel converts React’s JSX and ES6 to something the browser can use.

Components

React applications consist of a collection of components. Components are small user interface elements that display data as it changes over time. Used together, these components create entire user interfaces.

Component Lifecycle

Component lifecycles allow you to add libraries and load data at specific times. They also help improve the speed of an application, with lifecycle methods that you can override to run code a specific times in the process.

Mounting methods are called when an instance of a component is being created:

  • getInitialState()
  • componentWillMount()
  • componentDidMount()

Updating methods occur when a change happens to props or state:

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

Unmounting methods are called when a component is being removed:

  • componentWillUnmount()

 

Deploying a React App to GitHub Pages

Earlier today, I worked on putting together this Sticky Note App, in an effort to get more comfortable with React.js. The application uses React.js, React DOM, and React Draggable.

After completing my application, I was about to tackle deployment with Heroku, since I’ve become pretty familiar with deploying various applications that consist of different stacks on Heroku.

However, this application was a lot simpler, so it seemed like using Heroku would have been a little excessive, especially since there’s no backend component for this application.

So I decided to tackle deploying the application via GitHub pages – which is already one of my favorite ways to deploy simple applications since I host all my repos there as well.

The first step I did, was use the create-react-app command in my terminal, where I then moved the various components of my simple React application. Then I followed the following steps:

Step 1

Edit package.json by adding a homepage

"homepage": "https://[insert username].github.io/[insert project repo name]"

Step 2

Run npm install --save-dev gh-pages

Step 3

Edit package.json by adding a predeploy and deploy script:

"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

Step 4

Run: npm run deploy

And there you have it, a simple enough solution for deploying those simple enough React applications.

A Brief Overview of Node.js and Express.js

If you’ve worked with JavaScript frameworks and libraries, chances are that you’ve heard of Node.js and Express.js. So for those who are unfamiliar to these terms – what exactly are they?

Node.js

Node.js is an open-source JavaScript runtime environment, that uses Google’s V8 JavaScript engine, where you can build server applications. Node.js is not a framework, although it has many modules that are written in JavaScript. It has event-driven architecture that is capable of asynchronous I/O, otherwise none as a form of input/output processing that allows other processing to continue before the transfer of data has finished.

Express.js

Express.js is a web application framework for Node.js, that’s used for building APIs. It is also known for being a backend component of the MEAN stack.

I’ve worked with Node.js and Express.js to create APIs, so I feel like I can never think about one of them without having the other one come to mind.

New Design for GBCI.org

This week we recently launched a new design for GBCI.org. I used Flexbox a little bit with the layout, and tried to find better images that could create more of an impact for the viewer. I also adjusted the icons and tried to style the site in such a way where CMS editors can make changes to background images without having to touch the CSS.

Here’s a look at the new homepage:

Here’s actually what the previous homepage looked like. I designed this one a couple of years ago:

Before I started working at USGBC, the GBCI website looked like this:

Overview of Design Patterns

Design patterns are guidelines for solving common problems in software development. By learning design patterns, you can quickly and easily communicate designs to other software developers.

A few common design patterns include the following:

Strategy Pattern

The Strategy Pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable. Instead of inheriting behavior, it is created.

Observer Pattern

The Observer Pattern is the most commonly used design pattern in the real world. It defines a one-to-many dependency between objects so that when one object changes its state, all of its dependents are notified and updated automatically.

Decorator Pattern

The Decorator Pattern attaches additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality.

Singleton Pattern

The Singleton Pattern ensures that a class has only one instance, and provides a global access point to it.

State Pattern

The State Pattern uses a set of state constants, and uses a variable to hold the current state. The pattern encapsulates state into separate classes.

Collection Pattern

The Collection Pattern provides a way to access the elements of an aggregate object without exposing its underlying representation.

New Design for Art Portfolio Site

When I’m not busy working on websites or building applications, I like to make artwork. My work as an artist is actually what got me interested in becoming a web developer – the first website I made was for my artwork.

Over the years my art portfolio website has gone through a number of redesigns. The last one was back in 2010, so it was long overdue for an entire overhaul. Here is what the old homepage used to look like:

And here’s what the homepage looked like after the redesign:

I ended up redesigning my logo and simplifying a lot of the pages. I’m still in the process of reworking several pages, as well as adding an online store for selling my original artwork, but for the most part the heaviest lift is out of the way.

Getting Started with Rails

For anyone that’s new to Rails, there are a couple of tutorials out there that I’d highly recommend:

I’d say repeating the Rails Guide tutorial several times first is a good place to start, then moving to Michael Hartl’s tutorial and completing that a few times, which will give you a much better understanding of even more complex Rails concepts.

I’m a strong advocate for learning through repetition, especially if you’re new to programming or don’t have a background in computer science.

Using MAMP to run WordPress Locally

I’m currently in the process of redesigning and reworking my art portfolio website.  The website was built on WordPress, and I started it years ago before I ever really knew how to develop and design websites. As a result, the website has become a bit of a beast with all of its pages. So, when it comes to updating the overall look and feel, I’m often resistant to making updates since it often becomes a big ordeal.

However, the other day I realized it made more sense to figure out how to run my WordPress site locally to work on those updates in a dev environment. Previously I’d just copy the entire instance of the WordPress website and work on it live, then move the entire site to replace the older one. This always become a bit of an ordeal.

But now I’m excited at the possibilities of working locally before pushing those changes to the live environment. Here’s how I set up my environment:

  • Download and install MAMP, which is software that installs a local server environment on your computer. MAMP gives you the ability to install Apache, PHP, and MySQL on your local machine. You can find out more about installing MAMP on the WordPress documentation website.
  • Once MAMP is installed, you can copy over your entire website to your local machine.
  • Open MAMP and specify the root of the folder for the site you want to run. Then start the servers.
  • Next update the wp-config-php file so that it specifies the local host as the host, as opposed to the domain name: define('DB_HOST', 'localhost');
  • Then access the MAMP welcome screen and open up the local phpMyAdmin.
    • Find the “create new database field” and enter in the name of the backup database from the live website that you are going to import.
  • When you access the site in the browser, you should be able to see the homepage although all the other pages are probably broken. This is because you need to update the siteurl and home configurations.
    • In phpMyAdmin, select the new database
    • Select the “wp_options” table
    • Search for “siteurl” within the “option_name” column
    • Edit the “siteurl” so it points to the localhost
    • Next, search for “home” within the “option_name” column
    • Edit the “home” item so it points to the localhost as well
  • Next, visit the homepage for the locally installed site and ta-da, it should work fine. You are also able to login with the wp-admin by using the usual admin credentials you use for the live website. Now you can edit themes, update plugins, and test out other features locally without worrying about breaking your live website.

New Design for Portfolio Site

I finally got around to updating the look and feel of this portfolio website. Previously the site was bogged down with too many pages, and from a technical stand-point, I wasn’t taking advantage of customizing templates very well with php. Below is actually the way the homepage previously looked before the redesign:

Megan Coyle's previous web portfolio design

With this updated look, it was important that I focus on page load time, and also simplify the overall layout. The font sizes on the previous site were also fairly large. And lastly, the older site focused primarily on my web design work. I wanted to rework the entire site so that it could focus more on my development work.