DEV Community: Sunny Singh

VS Code Quick Tip: JavaScript Import Autocomplete

Sunny Singh — Wed, 11 Nov 2020 20:26:03 +0000

Visual Studio Code (VS Code) is an extremely popular code editor that is mainly used for frontend web development. One of its features is a sophisticated code completion system known as IntelliSense.

IntelliSense works well... except with JavaScript module imports:

import { useState } from 'react';

If you start to type import you have to decide what you are importing first, instead of where you are importing from. This unfortunately causes an issue for VS Code because it has no idea what to suggest for available imports.

Let's compare this syntax to other languages such as Python:

from math import pi

Since you start the statement with from math, it is easier for the editor to give you suggestions on what is available for you to import from the module.

Okay, this is great news for Python, but what about our beloved JavaScript and Node.js code? Don't worry! I came across a fantastic solution for this.

💡 Solution: Fake reverse the import statement

If I could go back in time and make JavaScript's import syntax work like Python's, I would. However, we can work with what we got by trying to fake reverse the import.

You do this by simply typing import and waiting for a menu to pop up:

Make sure to select the import statement option by using the arrow keys and then pressing the Enter key. You should then see a template for an import statement:

import {} from 'module';

The module text will be highlighted and selected, so you can start typing where to import from first. After that, press the Tab key and the cursor will move in between the curly braces. Now, you can type what you want to import and VS Code will be able to offer you suggestions.

Did you find this tip useful? Have your own tip to share? I would love to know, so reach out on Twitter or leave a comment.

Quick tip: Manage Node versions for your projects

Sunny Singh — Thu, 05 Nov 2020 14:22:53 +0000

When I start a new project, I am likely going to run npm init. It can be a backend API, a frontend application, or a simple static site.

This means that Node.js is powering all of my projects and it's unlikely that I am able to keep all of them working with the same Node version. For example, I may have a legacy project that uses Node v8 while a newer project uses Node v14.

A tool to help with this problem exists and you may already be aware of it: Node Version Manager (NVM). It allows you to install and use different versions:

# Install and use Node v14
nvm install 14
nvm use 14

However, this manual process can be tedious when switching between projects. Imagine opening a project and instinctly trying to run npm start. Uh oh, you see some errors. You begin debugging until realizing that you're on a wrong Node.js version! You then have to remember the right version or look at the readme.

💡 Solution: the `.nvmrc` file

Did you know that NVM can automatically detect which version to use in a project? You can enable this by adding a .nvmrc file which should contain a Node version:

14.15.0

Now run nvm use in the project and NVM will figure out to install and use 14.15.0.

Bonus: You can even have your shell automatically run nvm use when it detects an .nvmrc file! Read the NVM docs to learn how to set it up.

🏎 Honorable mention: the `engines` field

NVM obviously uses the .nvmrc file, but some other tools and services may as well. Notably, Netlify uses nvmrc to detect which Node.js version to build your site with.

However, other services such as Heroku use the engines field in package.json:

{
  "name": "my-package",
  "engines": {
    "node": ">=14.15.0",
    "npm": ">=6.14.8"
  }
}

This field actually matters significantly when it comes to publishing packages to NPM with version requirements, and also has the added benefit of being able to specify the version of the package manager (NPM or Yarn) as well.

Maintaining different Node.js versions is now a problem of the past. Did you like this quick tip? Maybe you have one to suggest? Leave a comment or send me a tweet.

How I added realtime search to my static site

Sunny Singh — Tue, 03 Nov 2020 17:21:02 +0000

One of the side projects that I run is Resrc, a site where I curate useful or interesting resources for software development.

Since the site is typically updated once a day and does not offer complex dynamic features, I decided to go with a static site architecture also known as Jamstack. The actual tech stack that I went with is Airtable for the database and Gatsby for the static site generator. This works extremely well because of Gatsby's data source plugin system to allow pulling in data from Airtable at build time with ease.

However, people tend to question this architecture...

How do I add a dynamic feature, such as search, to a static site?

It is possible, but requires a different set of tools than what you might traditionally be used to. In my case, I already used those tools: Airtable and Netlify.

📊 Storing and querying data with Airtable

Airtable is a service that looks like a spreadsheet but behaves like a database.

The best part is you get access to a full API:

