DEV Community: Sunny Golovine

The best way to use SVG icons in React.

Sunny Golovine — Fri, 25 Jun 2021 16:03:51 +0000

When I first started working with React, I used libraries like React Icons or Bootstrap Icons to manage my icons.

But problems quickly emerged, the first problem is not all of these packages support tree shaking. Without tree shaking, when you build your site, all the icons from the library will be included with your build rather than just the ones you use.

The second problem is these libraries can be hard to setup and manage. So what's a better way? Let me show you. If you're new to React you might not know this but in fact you can use svg icons directly as React components. So how would we do that?

Creating a Component

Take this SVG icon (via Hero Icons)

This SVG icon has the following code:

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path d="M12 14l9-5-9-5-9 5 9 5z" />
  <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>

The first thing you will want to do is remove the xmlns attribute, as it's not used by React when rendering the SVG. Additionally you need to replace the class attribute with className to make it compliant with React. Your SVG will now look like this:


<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path d="M12 14l9-5-9-5-9 5 9 5z" />
  <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>

Now you're ready to create a React component. I suggest creating a functional component.

import React from "react";

export const AcademicIcon = () => {
  return (
    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path d="M12 14l9-5-9-5-9 5 9 5z" />
      <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
      />
    </svg>
  );
};

At this point you're ready to use the component! You can use it as is in other react components like so:

import React from 'react'
import { AcademicIcon } from './AcademicIcon.js'

export const App = () => {
  return (
    <div>
      <AcademicIcon />
    </div>
  )
}

Adding Props

One benefit of using SVG's as React components is you can add props to it just like you would to any other component. Lets add some props to our AcademicIcon component to make it more flexible.



import React from "react";

export const AcademicIcon = ({ className = "h-6 w-6", fill = "none", stroke = "currentColor", stokeWidth = 2}) => {
  return (
    <svg className={className} fill={fill} viewBox="0 0 24 24" stroke={stroke}>
      <path d="M12 14l9-5-9-5-9 5 9 5z" />
      <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width={strokeWidth}
        d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
      />
    </svg>
  );
};

Now in this final version we moved className, fill, stroke and strokeWidth to a prop and gave it a default of the original value. Now you can call your icon with props:

import React from 'react'
import { AcademicIcon } from './AcademicIcon.js'

export const App = () => {
  return (
    <div>
      <AcademicIcon
         className="h-12 w-12"
         fill="red"
         strokeWidth={3}
      />
    </div>
  )
}

Because all the props have defaults, you can declare the icon with all the props, some of them or none of them! With this method you are also only loading the icons you are using, no wasteful extra code at build time!

If you enjoyed this post check out my other posts on my blog. You should also check out my latest project: Awesome Devtools

10 UI Frameworks for your Next React Project

Sunny Golovine — Wed, 16 Jun 2021 14:38:41 +0000

I'm a developer, not a designer. This means that I use CSS frameworks in most of my side project to make sure they don't look like poop. Here are 10 CSS frameworks that you should consider for your next React project. Some of these are built specifically for react, others are general purpose frameworks that work well with React.

React UI Frameworks

These are UI frameworks that are designed specifically for React. These are great if you are planning a big project or a full featured web app.

Material UI

Material UI is a full featured UI framework for React. It has support for every type of UI element from Material design and comes with it's own CSS-in-JS solution for writing CSS. Material UI currently has 68.9k stars on Github.

Github | Website

Semantic UI React

One of the oldest and most feature complete UI frameworks out there. If you need stability and best in class documentation, give Semantic UI a try. Semantic UI React has 12.3k stars on Github.

Github | Website

React Bootstrap

React bootstrap is a rebuilt version of Bootstrap that is made for React. While it has fantastic component support in React, it's not up to version 5 yet. React Bootstrap has 19.5k stars on Github.

Github | Website

Fluent UI React

In recent years Microsoft has quietly sneaked into the React scene and converted Office, and most of their other web apps to React. With such heavy React development, Microsoft has also released a pretty comprehensive UI framework that includes React bindings. Fluent UI has 11.5k stars on Github.

Github | Website

CSS Frameworks

These are CSS frameworks not built specifically for React, but work extremely well inside a React project. These are great if you are building a landing page or a blog and don't need a comprehensive UI framework like you would in a web app, but still need something to lean on for building the pages.

Bulma CSS

