Today we relaunched the PEER website. The site’s content was simplified, which meant that fewer pages were needed. I used this as an opportunity to simplify and clean-up the existing look and feel. When it comes to web layout and design, I always lean towards minimalist tendencies. Minimalist designs don’t distract from the content, but complement it.
The PEER website homepage previously looked like this:
And the new website homepage now looks like this:
You can see that the main navigation was simplified and a larger, bolder image is being used for the main banner. The main navigation was also adjusted to take up less real estate on the header. The fonts were also tweaked to create a more modern look.
The process of updating the website included finding strong images and finding ways to code the layout so that it would shift smoothly when viewed on different devices. It also included creating additional views in Drupal to manage the updated Resources section, and a different format for sharing published articles.
The previous version of the site was something I designed a couple of years ago. It’s amazing how quickly your style can change and improve over time.
I decided to run the
npm init command on my project folder. Within the package.json file, I had the following:
"minify": "uglifyjs ./js/* -o scripts.min.js",
"uglify": "npm run minify"
Once I ran
npm install uglify-js --save, I made sure to specify the folder I wanted to run the process in (./js/*), and the file I wanted to create with the minified code (scripts.min.js). Next, all I had to do was run
npm run uglify and my new scripts.min.js minified file was created.
npm run uglify to bundle up and minify the code.
- Variables can be set with the terms let and const
- The let keyword is used for block scoping so it doesn’t affect global values
- The const keyword is used to protect the value of certain variables – you use this keyword for values that shouldn’t be reassigned
- The spread operator can turn elements of an array into arguments of a function call or into elements of an array literal
- Can pass default values in functions for when you don’t explicitly pass anything for them
In order for browsers to understand ES6, you need to transpile the code. Babel, Traceur, and Closure are used for transpiling code, although Babel is known for supporting the most ES6 features.
For larger scale projects, you can use build tools like Webpack with ES6 – this allows us to load our dependencies. Npm creates a package.json file that runs dependencies.
If you already use npm, you’re probably wondering what’s the point of Yarn?
- 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.
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>
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.
React creates an in-memory DOM where it only renders different parts of the DOM when a change occurs.
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 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:
Updating methods occur when a change happens to props or state:
Unmounting methods are called when a component is being removed:
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:
Edit package.json by adding a homepage
"homepage": "https://[insert username].github.io/[insert project repo name]"
npm install --save-dev gh-pages
Edit package.json by adding a predeploy and deploy script:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
npm run deploy
And there you have it, a simple enough solution for deploying those simple enough React applications.
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.
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:
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:
The Strategy Pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable. Instead of inheriting behavior, it is created.
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.
The Decorator Pattern attaches additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality.
The Singleton Pattern ensures that a class has only one instance, and provides a global access point to it.
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.
The Collection Pattern provides a way to access the elements of an aggregate object without exposing its underlying representation.
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.