The API has advanced filtering capabilities which allows performing a full text search on various fields of my data, realtime. I got really excited because I thought: now I just build out a search UI, send an ajax request to fetch results, and I'm done!

Hmm, not quite. Airtable currently does not have access control features, meaning that if I exposed my API key on the frontend then anyone could submit a request to delete my data. That is not exactly what I would call secure.

Note that this article intends to be a tutorial, so to continue on I recommend that you create an Airtable base, add some records, and then check out the API.

🔑 Securing the API key with Netlify Functions

Netlify is a service that handles deploys for static sites. Amongst many features that are useful for static sites, they offer serverless functions. While AWS Lambda is used under the hood, you don't have to worry about complex implementation details.

The reason that we'd want to use serverless functions is because they provide a way of proxying our requests to the Airtable API, thus hiding our API key. Instead of the frontend making direct requests to Airtable, it is made to the serverless function.

Note: This tutorial assumes that you already created a site with a static site generator such as Gatsby, Next.js or Eleventy.

To set up Netlify Functions, we first need to create a netlify.toml file:

[build]
  functions = "functions"

Let's also store our API key in a .env file:

AIRTABLE_API_KEY=PLACEHOLDER

Make sure that .env files are ignored by Git and thus never committed to your repository. You will also have to add this key as an environment variable in Netlify.

Next, create the file functions/search.js:

const Airtable = require('airtable');

const AIRTABLE_API_KEY = process.env.AIRTABLE_API_KEY;
const AIRTABLE_BASE_ID = 'PLACEHOLDER'; // TODO: Replace placeholder.
const AIRTABLE_TABLE_NAME = 'PLACEHOLDER'; // TODO: Replace placeholder.
const AIRTABLE_PAGE_SIZE = 30;

const RESPONSE_HEADERS = {
  'Content-Type': 'application/json; charset=utf-8',
};

exports.handler = async function (event) {
  const { query } = event.queryStringParameters;

  if (!query) {
    return {
      statusCode: 422,
      body: JSON.stringify({ error: 'Query is required.' }),
    };
  }

  if (!AIRTABLE_API_KEY) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: 'Airtable API key is missing.' }),
    };
  }

  const base = new Airtable({ apiKey: AIRTABLE_API_KEY }).base(
    AIRTABLE_BASE_ID
  );

  const results = await base(AIRTABLE_TABLE_NAME)
    .select({
      pageSize: AIRTABLE_PAGE_SIZE,
      // TODO: Update to use your field names.
      filterByFormula: `
      OR(
        SEARCH("${query.toLowerCase()}", LOWER({Name})),
        SEARCH("${query.toLowerCase()}", LOWER({Description})),
        SEARCH("${query.toLowerCase()}", LOWER({Category})),
        SEARCH("${query.toLowerCase()}", LOWER({URL}))
      )
    `,
    })
    .firstPage()
    .catch((error) => {
      console.log(`Search error from Airtable API: ${error.message}`);
      return null;
    });

  const noResults = !Array.isArray(results) || results.length === 0;

  if (noResults) {
    return {
      statusCode: 404,
      body: JSON.stringify({ error: 'No results.' }),
    };
  }

  return {
    statusCode: 200,
    headers: RESPONSE_HEADERS,
    body: JSON.stringify({ results }),
  };
};

Make sure to replace the // TODO comments with your own keys and fields.

Let's now install the Airtable JavaScript client and Netlify CLI:

npm install airtable
npm install netlify-cli --dev

And connect our Netlify account:

npx netlify login

Finally, we can launch our development server:

npx netlify --command="npm run develop"

Replace npm run develop with the command you normally use to start your server.

Our search results can now be accessed at the following search endpoint: http://localhost:8888/.netlify/functions/search?query=test

⚛️ Fetching data efficiently with React Query

React Query is an amazing data fetching library but is optional because you can go ahead and create your frontend however you'd like. For example, you could create an HTML form and send a request to the search endpoint using the Fetch API.

However, I put React Query in the title of this article so I am obligated to share how I implemented a more efficient fetching strategy for Resrc. Let's jump into it.

🔎 The Search component

The component should provide a standard form with state management:

import React, { useState } from 'react';