Bulma is a highly customizable CSS frameworks that gives you components for building responsive web pages. BulmaCSS has 43.7k stars on Github as of this writing so it's also safe to say it's a very popular framework.

Github | Website

Tailwind CSS

TailwindCSS is a utility first CSS framework that is packed with classes to build just about anything. While TailwindCSS is not a React specific UI framework, it integrates very nicely with React. TailwindCSS has 42.9k stars on Github.

Github | Website

Bootstrap

The official version of bootstrap. Not much else to be said here, bootstrap is a legendary CSS framework and just about every front-end dev will touch it as some point. Bootstrap has an impressive 151k stars on Github.

Github | Website

Minimal CSS Frameworks

While these are still CSS frameworks, I decided to put them into a different category because they serve a different purpose. If you want to put a webpage up with speed or just want to build and MVP without investing too much time, these minimal UI frameworks will help you get there.

MVP.css

A classless CSS framework that gives you some reasonable defaults to get started with.

Github | Website

W3 Core Styles

If you prefer to get your CSS styles directly from the source, look no further. While not the prettiest styles, these certainly work for some types of sites and you can bet that they will work.

Website

Bamboo CSS

A classless CSS library that adds nice defaults to HTML elements, and uses normalize.css and sanitize.css under the hood for a consistent experience and supports dark mode with automatic theme detection out of the box

Github | Demo

Water CSS

Water CSS is another classless CSS framework that gives you dark mode out of the box, gives you way better form elements and improves typography.

Github | Website

If you liked this post you should check out Awesome Devtools. A larger collection of devtools for web developers.

Building a blog with Gatsby from scratch

Sunny Golovine — Mon, 14 Jun 2021 15:59:52 +0000

Gatsby is a static site generator and is one of the most popular JS frameworks out there, running on top of React. Most guides you will read here will point you to building a Gatsby site by starting with gatsby new ..., while I think that this is a great starting point, In this post I want to explain how to build a Gatsby blog completely from scratch.

Setting Everything Up

Prerequisites

Before we get going make sure that you have NodeJS and Yarn both installed on your system. I suggest using NVM to install Node.

Initializing the Project

To start create a new folder for your project. Inside the folder, run yarn init -y to initialize it as a Javascript project. Then run yarn to generate a yarn.lock file and a node_modules folder. The next step is to add the dependencies that we will need.

yarn add react react-dom gatsby

Lastly you will want to create our Gatsby configurations, to start create a file called gatsby-config.js and populate it with the following:

// gatsby-config.js
module.exports = {
  plugins: [],
}

Setup the Scripts

Once we have out dependencies installed, the next step is to create a few scripts for us to control Gatsby. Add the following items to the "scripts" section of your package.json file.

{
    "scripts": {
    "start": "gatsby develop",
    "build": "gatsby build",
  }
}

Setup the Files

The last little bit we will need before we can run the site is to generate a page for Gatsby to render. To do this, create a src folder with a pages folder inside, then create a file inside called index.js and populate it with the following:

// src/pages/index.js
import React from 'react'

function App() {
  return (
    <div>
        <h1>Hello World!</h1>
    </div>
  )
}

export default App

Now that we have everything setup, run yarn and then yarn start and then to go http://localhost:8000 to see your site.

Setting up the Blog

Now that we have the basic site up and running, it's time to setup the blog. To start, create a folder in the root of your project called static and create another folder inside called posts. Create several markdown files inside, the filenames do not matter however they should be formatted using frontmatter. Here's an example:

---
title: My First Post
slug: first-post
date: June 14, 2021
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a ex suscipit, tincidunt nisi dapibus, porta augue. Nam quam quam, consectetur in iaculis sit amet, fermentum a tortor. Duis eget ex nisi. Quisque ac nunc in ipsum luctus cursus vitae eget nisl. Quisque et faucibus leo. Suspendisse potenti. Quisque sed arcu nulla.

Vivamus vestibulum aliquet mi. In consectetur euismod risus molestie viverra. Nulla aliquam molestie quam a mattis. Cras nec purus sollicitudin, fringilla odio ut, eleifend ipsum. Morbi imperdiet velit vel ligula euismod accumsan. Vivamus at lorem ac nulla porttitor euismod. Proin molestie, neque ut molestie elementum, nisi sapien tincidunt nisi, at ullamcorper justo mi eu nunc. Aenean in dolor volutpat, pulvinar magna eget, consequat urna.

