DEV Community: Dalton Saffe

Setting Up Your Dev Environment

Dalton Saffe — Sat, 03 Jul 2021 03:37:51 +0000

I've compiled a list of sites, tools, and extensions I've enjoyed using for anyone looking to get started on their own development journey.

Learning

Developing software means learning to learn. Visualization and teaching are the most direct ways to create new neural pathways. Create projects you'd want to use to flex your new skills and sprinkle fun into whatever you're doing. Jim Kwik's Limitless is worth a read to kickstart your learning journey.

Tutorials

Reading & Listening

Playing & Prototyping

Sites for when I want to play around or prototype an idea and not have to deal with environment config:

Terminal

I use the default mac terminal since I enjoy the winky sass the icon serves me and it does everything I want :) shout out to iterm2 as a more fully featured option. I use zsh with oh my zsh

Xcode CLI tools: xcode-select —-install

Homebrew to download system packages

Source Control

Git is installed with the Xcode CLI tools which is my source control for code changes. Github is where I push those changes to collaborate with others. I use Gitlab at work which is also fantastic and offers free private repos. Github is a better place to start on IMO since the open source community is centered around it. You can learn so much from looking at / working on open source software so def have fun with that :)

Text Editor

VS Code is fantastic. I love the git tooling where I can clearly review all my changes before committing them and all of the fun extensions that are available.

Extensions:

Browsers

You'll want to get familiar with the dev tools in your browser of choice and have multiple browsers to QA your apps on. Get extensions for viewing JSON, React / Vue Dev Tool extensions, and an ad blocker while you're at it ;)

Servers

Netlify is the truth for hosting static sites and a cute place to get started. It has a massive free tier and helpful tooling through a pleasent interface.

Once you want to start playing around with storing content in a database and creating an API to access it you'll want to explore cloud services such as AWS, Heroku, or DigitalOcean

have fun!

ICON Interactive Site Relaunch

Dalton Saffe — Thu, 16 Jan 2020 20:10:48 +0000

ICON Interactive is a digital agency that's been around for over 20 years so we've seen the crest of various waves of technology. While approaching our site relaunch we wanted to focus on developing a performant site that would showcase our work in a clear, concise manner while also prioritizing performance and the content management experience in the process. We've done just that, so we wanted to share how we did it.

Make It Fast

We opted to go with a site built around the JAMstack, which is a modular & performant approach to building websites. It centers around the idea of server-side rendering the site's pages which are then served as code-split payloads with pre-rendered HTML through a CDN. One can also integrate a mesh of services via APIs & framework plugins. This approach removes the need to directly manage web servers that host the site and makes for a performant & secure user experience.

Site Framework

ICON enjoys utilizing Vue as our JS framework of choice so we went with Gridsome as our site's framework since it's based on Vue and has a rich ecosystem of plug-ins & documentation. Gridsome is heavily inspired by Gatsby which is a React-based site framework anyone new to this space should check out.

Gridsome compiles one's website to code-split payloads with pre-rendered HTML. This differs from a typical site built with Vue or React where the HTML, JS, and CSS are sent as a large bundled javascript file and then parsed on the client's browser. Lots of optimizations are included out of the box - link pre-fetching, image src sets, lazy-loading images, and more. These site generators are the cutting edge of the industry because they dramatically improve site performance & SEO while allowing the developers to use JavaScript frameworks such as React or Vue that they're already familiar with.

Gridsome pulls in data via GraphQL which offers a unified schema and syntax to manage various sources of data. The tooling around GraphQL is fantastic, there's an included query editor to test queries during the development process which also integrates relevant documentation directly into the interface.

CMS

For the content management system we wanted to prioritize ease of use and create a fault-tolerant system for updating the website. We went with Forestry as our CMS since it updates the site by adding the content directly to the github repository as a commit which provides granular logging of each update and allows for version roll-back if needed.

Forestry's templates are easily customizable to the developer through YAML files. They also provide a GUI interface to modulate and manage templates which is intuitive & flexible. All the images are uploaded directly to a linked AWS S3 bucket via the Forestry interface which relieves bloat on the git repository and provides an integrated, seamless experience for the content editor.

Forestry is essentially creating and modifying markdown files for the site to ingest at compile time. Each update that is pushed up will take about 2-3 minutes before it is reflected on the live site because the entire site is being recompiled on each update. The benefits gained in site speed & SEO performance from this compilation process are worth it.

Deployment