export default function Search() {
  const [query, setQuery] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    window.location.href = `/search?query=${query}`;
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        placeholder="Search..."
        aria-label="Search query"
        onChange={(event) => setQuery(event.target.value)}
        value={query}
        required
      />

      <button type="submit">Submit</button>
    </form>
  );
}

For Resrc, I have the search form displayed in the header. This is why I made the decision to navigate to a /search route whenever the form is submitted. This...

Allows sharing the search results page URL.
Simplifies data fetching to be on page load.

Also note that in a single page app you should use a client side route navigation instead. Gatsby provides a navigate helper and Next.js provides a useRouter hook.

⚓️ The useSearch hook

Okay, now let's fetch some data! Create a search page and component in your site:

import React, { useState, useEffect } from 'react';
import { useQuery } from 'react-query';

const SEARCH_API_ENDPOINT = '/.netlify/functions/search';

const fetchSearch = async (key, query) => {
  if (!query) {
    throw new Error('Search query is required.');
  }

  return fetch(
    `${SEARCH_API_ENDPOINT}?query=${encodeURIComponent(query)}`
  ).then(async (response) => {
    const data = await response.json();

    if (response.status !== 200) {
      const error = new Error(data.error || 'Unknown error');
      error.statusCode = response.status;
      throw error;
    }

    return data;
  });
};

function useSearch(query) {
  return useQuery(['search', query], fetchSearch);
}

function SearchResultsPage() {
  const [query, setQuery] = useState(null);
  const { isLoading, isSuccess, isError, data, error } = useSearch(query);

  useEffect(() => {
    const query = new URLSearchParams(window.location.search).get('query');
    if (query) setQuery(query);
  }, []);

  if (isLoading) return 'Loading...';

  if (isError && error.statusCode === 404) return 'No results';

  if (isError) return error.message;

  if (isSuccess) {
    return (
      <ul>
        {data.results.map((result) => (
          <li key={result.id}>{JSON.stringify(result)}</li>
        ))}
      </ul>
    );
  }

  return null;
}

Note how we abstracted the data fetching into a custom hook called useSearch.

With that, the search functionality is now finished:

Type test into the search form and press Enter.
Page is navigated to /search?query=test
React Query fetches results from /.netlify/functions/search?query=test
Results are rendered depending on loading, success, or error status.

Note that I didn't provide any design here so it's up to you to decide how best to display the data. However, you can quickly spruce up the experience by implement a ready made design component system such as Chakra UI. I use it for Resrc.

🎁 Wrapping up

Let's quickly recap the different layers of our realtime search stack:

Airtable provides a full text search API to query the data we have stored.
Netlify Functions proxies our API requests to Airtable and hides the API key.
React Query fetches search results with some added features such as caching.

If you get stuck, feel free to reference the source code of Resrc on GitHub. You are also always free to send me an email or or a tweet with questions or feedback.

A longawaited fix to a legacy project | Devlog #1

Sunny Singh — Sun, 23 Aug 2020 20:19:21 +0000

👨🏼‍💻 📹 In this devlog, you will follow along with me as I work on a project that I haven't updated in 3 long years.

Devnews is a developer news aggregation website that I created 4 years ago and still use to this day. However, it broke about a year ago due to an issue with the GitHub trending repositories page crawler. I initially created the project using React, Material UI, localForage, WrapAPI, and Webpack. The static website host used for deployment is Surge.

Will I be able to fix the issue? Does the project even still run on my machine or able to be deployed? Watch to find out.

Full episode is also available to watch on YouTube

Templating repetitive code with Hygen

Sunny Singh — Wed, 19 Feb 2020 13:33:23 +0000

Adding a new feature to a project typically relies on a repetitive set of steps; create new folders with layouts, components, boilerplates, etc. from existing configurations. Most developers will typically handle these repetitions by copying a previous feature and modifying it to the needs of the new one.

The process of sifting through features to figure out which one is ideal to copy, and then making sure to change all names that reference that exisiting feature and modifying multiple configuration files becomes tedious and inefficient.

Tools exist to help with this process known as scaffolding. You create a generic template that can then be reused to create new features from. Integrating them is usually not trivial, and so even though there's a long-term productivity benefit most developers choose to keep moving along with the copy-and-paste approach.

👊 A new challenger approaches!