Installing Dependencies

When we run gatsby develop, we want Gatsby to look in our static folder, find any blog posts, and create a page for each post. There are two ways to fetch markdown data in Gatsby, we can either use Gatsby Remark or we can use MDX. In this guide we will use MDX. To start, install the following packages:

yarn add @mdx-js/react @mdx-js/mdx gatsby-plugin-mdx gatsby-source-filesystem

Configure Gatsby to get our Data

By default, Gatsby is not aware of the existence of our static folder, we need to expose this folder to Gatsby so we can query the contents using GraphQL. To expose this folder, add an instance of gatsby-source-filesystem to gatsby-config.js.

// gatsby-config.js
const path = require('path')

module.exports = {
  plugins: [
    // This tells gatsby about the directory
    // And to source files from the directory
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: path.resolve(__dirname, "static", "posts")
      }
    },
    // This plugin will help gatsby handle markdown files that it finds in `static/posts`
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: ['.md'],
      }
    }
  ]
}

Now if you start the dev server and go to https://localhost:8000/__graphql, and then execute this query, you will see that it returns the markdown file you have created

query MyQuery {
  allMdx {
    nodes {
      frontmatter {
        slug
        title
        date
      }
    }
  }
}

{
  "data": {
    "allMdx": {
      "nodes": [
        {
          "frontmatter": {
            "slug": "first-post",
            "title": "My First Post",
            "date": "June 14, 2021"
          }
        }
      ]
    }
  },
  "extensions": {}
}

Fantastic, we have the data being fed to Gatsby now, at this point we now need to create a template to store this data, and then tell Gatsby to fetch the data when we build the site and display it.

Building the Template

Once we get the data from the filesystem, we need to tell Gatsby how to render it. For this we will need to create a template page for our posts. Start off by creating a file called template.js in your src folder.

import React from 'react'
import { MDXRenderer } from 'gatsby-plugin-mdx'


function PostTemplate(props) {
  // Here pageContext is passed in at build time by gatsby-node.js
  const { frontmatter, body } = props.pageContext

  return (
    <div>
      {/** Header to our post */}
        <div className="header">
            <h1>{frontmatter.title}</h1>
                <p>{new Date(frontmatter.date).toLocaleDateString()}</p>
        </div>

            {/** Post Body */}
            <div className="body">
        <MDXRenderer>
            {body}
        </MDXRenderer>
      </div>
    </div>
  )
}

export default PostTemplate

Note that in this template, frontmatter and body are both props we are passing to this template from out gatsby-node.js script, which we will setup in the next section. Also <MDXRenderer> is handling everything related to our rendering. You can control the rendering very granularly if you dig into the configuration, but this is the most basic version that we will need.

Setting up Gatsby Node API

The next step in setting up a blog is to route our data from GraphQL and render it onto the page. We do this inside gatsby-node.js. To start create a file in the root of your project called gatsby-node.js and populate it with the following:

const path = require('path')

exports.createPages = async ({graphql, actions }) => {
  // This is the query we will use to fetch data from GraphQL
  // This query will look for markdown files that have `/posts/` in
  // Their absolute path. If you keep your posts in another place you will
  // Need to change this
  // Inside each file we need the title, date, slug and the posts body
  const query = await graphql(`
    query Posts {
      allMdx(filter: { fileAbsolutePath: { regex: "/posts/" } }) {
        edges {
          node {
            id
            frontmatter {
              date
              title
              slug
            }
            body
          }
        }
      }
    }
  `)


  // Check for any errors in the query
  if (query.errors) {
    throw query.errors
  }

  // Get the posts and put them into a nice object
  const posts = query.data.allMdx.edges

  // Fetch the post template we created in teh previous step
  const postTemplate = path.resolve(__dirname, "src", "template.js")

  // Iterate over every post we queried, then for every post call
  // actions.createPage() to build a page with the data and template
  posts.forEach(post => {
        const { id, frontmatter, body } = post.node

    // This is the post path. We use a combo of the slug in a string
    // Template prefixed with /post. You can change this to be anything you want
    // So long as the path does not collide with another path
    const path = `/post/${frontmatter.slug}`


    // Now we finally create the page
    // We assign every page the path we just created and build it
    // Using our postTemplate component. We also pass in some context about the post
    // Which will be used by the template via pageProps
    actions.createPage({
      path,
      component: postTemplate,
      context: {
                frontmatter,
        body
      }
    })
  })

}

