/ Blog

What I learned the 1st week of 2018

2017 is over, and while it had its ups and downs, I came out of it a fully qualified Web Developer! But as with most roles in programming, you never stop learning.

I've resolved to post a few things every few weeks about new things I'm learning about, as well as some of the reading I've undertaken. So, let's kick off the 1st week, and get to it!

What I did

Car Seating App Prototype

I prototyped a car seating app for a friend, who's a professional chauffeur. He wanted something to record the position of passengers in the vehicle so he can determine the most popular places to sit are (hopefully not the driver's seat!), and required that it function on a mobile layout.

The interface for Car Trip Stats. Five checkboxes indicate the layout of the form interface, excluding the top right as it is the driver's seat. The back left and back right seats are active, indicated in a green box.

That I wrote up over the course of an afternoon, and thanks to Netlify's form handling API, it can accept form information right away! I think I have a better grip on wrangling Webpack, not to mention I can package Bulma in with minimal work.

GatsbyJS and React

I've had some tinkering of the starter boilerplate that Gatsby provides while following along in their tutorial, and I think I have a reasonable expectation of how things are supposed to work.

You write components in React, and give them their associated properties. Then for each page, assemble all those components together for each page.

There are a few things I don't quite understand yet, such as the details of Gatsby's own components, like <Helmet />. I don't yet have all of the possible attributes so I can customise it:

const TemplateWrapper = ({ children }) => (
  <div>
    <Helmet
      title="Gatsby"
      meta={[
        { name: 'description', content: 'Sample' },
        { name: 'keywords', content: 'sample, something' },
      ]}
    />
    <Header />
    <div
      style={{
        margin: '8rem auto 0',
        maxWidth: 960,
        padding: '0px 1.0875rem 1.45rem',
        paddingTop: 0,
      }}
    >
      {children()}
    </div>
  </div>
)

I also don't quite get how to integrate CSS frameworks to style the components I'm making, though I am aware that you can assign classes to elements with the className attribute.

What I read

You Don't Know JavaScript

Cover for You Don't Know JavaScript: Up & Going

I cloned the repository of You Don't Know JavaScript, a book series started by Kyle Simpson, and got to reading the first book—Up & Going, which is the basic primer of all things based in JavaScript.

While I did learn a bit of JavaScript during my Diploma, most of the technical terminology escaped me, so it's a great resource if you need a refresher. If you're a beginner to JavaScript, this is a great piece of reading to get you started.

What I saw

Learn CSS Grid

I've watched a bit of the Learn CSS Grid screencast series on Scrimba which goes over CSS Grid in a nice visual follow along way. If you've been putting off learning how to use it, go watch it! It'll only take a handful of minutes, and you can stop to tinker as you watch!

One of the more interesting things I've learned about it is that you can define the layout visually with grid-template. So instead of typing out numbers, you can set named areas like so:

.grid {
    display: grid;
    grid-template: "h h h h h h h h h"
                   "s s c c c c c c c"
                   "s s c c c c c c c"
                   "f f f f f f f f f";
}

header {
    grid-area: h;
}

nav.sidebar {
    grid-area: s;
}

main {
    grid-area: c;
}

footer {
    grid-area: f;
}

Which gets you this result:

A grid layout, with the header taking the top row, the footer taking the bottom row, and the sidebar and content split in the centre. The sidebar takes less space than the content due to the grid template.

Pretty neat, right?

Anyway, that about does it for my first week of 2018. See you next time!