I recently started researching different scaffolding tools, and was well aware of the popular Yeoman one but wanted to find something newer that focused on simplicity of integration. My priority was to immediately get going with a few templates.

This is when I came across Hygen. It met my goal of simplicity:

npx hygen init self
npx hygen generator new feature
npx hygen feature new MyFeature

With a few commands, we can create a generator for new features. It creates a _templates folder in the project, and the npx hygen command generates files based on those templates.

🗺 Co-location

I'm a fan of the design decisions made for Hygen. One of them is the co-location of templates and metadata:

Templates are located within your project.
Metadata for the template (e.g. where the file will be outputted) is located within the template using frontmatter.

This means that you don't have to create separate repos, config files, or fancy CLI tools. Just make a folder and run Hygen.

🚀 A quick start

Let's create a React component generator. This will require Node.js to be installed.

First, install Hygen as a development dependency of your project:

npm install hygen --save-dev

It would be weird if we didn't use Hygen to generate the templates, so we can do that now:

npx hygen init self # only run this once
npx hygen generator new component

Cool, this generates a file to _templates/component/new/hello.ejs.t. Edit this file to be the following:

---
to: src/components/<%= name %>.js
---
import React from 'react'

export function <%= name %>({ children }) {
  return (
    <div>{children}</div>
  );
}

Now let's run our new generator:

npx hygen component new ProfileBox

✨ A new component was generated! Check out src/components/ProfileBox.js:

import React from "react";

export function ProfileBox({ children }) {
  return <div>{children}</div>;
}

While a very basic example, you can see how within a few minutes you could save yourself time in the long-term for repetitive code within your project.

I was speculative on whether Hygen could handle more complex use cases, but I was able to generate multiple files for an API client by reading from an OpenAPI JSON specification file. This is all thanks to Hygen's ability to run its own helpers alongside your custom ones that can be written using Node.js. It also has support for shell commands, file injection, interactive prompts, and self documentation.

The one limitation that I found was lack of asynchronous helper support, so that may limit some really advanced use cases. However at that point, you're better off creating a custom Node.js script and then passing that data off to Hygen.

🤖 What will you automate?

There are so many repetitive tasks in modifying codebases that can be automated with Hygen, so I would love to hear some ideas on how you might use it. I mentioned the API client generator, but I also added commands to a documentation site to generate new tutorials and pages easily. I would start off with some simpler templates, and create more as they become a part of your development workflow.

Got paid $0 for a 3 months client project

Sunny Singh — Sun, 26 Jan 2020 00:27:44 +0000

I share a story of how I did not get paid for doing a 3 months long project for a client.

Has anyone else here had freelance foes like this? My goal is to prevent others from making the same mistakes that I did because I have heard similar stories from my friends.

This is from Sunny Commutes podcast episode 75.

Simplify JavaScript Promises

Sunny Singh — Fri, 27 Dec 2019 15:58:52 +0000

I love promises. Not from people, but from JavaScript.
Tweet Quote

I love promises. Not from people, but from JavaScript. Promises make your code concise and simple, resulting in easier to understand codebases.

You may also be familiar with the async/await syntax, but unfortunately it causes some headaches. I'll walk through some techniques that solve common scenarios.

Combining `async/await` with `Promise.then`

The first problem that I encountered is the verbosity of using fetch:

const response = await fetch('/api');
const data = response.json();

If you're relying solely on just using await, then you will end up using multiple variables and lines for very simple use cases.

Instead, we can take advantage of the "traditional" Promise.then syntax:

const data = await fetch('/api').then(res => res.json());

A one-liner that is still readable and functions the same way.

Combining `async/await` with `Promise.catch`

The second problem that I encountered is the scope created with try { } blocks:

try {
  const data = await fetchData();
} catch (error) {
  console.error(error);
}

// Oh no, `data` is undefined 😱
console.log(data);

Hmm... we can't read data outside of the try { } block. If you're new to the const variable I suggest you read my demystifying const variables article, but essentially this variable is scoped to only be used inside of its curly braces { }.

One thing we could do is to lift the variable up:

let data;

try {
  data = await fetchData();
} catch (error) {
  console.error(error);
}

// Now we can use `data` 😎
console.log(data);