There's quite a lot to unpack in this script, I suggest reading over the comments to try and understand everything that is going on. But this is pretty much it. Now if you run your development server and go to http://localhost:8000/post/first-post, you should see your post being rendered.

Setting up a Post List

The last step is to setup your home page to display your posts. To do this we will reuse the query we created for our gatsby-node.js script. Except this time we will be putting it in our index.js page as a static query. In src/index.js, add the following code static query

// src/pages/index.js
import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'

function App() {

  // This query will get all of your posts
    const posts = useStaticQuery(graphql`
    query {
      allMdx(filter: {fileAbsolutePath: {regex: "/posts/"}}) {
        edges {
          node {
            frontmatter {
              date
              title
              slug
            }
          }
        }
      }
    }
  `)  

  return (
    <div>
        <h1>Hello World!</h1>
        {/** This will render each title out on the page. And lets you click on the link to view the post*/}
        {posts.allMdx.edges.map((edge) => {
        const { date, slug, title } = edge.node.frontmatter;
        const path = `/post/${slug}`;
        return (
          <Link to={path}>
            {title} - {date}
          </Link>
        );
      })}
    </div>
  )
}

export default App

Conclusion

With that you should now have a functioning Gatsby blog. From here you can now go on to add image support, styling the blog and adding tags. This post was meant to show how you can get a minimum viable blog going in Gatsby.

If you enjoyed this post, check out some of my other posts on my blog

Roll your own URL shortener using Netlify Redirects.

Sunny Golovine — Fri, 11 Jun 2021 14:12:52 +0000

Note: I am not affiliated with Netlify

The Problem

Earlier this week I had a problem. I had just spun a self hosted instance of Plausible Analytics and I wanted to create some campaigns for my personal website to track where users were coming from on the internet, whether clicking on links in my post, social media bio's, etc. The problem is in creating my campaigns, my URL's all ended up looking something like:

https://mydomain.com?utm_source=dev.to&utm_medium=post&utm_campaign=post-click-throughs

Not a great look if the service doesn't shorten the URL's. I wanted a solution where I wasn't reliant on other services to clean up my URL's.

The Solution

What I needed here was a URL shortened that would shorten that hideously long looking URL into a shorter one, I had some spare domain names that were redirecting to my main domain so I decided to take sunny.gg and convert it into a URL shortener.

In my case I wasn't shortening URL's all the time so having a static solution where you couldn't create new URL's on the fly was acceptable, all I needed was the ability to shorten a set of long URL's into pretty short ones, and then share those around.

To achieve this I used Netlify and their redirects ability. Create a project that looks like this:

/app/index.html
/netlify.toml
/package.json

You can populate your /app/index.html as you see fit, it doesn't really matter in this case, just a bare HTML file will do. The netlify.toml file is where things get interesting:

[build]
  base = "/"
  publish = "app/"
  build = "echo 'no build command'"


# Primary redirect
[[ redirects ]]
  from = "/"
  to = "https://yourmainwebsite.com"
  status = 301

# Add as many of these as needed
[[ redirects ]]
  from = "/some-pretty-url"
  to = "https://mydomain.com?utm_source=dev.to&utm_medium=post&utm_campaign=post-click-throughs"
  status = 301

[[ redirects ]]
  from = "/foo"
  to = "https://mydomain.com/bar?utm_source=dev.to&utm_campaign=bar"
  status = 301

Thought somewhat of a crude solution, though I found it to work quite well, you can see it in action with my post footer on this post.

If you like this post, check out some of my other posts on my blog

Removing secrets from a git repo

Sunny Golovine — Sat, 05 Jun 2021 01:23:26 +0000

Working on Awesome Devtools this past week, I decided to make the repo public so others could contribute to it. I had one slight problem though, I had committed my .env file which contained secrets I would rather the world not know.

So how would you delete a file like this? Well standard logic says just....delete it. But with git it's not that simple, when you delete something, even though the latest version of your code no longer has this thing, the previous version of your code still do. Simply deleting the file would not work.

There are two ways of deleting a file entirely in git. One way where you preserve your git history, and one where you do not.

Delete while preserving git history

If you want to delete a file while still preserving your git history, you can do so with a neat recipe from Github.

# Delete the file
git rm --cached <your_file>

