Building a Photo Site With GatsbyJS Part 4 – Building a Grid Photo Layout

We’re making progress! In the third part of this six part series, we started getting some content on the page by creating the header component that will sit at the top of our home page and single photo pages. Right now, if you change into your photo directory and run gatsby develop, you should see something like this:

Final Header

In this fourth part, we’ll put together the grid layout for the homepage. Then, all we’ll have left to do is build the individual photo pages, add social tags, and deploy.

Continue reading “Building a Photo Site With GatsbyJS Part 4 – Building a Grid Photo Layout”

Building a Photo Site With GatsbyJS Part 3 – Building the Header

In Part 2 of this series, we mocked up the layout we’re looking to achieve and walked through how GatsbyJS handles data with GraphQL. We then practiced running a GraphQL query in the IDE to make sure data was returning.

In Part 3, we’re going to start building. We’ll put this thing together in three parts:

  1. Header component present on all pages
  2. Grid photo layout for the homepage
  3. Individual photo layout for single pages

Let’s start working on the header component.

Oh – also, if you happen to be following along and building this thing while we go through it, would you mind tweeting me (@jeremeyd) and just showing off what you have so far? I’ve received a few DMs from folks, which is pretty awesome!

Continue reading “Building a Photo Site With GatsbyJS Part 3 – Building the Header”

Building With GatsbyJS Part 2 – Determining the Layout and Understanding GraphQL Queries

I’m in the process of creating an Instagram-esque clone using GatsbyJS and WordPress.com. We’re walking through the process in a series of steps.

Previously, we got the basics setup and installed some dependencies we’ll need later on. Today, we’re going to walk through the desired layout and talk a bit about how GatsbyJS handles data using GraphQL.

Continue reading “Building With GatsbyJS Part 2 – Determining the Layout and Understanding GraphQL Queries”

Hour of Code 2017 and Beyond

I realize I’m a late on the ball with this one, but I thought I would share it in case some folks wanted to get involved. This past week (December 4-10) was Hour of Code week hosted by Code.org. It’s a worldwide event where millions of students across 180+ countries work through activities related to code and technology.

Hour of Code.jpeg

Continue reading “Hour of Code 2017 and Beyond”

Experimenting With GatsbyJS and the WordPress.com API

If you follow me on Twitter, you’ll know that my November project was to rebuild my personal site using GatsbyJS and the WordPress.com API:

If you’re not familiar with Gatsby, it bills itself as a “blazing-fast static site generator for React.” Having used React to work on Calypso and build some other small projects here and there, I figured it would be a pretty fun experiment.

Obviously, November has come and gone, and yet, you’re still seeing a traditional WordPress theme on my personal site. I ended up not launching my GatsbyJS site (although it is more or less built!) for a few reasons. I’ll touch on those reasons as well as my experience working with GatsbyJS.

Continue reading “Experimenting With GatsbyJS and the WordPress.com API”

Adding a Widget Area After the Post

Astute readers will have noticed that I recently changed themes on my personal site. I’ve been on a Genesis theme for the past several years. I love the folks over at StudioPress, and I still use their themes on other sites of mine. For my personal site though, I wanted to make a little switch so I picked up a free theme by Array Themes.

One of the aspects I loved so much about Genesis themes was how simple they made it to add in extra bits like an email subscription box after the post. If you’re curious, here’s exactly how you do it. They bake in genesis-after-entry-widget-area directly so you don’t have to do much else with your theme. You just declare support like this:

add_theme_support( 'genesis-after-entry-widget-area' );

And boom – you have a footer widget area after the post.

The Array themes don’t do that so you have to go out on your own a bit and figure it out. I recently added a widget area after my posts so I thought I would share how in case anyone else is wondering.

Continue reading “Adding a Widget Area After the Post”

Building a Simple React Todo List and Timer

Theodoro—A React todo list and Pomodoro Timer

One of my goals for 2016 was to ship stuff, quite a few things in fact. We’re close to half-way through the year already, but I finally shipped a thing—a simple React todo list!

GitHubProject PageGIF

On Friday, I put some finishing touches on Theodoro (I know—terrible name) a React-based Pomodoro timer and todo list project I’ve been working on. It’s not perfect, and I’m sure there are some improvements I could make. The goal of the project was always to learn about React (with everyone’s first project—a todo list). At this point, I’ve gotten what I wanted out of the project so it’s time to put it out in the wild and move on.

I wanted to breakdown some of the trickier elements I ran into along with some next steps that I’m taking in particular.

Continue reading “Building a Simple React Todo List and Timer”

My Approach to Learning JavaScript

I discuss my current approach for learning JavaScript
I shared a variation of this blog post on learning JavaScript internally within Automattic a few weeks back. I thought it might be helpful so I’ve adapted it here for a blog post. I’m also asking for some accountability help at the end.

If you’ve read my blog, project posts, or weekly updates over the past year, you’ve probably noticed a heavy focus on learning JavaScript. About a year and a half ago, I decided I wanted to move more towards doing more development-oriented work at Automattic.

I’ve never been shy about talking about this. I’m a bit believer in sharing goals out in the open versus keep them close to the chest. I thought I would share my initial thought process and how I’m currently approaching the goal for anyone that might be interested. One warning before we begin—this is just my experience. Your mileage may vary.

Continue reading “My Approach to Learning JavaScript”

Code Challenge: Simple Mode

Here’s another fun code challenge from Coderbyte:

Using the JavaScript language, have the function SimpleMode(arr) take the array of numbers stored in arr and return the number that appears most frequently (the mode). For example: if arr contains [10, 4, 5, 2, 4] the output should be 4. If there is more than one mode return the one that appeared in the array first (ie. [5, 10, 10, 6, 5] should return 5 because it appeared first). If there is no mode return -1. The array will not be empty.

Continue reading “Code Challenge: Simple Mode”

Code Challenge: Greatest Common Factor

This week’s JavaScript code challenge again comes from Coderbyte:

Using the JavaScript language, have the function Division(num1,num2) take both parameters being passed and return the Greatest Common Factor. That is, return the greatest number that evenly goes into both numbers with no remainder. For example: 12 and 16 both are divisible by 1, 2, and 4 so the output should be 4. The range for both parameters will be from 1 to 10^3.

Continue reading “Code Challenge: Greatest Common Factor”