But... we are no longer within the safe bounds of using const variables. Anywhere later on in the code, data could get reassigned and we'd be spending hours debugging. Is there a way to get the same result while still using const?

Why yes, there is:

const data = await fetchData()
  .catch(error => {
    console.error(error);
    return null;
  });

// We can still use `data` 👍
console.log(data);

We're again taking advantage of two syntaxes for a Promise: async/await and Promise.catch. If fetchData resolves successfully, then that value is set to the data variable as usual. Otherwise, the data variable gets set to null which is what gets returned inside of .catch().

Refactor wisely

When a new language feature comes out, developers rush to make their codebase follow that new syntax. As you saw in this article, this is not always wise. Combining older syntax with the new can be a powerful way to keep your codebase simple and easy to understand for anyone new to it.

Traditional vs modern web development ⚔️

Sunny Singh — Tue, 02 Jul 2019 11:48:37 +0000

Modern web development. We all have a love and hate relationship with it because while it revolutionized web development practices, it also greatly complicated them.

I'd like to go over a few aspects of modern web development and explain the benefits that I've been able to appreciate. I will also mention when you would still want to do things the traditional way.

📦 Managing packages

The old way: Manually downloading package files into a vendor folder or linking a CDN.

The modern way: Using package managers like npm or Yarn.

Benefits: Being able to manage all of your packages with install, update, and remove commands not only saves time, but also keeps track of things like outdated or unsecure packages. The one downside is the large number of files those packages end up depending on and so you may still consider it better to link a package from a CDN for very simple sites.

🎮 Building user interfaces

The old way: Manually manipulating the DOM using jQuery.

The modern way: Rendering entire UIs with JavaScript using React or Vue.js.

Benefits: Breaking out your UI into components and state can be a huge productivity boost plus it also helps to reduce bugs. I talked a lot about this in my Declarative all the things! article. There is also a huge benefit in a static architecture like JAMStack for simplified deployment. Keep in mind that while large apps become easier to maintain, manual DOM manipulation is still great for building out something on the spot with zero external dependencies.

🎁 Bundling code

The old way: Concatenation and minification tools to manually declare how files get merged together.

The modern way: Using import statements and a bundler like Parcel.

Benefits: While this was a huge pain point initially, bundling tools have gotten much easier to work with now. You can start writing JS and CSS using the latest features including import statements, and the code will automatically get transformed and bundled. This is important not only for cross-browser compatibility but also performance, so even in situations where you can depend on users having the latest browsers you probably still want to use a bundler.

Extras: CLI tools for frameworks abstract away bundling for you, so that you don't have to worry about it. See Create React App, Next.js, Vue CLI, and Nuxt.js.

What about the number of choices? 🤯

It's true, web development is considered complex nowadays due to the sheer number of decisions we have to make. This becomes especially overwhelming for anyone new that is trying to learn everything.

However, one skill that I believe every developer should possess is deciding what is worth learning and using. Don't immediately install that new framework you read about in a Medium article unless it solves a particular problem for you that another, more community-supported one isn't already solving.

I hope to provide more resources for helping you become smarter about those decisions. If you're still wondering which JavaScript framework to use, check out my Why is everyone using React? podcast episode.

This article was originally published to my newsletter.

Declarative all the things!

Sunny Singh — Fri, 14 Jun 2019 12:35:31 +0000

I'm basically the hype person from that "all the things!" meme when it comes to declarative programming, but that recently got me thinking in how common the declarative/imperative terminology actually is among both junior and senior level developers.

Luckily, I got a few good albeit mixed responses to this question on Twitter.

We learned both styles first year of University.

— @JamesIvings

Quite senior in my case

— @cullophid

Coming from a non-computer science background, I started coming across these terms relatively recently in my web development career (15+ years).

Also, I’ve worked with a lot of folks with computer science backgrounds, and I can’t recall a single time we used imperative and declarative terminology for anything.

— @LashaKrikheli

For the most part, it depends on whether you self learned programming, in which case these terms may not be so common. However, Lasha points out that it's not even common among those who have computer science degrees.

Personally, this is terminology that I started using a ton once I learned about it, but it's definitely a form of jargon even to those within the industry. I initially came across the word "declarative" on React's website which they still use today:

Declarative views make your code more predictable and easier to debug.
— reactjs.org