# Commit the change
git commit --amend -CHEAD

# Push the commit
git push

Delete the file and nuke git history

If you're like me and don't really care about your git history for a particular project, you can do it the way I did it and just nuke the file and all the history leading to the file.

First run git remote -v to get your current remote.


➜ git remote -v
origin  git@github.com:sgolovine/awesome-devtools.git (fetch)
origin  git@github.com:sgolovine/awesome-devtools.git (push)

Now delete your the file and also delete the .git folder. Once you've deleted the file, recreate the git repository locally


git init
git add -A
git commit -m "Initial Commit"
git remote add origin <url from step 1>

Finally do a force push to your remote to overwrite the previous history with git push -f

That's it! If you know of a better way to delete a file from git history, leave a comment below and I will update the article. You can find more of my article here and on my blog

Persisting useReducer with a custom React Hook

Sunny Golovine — Wed, 28 Apr 2021 13:45:14 +0000

google "reducer" if you're confused by the cover image

When I was building gistmarks, I needed to store users data and pass it around to various parts of the app. For this I typically use Redux combined with Redux Persist. This approach is tried and true but does involve quite a bit of boilerplate code so I wanted to try something new.

I quickly learned that useReducer is a highly competent alternative to Redux and typing it (adding typescript types) is much more straightforward than it is with Redux. There was however one thing missing: Persistence.

For me, being able to persist a users state is crucial to my app functioning so having a way of persisting data with the useReducer hook was essential. With Redux I would always use redux-persist however there didn't seem to be any formal way of doing it with useReducer.

As a result I created my own hook that persists the reducers data to localStorage. Here's that hook:

Javascript Version:

import { useEffect, useReducer } from "react"
import deepEqual from "fast-deep-equal/es6"
import { usePrevious } from "./usePrevious"

export function usePersistedReducer(
  reducer,
  initialState,
  storageKey,
) {
  const [state, dispatch] = useReducer(reducer, initialState, init)
  const prevState = usePrevious(state)

  function init() {
    const stringState = localStorage.getItem(storageKey)
    if (stringState) {
      try {
        return JSON.parse(stringState)
      } catch (error) {
        return initialState
      }
    } else {
      return initialState
    }
  }

  useEffect(() => {
    const stateEqual = deepEqual(prevState, state)
    if (!stateEqual) {
      const stringifiedState = JSON.stringify(state)
      localStorage.setItem(storageKey, stringifiedState)
    }
  }, [state])

  return { state, dispatch }
}

Typescript Version:


import { useEffect, useReducer } from "react"
import deepEqual from "fast-deep-equal/es6"
import { usePrevious } from "./usePrevious"

export function usePersistedReducer<State, Action>(
  reducer: (state: State, action: Action) => State,
  initialState: State,
  storageKey: string
) {
  const [state, dispatch] = useReducer(reducer, initialState, init)
  const prevState = usePrevious(state)

  function init(): State {
    const stringState = localStorage.getItem(storageKey)
    if (stringState) {
      try {
        return JSON.parse(stringState)
      } catch (error) {
        return initialState
      }
    } else {
      return initialState
    }
  }

  useEffect(() => {
    const stateEqual = deepEqual(prevState, state)
    if (!stateEqual) {
      const stringifiedState = JSON.stringify(state)
      localStorage.setItem(storageKey, stringifiedState)
    }
  }, [state])

  return { state, dispatch }
}

For this hook you will also need a companion hook called usePrevious

Typescript Version:

import { useRef, useEffect } from "react"

// Given any value
// This hook will return the previous value
// Whenever the current value changes

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function usePrevious(value: any) {
  const ref = useRef()
  useEffect(() => {
    ref.current = value
  })
  return ref.current
}

Javascript Version:

import { useRef, useEffect } from "react"

// Given any value
// This hook will return the previous value
// Whenever the current value changes

export function usePrevious(value) {
  const ref = useRef()
  useEffect(() => {
    ref.current = value
  })
  return ref.current
}

How it works

The hook manages syncing state internally. Whenever you issue a dispatch, an effect within the hook checks the previous state of the reducer and if the state changed, it will backup that state to localStorage.

How to use it

Using this hook is super easy.

const initialState = {...}

function reducer(state = initialState, action) {...}

const storageKey = 'MY_STORAGE_KEY'