Our site is deployed through AWS Amplify which links to our code repository and provides continuous deployment, which means our site gets rebuilt and deployed each time new commits are pushed to the repository or changes are added through the CMS. Amplify also provides deployment for feature branches so we can test updates of a different git branch before they're merged into the main production branch. The compiled site is then served through the AWS CDN which provides a highly performant way to host & serve the site.

Open Source

The site is being built from an open source Github repository since the Github API has fantastic support for CMS integrations like Forestry. We wanted to open source the site's code to serve as an educational resource for anyone curious to learn more about building websites with the JAMstack.

Lighthouse Performance Audit

Our previous site was built on Wordpress and suffered from image bloat which impacted the performance. We're incredibly pleased with the massive jump in performance, accessibility, & SEO from utilizing a JAMstack architecture.

Previous ICON site:

New ICON site:

Thanks for reading! If you're curious to learn more about the JAMstack here's an excellent whitepaper from Netlify.

Links:

https://iconinteractive.com/

https://github.com/iconinteractive/icon-interactive-www

Destructuring in JavaScript

Dalton Saffe — Thu, 31 Jan 2019 03:44:16 +0000

Hi! This is a brief introduction to destructuring objects & arrays for developers learning modern JavaScript syntax.

Destructuring is simply a way of extracting & assigning values within objects and arrays to variables. It was standardized by the ECMAScript committee in 2015 for the ES6 release of JavaScript. Destructuring is one of the key ES6 features that will enable developers to trim down verbose syntax and compose modern & legible JavaScript programs.

Objects in JavaScript are initialized and structured like so:

const obj = {
 firstName: 'Gaby', 
 lastName: 'Perez'
 }

Before ES6 one would extract values into variables one by one:

const firstName = obj.firstName
const lastName = obj.lastName
console.log(lastName) // 'Perez'

Now with destructuring the variable assignment:

const { firstName, lastName } = obj
console.log(lastName) // 'Perez'

We now have two variables assigned to their respective values from one line of code. Destructuring is a clear & concise way to declare only the variables you need and associate them with a value within the same line. When using destructuring assignments, remember that the variable name and key name should correspond so the program knows which value it needs to access.

The same extraction pattern applies to arrays in JavaScript. Instead of keys, the variables are declared relative to the index position within the array.

const [ fifty, lol ] = [50, 82]
console.log(lol) // 82

The destructuring assignment pattern shines when dealing with accessing values within nested object structures.

const student = {
  name: 'Ray Lo',
    subjects: {
      math: 'B+',
      science: 'A',
    },
  }

const { math, science } = student.subjects

console.log(science) // 'A'

Within the destructuring assignment there’s the target on the left side of the equal sign and the source on the right. This distinction is fundamental to illustrating the next few concepts of this assignment style.

Elision

When dealing with arrays it’s possible to skip values with commas in the target so you can access the values you need within an assignment.

This technique is known as elision which is defined as the omission of a sound or syllable when speaking. My favorite example of elision is "y'all". Back to JavaScript though.

const arr = ['hey', 'hello', 'sup', ‘destructuring is cool’];
const [greet, , , message] = arr
console.log(message) // 'destructuring is cool'

Default Values

If it’s possible that the value in your object may return as undefined one may assign default values within the target to avoid bugs from popping up in the program.

const { a = 5, b = 12 } = { a : 200 }
console.log(a) // 200
console.log(b) // 12

Reassignment

It’s also possible to reassign the names of variables within the destructuring target itself. This can be useful for making your variables more semantic for later usage in your program.

const obj = { greeting: 'HEY', wait: 'HOLD UP' }
const { greeting : sup, wait : chill } = obj
console.log(sup) // 'HEY'
console.log(chill) // 'HOLD UP'

Nested Access

Building off the reassignment syntax examined above is the idea of nested access. This pattern is useful for accessing deeply nested objects that contain separate objects that you’d like to extract values from. Absorbing this idea will help keep your code DRY.

The key difference here is that in the variable after the colon in the target we are wrapping the variable on the right with another pair of braces to access the value stored within. Since that variable name corresponds to an object’s key nested within our parent object we are able to layer the destructuring syntax within itself and access the nested values we need.

const nestedObj = {
  students:{
    autumn:{
      graduated: 1322
    }, 
    winter:{ 
      total: 1337
    }
  }
}

const { autumn: {graduated}, winter: {total} } = nestedObj.students

console.log(graduated, '/////', total)

> 1322 '/////' 1337

Summary

Destructuring is a powerful assignment syntax to make succinct variable declarations and applying this concept in programs will enable one to write elegant, modern JavaScript.