If it's complex jargon though, should we stop using it?

But wait, what is declarative anyway?

To write in a declarative style, your code should explain what you want to happen.

Let's use React as an example. I want a button to change text when it's clicked, so I'd write:

<button onClick={() => setClicked(true)}>
  {isClicked ? 'Clicked!' : 'Click'}
</button>

Even if you're not familiar with React, the code is easy to follow due to its declarative nature.

You could do the same in an imperative style, but then your code would explain how you'd want it to happen.

This means that you'd use the DOM to select elements and update manually. Something like this:

document.querySelector('#myButton').addEventListener('click', event => {
  event.target.innerHTML = 'Clicked!';
});

Compared to the declarative example, the imperative one is doing a lot of manual work in selecting elements and updating them.

Let's see another example with something a bit more familiar: loops.

const letters = ['a', 'b', 'c'];
const filtered = [];

for (let index = 0; index < letters.length; index++) {
  const letter = letters[index];
  if (letter !== 'c') {
    filtered.push(letter);
  }
}

console.log(filtered); // a, b

I looped through the letters array and created a new filtered array without the letter "c". Do you see something wrong with this? It's actually an imperative style, which is something that you want to avoid especially with the amount of code for a simple task.

Let's see a declarative example:

const letters = ['a', 'b', 'c'];

const filtered = letters.filter(letter => letter !== 'c');

console.log(filtered); // a, b

Woah, what happened? Declarative happened. Manually looping over an array just to filter a value out is too much of how. Instead, you want to describe what you want, which is exactly what the Array.filter method allows you to do.

Hopefully at this point, you understand not only the differences between declarative and imperative styles, but also the benefits that declarative code can provide.

Talk declarative to me

Jargon, despite its negative connotations, is a quite useful communication tool. When I'm reviewing someone else's code, it's much easier to suggest they make it more declarative than to provide specific explanations and examples. It essentially can save a lot of time in discussing code when everyone are familiar with the imperative and declarative patterns and terminology.

The unfortunate realization that I've had is that these terms are not quite popular, making it confusing jargon rather than useful jargon.

The solution? I would say more usage of these terms to introduce it into common programming vocabulary, as well as articles and tutorials on how code can be written in both imperative and declarative ways.

This article was originally published to my newsletter.

Demystifying "const" variables in JavaScript

Sunny Singh — Sun, 09 Jun 2019 14:56:40 +0000

By now, ES6 (ES2015) is widespread enough that many developers are writing their JavaScript with this modern syntax. However, I commonly see room for improvement with variable declarations. Specifically, when I see a let to declare an object that is updated, but never reassigned a new value.

Here is the offending example:

let cache = {};

cache.id = 'hello';

// We never reassign cache to a different value.
// It's a reference to the same object.

Yes, that can actually be a const because the cache variable is never reassigned.

Immutability vs Reassignment

Many refer to const declarations as creating "immutable" variables. Immutable meaning that the value (including properties of objects) can never be updated.

If that is the case, then let's try our initial example using a const:

const cache = {};

cache.id = 'hello';

console.log(cache.id); // will output "hello"

If cache is now an immutable, non-changeable constant, then attempting to add an id property to it will not work or even throw an error.

However, if you try running that example, it will work perfectly fine. The string "hello" will be logged, which is retrieved from the updated object.

Okay, so if const does not declare something as immutable, what does it do? Well, a const prevents a variable from being reassigned a new value.

Here are a few examples of reassigning variables:

let cache = {};

cache = { id: 'hello' }; // reassigning variable to a new object

let isSuccess = false;

isSuccess = true; // reassigning variable to false boolean

Changing any of the above let statements to const instead will throw a type error: "Uncaught TypeError: Assignment to constant variable."

Setting a property on an object, or updating an existing property, is not reassignment. The value of the variable is still the same object, and you are updating the properties of that object.

Benefit of using `const`

Hopefully you understand how const and let differ now, but that probably still begs one major question: why should I care enough to use const?

It mainly comes down to the quality of your code, and how much information you or another developer can infer from it. For example, as I'm looking through one file in a codebase, I see this:

let isSuccess = true;

Okay, so it's a variable that declares whether some operation succeeded or not, in this case it has since the value is true. However, the let also tells me that this variable can be reassigned to false anywhere later on in that file.