const { state, dispatch } = usePersistedReducer(reducer, initialState, storageKey)

// use state and dispatch as you normally would.

Conclusion

That's pretty much it. If you think I could improve this hook leave a comment and I'll update the article. If you liked this article check out some of my other posts here

Awesome Git Shortcuts

Sunny Golovine — Fri, 23 Apr 2021 16:00:33 +0000

Besides VSCode, git is probably the most used tool in my toolbox. Over the years I've learned that there are a few common git commands that I always repeat, so I created some sensible aliases to help me move faster. I wanted to share these aliases with any folks here that might find them helpful.

Git Status

By far the most frequently used alias is my alias to git status. I aliased git status to gst.

Git Add

The normal command for staging files for a commit is git add -A or git add . or git add some/file/name.ts. I created an alias for it simply to ga

Git Commit

Simmilarly to git add, I also created an alias for git commit. The typical command is git commit or git commit -m <COMMIT_MSG>, I aliased git commit to gc and git commit -m to gcm. Now you can type out a commit message like gcm "some cool messsage"

Git Diff

For git diff I added two aliases. First is gd which is an alias to git diff. However I also have gdc which is aliased to git diff --cached, for viewing diffs after you have staged your files.

Git Push

I also aliased git push to gp. Not much more to say here.

Git Checkout

For quickly checking out branches I aliased git checkout to gco. For new branches I also created a gcob alias that does git checkout -b.

Git Branch

For quickly listing branches I aliased git branch to gb.

Benefits

Besides being much faster to type out, another benefit of these aliases is that you can still use flags like normally. Say you want to push a new branch to a remote. Without aliases it would look like this: git push -u origin my_branch. But with aliases I can simply type gp -u origin my_branch, not a significant savings but when you type the command out thousands of times, it starts to make a difference.

Try them out yourself

While there are many ways you can create a git alias, I did it in the most simple way by just adding an alias to my .bashrc. Here are all the aliases I mentioned in this post


alias gst='git status'
alias ga='git add -A'
alias gc='git commit'
alias gcm='git commit -m'
alias gd='git diff'
alias gdc='git diff --cached'
alias gp='git push'
alias gco='git checkout'
alias gcob='git checkout -b'
alias gb='git branch'

If you want to give these a test drive, paste this code block directly into your terminal and it will enable these aliases for the current session. If you like them you can then add it to your .bashrc / .zshrc / etc.

If you liked this post check out some of my other writing here

Migrating from NPM to Yarn

Sunny Golovine — Sun, 18 Apr 2021 15:10:38 +0000

Say you have a project that uses NPM for dependency management. How would you convert that project to use Yarn?

For the longest time the way I did it was just deleting the package-lock.json and running yarn to generate a new lockfile. While this works well on small projects, dependency pinning is there for a reason and trying to do this on a larger project may land you in hot water. So how do you do it safely? It's simple:


yarn import

That's it! When you run yarn import, yarn will read your package-lock.json and generate a yarn.lock file based on it. It's a much safer way to migrate from one package manager to the other.

If you enjoyed this post check out some of my other writing

Opt your Netlify, Vercel or Github Pages site out of Google's FLoC Network

Sunny Golovine — Fri, 16 Apr 2021 13:52:19 +0000

EDIT 3: Github Announced yesterday that FLoC will be disabled on all Github Pages. If your site is hosted on Github Pages feel free to skip this article, Github has you covered.

EDIT 2: Some readers have mentioned that the Github Pages solution does not work. Namely from this Github thread and this one. My suggestion here is to move off of Github Pages if this is something you really care about. Both Netlify and Vercel are fantastic hosts and offer the ability to disable FLoC via headers.

EDIT: One of the commenters pointed out that during the FLoC origin trial, FLoC is only loaded and computed when the site contains ads-related resources

During the FLoC origin trial, pages on websites that don't opt out will be included in the FLoC calculation if Chrome detects that they load ads-related resources or if they use document.interestCohort(). Pages served from private IP addresses, such as intranet pages, won't be part of the FLoC computation.

What this means is that if you are not running Google Ads on your site, you will not be opted into FLoC during the origin trial. I would personally still recommend opting out as FLoC will likely be loaded on all sites after the trial period is over.

More Information (google.com)

Federated Learning of Cohorts (or simply FLoC) has made quite a stir in tech circles in the past few days. While I'm by no means expert enough to explain to you how it works, long story short it's a new way for Google to track users now that cookies have become persona non grata in the tech world.