To double check, I search for all instances of isSuccess in the file. Hmm, it's not reassigned anywhere, so I know that this variable's value will remain true.

Sounds like a constant to me, and if this variable was actually declared as a const then I wouldn't have to search anywhere else in the file for it.

Now imagine you revisit this code a few months later. Way down in the file, you add this:

isSuccess = false;

Uh oh, you potentially caused a bug just now because when you initially wrote this code for isSuccess to be true, you weren't expecting anyone to change it later on. Even your future self.

This is an extremely common scenario, especially in large codebases with multiple developers. The great part is that this is easily solved by using const and let appropriately.

Default to `const`, but use `let` when necessary

As a common rule, I suggest using const to declare all new variables, and when you come across a point where you need to reassign one of those variables, then change it to a let.

Here's a much bigger example of how you might use both properly:

const cache = {};
let user = {};
let isSuccess = false;

// The `cache` variable is never reassigned a new value.
cache.greeting = `Hello`;

// The `user` variable is not reassigned a new value right now.
user.id = 1;

// Here, we assign `user` and `isSuccess` new values.
user = {};
isSuccess = true;

It's definitely a paradigm shift to declare variables with const instead of var and let, but it can add more confidence to your code. Try it out and let me know what you think.

Want to learn how to improve your code even further? You might like my Writing code for your future self article.

Writing code for your future self

Sunny Singh ・ Feb 2 '19 ・ 4 min read

#programming #tips #learning #javascript

My favorite design resources

Sunny Singh — Mon, 27 May 2019 12:41:22 +0000

This article was originally published to my newsletter.

While I don't consider myself a designer, I see design as an extremely important skill to have whether you're building an app, creating brand assets, producing content, or even making flyers to support a local event. Here are some of my favorites resources related to design.

🖼 Creating & editing images

When it comes to creating images from scratch or doing touch-ups to an existing one, I recommend Figma and Pixelmator.

In the past I've used Gravit Designer which is still a great alternative to vector design apps like Adobe Illustrator and Sketch. Figma has been slowly gaining popularity and because it is web based, it makes it almost trivial to start creating logos and prototyping user interfaces. Pixelmator is unfortunately a Mac-only desktop app, but I like it as a much cheaper alternative to Photoshop.

I designed my personal logo (shown above) myself using Gravit, and I recently tweeted a new podcast artwork that I'm working on with Figma.

Bonus tools:

Pablo: I use Pablo to quickly create images for social media, such as whenever I share one of my new articles.
remove.bg: This is a mind-blowing tool for removing backgrounds from photos.
Duotone: If you want to quickly create a captivating background, Duotone let's you upload a photo and add different effects to it.
Squoosh: I highly suggest you use an image compressing tool like Squoosh to keep your image sizes small, especially when embedded on websites.

👤 Icons and illustrations

One thing that I definitely lack in is being able to design icons or draw illustrations. Thankfully there are tons of resources from other designers who provide these types of assets to you for free.

Feather icons: A clean and simple icon set that I use for just about everything. You can easily include it into React apps using the React Feather package or just download the raw SVG icons.
React Kawaii: If you need a quick package of reusable components to add some cuteness to your apps, this is it. I have this implemented in a few places on my site such as my 404 page.
OpenMoji: Like emojis? Instead of resorting to the native Apple ones, I recommend you use this unified set that also provides a search and open source license.
unDraw: A massive list of pre-made illustrations for different use cases.
humaaans: Another great package of assets for mixing-and-matching with different scenes and characters.

🔼 Leveling up your design game

As I mentioned before, I don't see myself as a designer, but I still really enjoy pleasant and intuitive designs. Being passionate about something allows you to take inspiration from the world around you, such as from Apple's minimal design patterns.

What's great about minimal design is that it's not that hard to learn. Remove less important elements from a user interface, add whitespace, use a consistent and small color palette, and chances are you're not that far off from a clean interface.

I redesigned my personal website at the end of last year, and wrote about my design decisions. What's mentioned in that article is the amazing Refactoring UI resource which I learned a lot from in keeping my design simple and readable. I also highly recommend these UX tips from Steve Schoger.