No one in the privacy space is happy about this. The EFF wrote a scathing article on it and companies like DuckDuckGo and Brave have already taken steps to block it on their search engines and browsers.

Plausible Analytics wrote up a report on what FLoC means for developers and, like all things from Google, it's "opt-out" rather than "opt-in", meaning if you do not take action on your site, Google will opt your site into FLoC. We should probably tell Google not to do that.

At it's core all you need to do is add this header to your websites response headers:


Permissions-Policy: interest-cohort=()

Like many of you here I run a number of sites through Netlify, Vercel and Github Pages. Here is a quick breakdown of how to opt-out of FLoC on all 3 platforms.

Netlify

Headers in Netlify can be added either via netlify.toml or your _headers file.


# netlify.toml

[[headers]]
  for = "/*"
  [headers.values]
    Permissions-Policy = "interest-cohort=()"


# _headers

/*
  Permissions-Policy: interest-cohort=()

Github Pages

Unfortunately it seems that Github Pages does not allow you to set your HTTP headers. Luckily we can implement a workaround by adding this to the <head> of your root HTML document.


<meta http-equiv="Permissions-Policy" content="interest-cohort=()"/>

Vercel

Like Netlify, Vercel lets you set response headers through a vercel.json file. To do so add this to the headers block in your vercel.json file. You can read more about Vercel's configuration options here

{
  ...
  "headers": [
  ...
    {
     "source": "/(.*)",
     "headers" : [
        {
          "key": "Permissions-Policy",
          "value": "interest-cohort=()",
        }
     ]
    }
  ]
}

Conclusion

Part of being a professional and responsible web developer is making sure you are good steward of your users' data, even if you don't directly ask them for it. While major browsers block FLoC already, adding these response headers to your site will ensure that users that aren't using those browsers are still safe from tracking.

If you enjoyed this post check out some of my other writing

Your "Awesome" list sucks. Make it better with GistMarks.

Sunny Golovine — Tue, 13 Apr 2021 15:06:32 +0000

Awesome Lists are awesome, but they also kind of suck, let me explain. While the idea behind the awesome list is great, the implementation is less than ideal. Here we have all these bookmarks, yet the best format we can come up with to store all of these bookmarks is: a README??

The Problem with Awesome Lists

Say you create a huge list of resources to help someone build a React application, I spend all this time building an awesome list but in the end I hit a few limitations

💥 You can't search them: Sure you could CTRL+F but that's less than ideal for searching a huge document

💥 Categorization is hard: You can create categories in your list but there's no easy way for users to filter by those categories. A table of contents makes things a little easier but that means users will have to scroll all the way back up to the TOC to navigate to another section.

💥 Mobile Support: Anyone can view your awesome list on their phone, but unless you're careful about formatting, they might just see a complete mess.

💥 Inaccessible data format: Everyone format's their awesome lists a bit differently. This means that if you want to create tool to aggregate them, you're going to be dealing with a ton of incompatible formats.

The result of all of this is even though your awesome list may be packed with awesome resources, few will benefit from it because just finding the right stuff on that list is hard. And if you want to spend the time building an awesome list with good navigation, you're going to spend more time on formatting them you will on actually adding good content to the list. So what's the solution?

Enter Gistmarks

I built Gistmarks out of an internal need to share bookmark collections. My company has alot of disparate sites on our intranet and tracking them down means spending time tracking those links down, scrolling through slack messages and email threads. Gistmarks solves this problem by letting anyone create a bookmark collection and then sharing it with whoever they want. With Gistmarks every team was able to create their own collection of bookmarks, internal dashboards, code repositories, etc and then share it with other, drastically cutting down the time it took to find a link to that internal tool you needed.

But as I was building Gistmarks I realized there are many more use cases for such a tool, namely Awesome Lists. Whenever you build an Awesome List with Gistmarks, your list is now sorted by category, searchable, has all the UI elements needed for good navigation and your data is stored in a consistent format that can be then used by others.

Check out some awesome lists created with Gistmarks:

Workout Collection

Cooking Collection

Dev Team Collection

React Resources Collection

Make your awesome lists more awesome today.

Gistmarks is free to use. Get started creating bookmark collections with GistMarks today.

Gistmarks

Create your own NFC business card.

Sunny Golovine — Sun, 13 Dec 2020 17:30:46 +0000

If you've been on Instagram lately then you've probably seen ads for companies like Blue Social that advertise "smart" business cards, letting you share personal information with others simply by tapping this card on their device.

While the concept is cool, I personally didn't like Blue Social. For one, their cards link out to a page on blue social, I wanted to link to my own site. Second, the price just wasn't right, at $34.99, it wasn't worth it to me at that price.

But then it got me thinking, NFC smart cards aren't rocket science, I bet I could just make one myself. Usually when I do something like this it ends up being much harder than I previously anticipated, but in this case it was actually way easier than I thought. So, you ready to make your own NFC smart cards?

Step 1: Buy the card

The first step is to get some NFC smart cards. I would suggest just searching "NFC Cards" on Amazon or Ebay, you can usually get them for around $4.99 for 10 cards. There are many shapes and sizes of these cards and prices vary depending on quantity, it doesn't really matter which one you get.

Step 2: Load data

Once you get your NFC cards, the next step is to load data on your device. To load data on your device you will need a smartphone with NFC capabilities (most devices support NFC these days) and a free app (there are tons). I suggest NFC tools, you can find the iOS app here and the Android app here

One you open the app go ahead and click "read" and then tap your card to your device, it should read the card and show that there is no data on your card. Next go back and click on write and then add a some records.

If you want to share contact info with iPhones you can either put your phone number or website and iPhones will read that, however if you add a contact, Android devices will read it but iPhones wont.

Once you add your data, select "Write" and then tap your card to the device. After the data is written you should be able to just tap your card to your device and notification will show up to open your website/contact/phone.

Conclusion

NFC Smart cards are really easy to make, while companies like Blue social give you a very user friendly way to make one, i prefer to save a few bucks and have fun doing it myself.

Github Actions for your Javascript Project: In less than 5 minutes.

Sunny Golovine — Mon, 23 Nov 2020 17:50:30 +0000

Setting up CI (Continuous Integration) to your project used to be a good bit of work. If you stored your code in Github, you would need to setup an account with Jenkins, CircleCI or others, and go through the arduous process of getting the two systems to talk to one another, in short, it was a bit of a pain in the a**.

Github Actions came on the scene last year and what makes it so awesome is if you already have your code in Github, you can setup a pipeline in minutes, not hours. In this guide I'll show you how you can setup your own pipeline with Github actions in as little as 5 minutes!

Prerequsites

This guide assumes that you have the following already setup:

A Javascript project in Github
Package Scripts to run linting, typechecking, testing, etc.

With that out of the way lets get started

Setting up your workflow file.

Github actions runs off of a workflow file, this file will tell Github how to setup the CI machine and what to do after it's been setup. To get started, create a folder in the root of your directory called .github. From there go inside that folder and create another folder called workflows. Going inside that folder again, create a YAML file, it can be whatever name you want (I usually do something boring like ci.yaml)

Once you've created the workflow file, paste this inside:



name: CI
on:
  pull_request:
    types: [opened, closed]
    branches: ['main']

jobs:
  job-name:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-versions: [12.x]

    steps:
      # Setup steps
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      # User defined steps
      - run: sudo npm install -g yarn
      - run: yarn
      - run: yarn lint
      - run: yarn test
        env:
          CI: true

So let's break down what's going on in this file. First off at the top you have the name which you want to call the workflow. Again it can be anything you want.

Below that you have the on: block, this block defines when the workflow is run on and on which branches. This workflow is meant to run on a pull request and runs whenever one is opened or closed, it's also restricting runs to PR's that are opened against the main branch. If you have other branches like develop or release, you can add them into that block as well.

Below the on: block you have a strategy: block. This defines which version of node you are using. In this case we are using a matrix and specifying that we want to run the jobs with a node version that is v12.x.x.

Finally at the bottom is the meat and potatoes of the workflow, the steps block. The first few steps are there to setup NodeJS but below that you can define your own steps.

In this example, my project uses yarn so the first step is to install that then to run the lint and test commands. You can add, remove and modify these steps according to what is in your package.json

Opening a PR.

Once you have finished setting up the worflow file, commit your changes to a branch and then open a PR into your main branch. When you do that, the CI will automatically kick off and start running.

I hope this quick guide helps everyone in keeping their code more reliable. This is a pretty basic setup and will let you add functionality as you continue to grow your project.