It takes time to learn how to improve the UX (user experience) of a website or app that you're building. It also takes time to learn how to properly brand and grow a personal brand. The important thing is wanting to improve and hopefully some of the resources that I shared here can help you some way.

Investing in the right technologies to avoid technical debt

Sunny Singh — Tue, 16 Apr 2019 11:59:49 +0000

This article was originally published to my newsletter.

There is a common joke in the JavaScript community that a new framework or library gets released every single day. True or not, it's funny because it definitely seems like that is the case. With so many new things to learn, how can you possibly keep up? Or should you?

Learn patience, not a new framework ⏳

I love keeping up with the latest technologies. In fact, I built a site called DevNews a few years ago in which I still use today for finding new tech and software related articles and products.

However, there is a big difference between reading up about a new framework versus actually investing time to learning and potentially even migrating your current code over to it. A lot of the time, it's not worth it because that framework becomes obsolete or even non-existent in a few years.

I've been bitten by this problem many times in the past, and the best advice that I can give is to simply be patient.

For any big projects that you expect to stay around for at least 5 years, you probably want to observe a framework's community long enough before making the decision to learn and use it. Consider the time that you put in to learning a specific framework or tool to be an investment. That return on investment should be a positive one.

The story of AngularJS and React ⚔️

Do you remember AngularJS? Many developers were using it around 5 years ago, and it was deemed the go-to framework for making a dynamic website or entire web app. It was even backed by Google, so what could go wrong?

Angular 2 was announced and it was completely different from the first version. In fact, backwards compatibility was not an available option early on. Thus the usage of React, a competing option from Facebook, grew.

I personally worked on an AngularJS project, but I never invested into it deeply. I was skeptical and continued to build my own projects the traditional way (a monolithic Laravel backend with a jQuery and Bootstrap frontend). Fast forward and I am now building multiple React apps.

I believe that this is the correct approach. Use the tools and technologies that work well for you until you know for sure that there is a better way.

Cool cool... but how do I know when there is a better way?

— Avid DEV reader

Ah, I'm glad you asked. I did an entire podcast episode about this topic! While I talk about React specifically, the principles (community, efficiency, and longevity) apply to any framework or tool. Recommend you check it out 👇

🎧 Listen to the podcast
📺 Watch the video

In general, a large community size means more resources available to you for debugging issues and finding accompanying libraries. Even in the case of Angular, there are still tons of resources out there to continue maintaining those projects.

Question: How do you manage to stay on top of technical debt, or how have you been bitten by it in the past?

DEV Community: Sunny Singh

VS Code Quick Tip: JavaScript Import Autocomplete

💡 Solution: Fake reverse the import statement

Quick tip: Manage Node versions for your projects

💡 Solution: the .nvmrc file

🏎 Honorable mention: the engines field

How I added realtime search to my static site

📊 Storing and querying data with Airtable

🔑 Securing the API key with Netlify Functions

⚛️ Fetching data efficiently with React Query

🔎 The Search component

⚓️ The useSearch hook

🎁 Wrapping up

A longawaited fix to a legacy project | Devlog #1

Templating repetitive code with Hygen

👊 A new challenger approaches!

🗺 Co-location

🚀 A quick start

🤖 What will you automate?

Got paid $0 for a 3 months client project

Simplify JavaScript Promises

Combining async/await with Promise.then

Combining async/await with Promise.catch

Refactor wisely

Traditional vs modern web development ⚔️

📦 Managing packages

🎮 Building user interfaces

🎁 Bundling code

What about the number of choices? 🤯

Declarative all the things!

But wait, what is declarative anyway?

Talk declarative to me

Demystifying "const" variables in JavaScript

Immutability vs Reassignment

Benefit of using const

Default to const, but use let when necessary

Writing code for your future self

Sunny Singh ・ Feb 2 '19 ・ 4 min read

My favorite design resources

🖼 Creating & editing images

👤 Icons and illustrations

🔼 Leveling up your design game

Investing in the right technologies to avoid technical debt

Learn patience, not a new framework ⏳

The story of AngularJS and React ⚔️

💡 Solution: the `.nvmrc` file

🏎 Honorable mention: the `engines` field

Combining `async/await` with `Promise.then`

Combining `async/await` with `Promise.catch`

Benefit of using `const`

Default to `const`, but use `let` when necessary