Smashing Magazine - #317: JavaScript and Front-End Tools

On diving deeper into JavaScript and Jamstack, optimizing for all popular frameworks, and boosting your existing Next.js setup. Issue #317 September 7, 2021 View in the browser 💨

Smashing Newsletter

Howdy Smashing Friends,

What are you most excited about in front-end today? As developers, it seems like every week is a celebration of new techniques and tools and methodologies and strategies. Yet very often with all the ongoing development happening, it’s difficult to keep track of things that could come in handy. In this newsletter issue, we highlight some of the tools that might have slipped through the cracks.

On the Smashing side of things, we’re getting ready for new series on SmashingMag, following a series on everything HTTP/3 by Robin Marx, articles on modern CSS by Stephanie Eckles, and a series on CSS Refactoring written by Adrian Bece. We also have prepared a number of friendly online workshops, including free ones for everyone to join in.

Jamstack Conf 2021
Meet Jamstack Conf 2021, a free online conference for JavaScript developers.

If you’d like to dive deeper into JavaScript and Jamstack, we’d love to invite you to the free online Jamstack conference 2021 — with plenty of sessions and workshops around Jamstack, alongside case studies, experiments and a friendly, inclusive environment for everyone. The conference will also be human live-captioned. We’d love to see you there!

In the meantime, let’s look at some useful little helpers for JavaScript developers: from bootstrapping your dotfiles to shell scripts written in JavaScript, to a slightly better command bar interface and viewing source code on mobile.

— Vitaly (@smashingmag)


1. Bootstrap Your Dotfiles

Customizing your dotfiles can increase productivity significantly when using command-line programs. If you want to take your configuration to a new system, Dotbot is here to help. The tool bootstraps your dotfiles and makes installing them a task of only one short command line.

Dotbot

Dotbot uses YAML or JSON-formatted configuration files to let you specify how to set up your dotfiles. You can use it to link files and folders, create folders, execute shell commands, and clean directories of broken symbolic links. User plugins are also supported in case you want to add custom commands. Designed to be lightweight and self-contained, the tool gets by with no external dependencies. There’s no installation required either. (cm)


2. GitHub-Powered Uptime Monitoring

An open-source solution that monitors your site’s uptime without requiring a server? Upptime offers precisely that. To help you stay on track of your websites’ status, Upptime unites GitHub Actions, Issues, and Pages into a powerful status monitoring trio.

Upptime

With the help of GitHub Actions, you can set time intervals at which you want Upptime to check that your sites are up. Five minutes is the shortest interval. When a specific endpoint goes down, Upptime will automatically open a new issue in your GitHub repo. You can use the issue to add more information about the outage (e.g., whether you are investigating or what caused the outage) and assign team members to it. Last but not least, you get a statically-generated status website that shows users your sites’ live status, incident history, and response time graphs in real-time. (cm)


3. Write Shell Scripts In JavaScript

Do you frequently forget Bash’s syntax? Good news, Google released a little tool that lets you write scripts in good ol’ JavaScript. zx as the package is called, provides useful wrappers around child_process, escapes arguments, and gives sensible defaults so that you don’t have to deal with any of the hassle that the standard Node.js library usually brings along.

A tool for writing better scripts

To get things up and running, you can write your scripts either in a .mjs or .js file, then add #!/usr/bin/env zx to the beginning of your zx scripts, and that’s already it. Functions like $, cd, and fetch are available straight away without any imports. (cm)


4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

As always, here’s an overview of our upcoming workshops:


5. A Command Bar Interface To Speed Things Up

Opening a new GitHub issue, searching Slack messages, showing your calendar schedule and jumping on a Zoom call — the Slapdash command bar makes daily tasks like these a lot quicker. It works similarly to Spotlight on Mac, except it also supports your cloud apps.

Slapdash

To open Slapdash, just type Command + J on Mac or Ctrl + J on Windows and Linux, and start typing. The partial name of the Notion document you want to open, for example, or type in “create” to open a new GitHub issue directly from inside the command bar. You can also build custom commands that you and your team might need to speed up common worflows — for customer lookup, entering something into a database, or searching company records, for example. A fantastic little helper to save you precious time. (cm)


6. View Source Code On Mobile

The keyboard shortcut to view the source code of a page is every developer’s best friend, right? Well, at least on desktop devices. Viewing the source on mobile usually involves quite some fiddling around. If you’ve been looking for a simple solution for when you’re on the go, Adam Newbold’s site View Source is for you.

View Source

To view a page’s source code, just paste the URL into the search bar of View Source, and it’ll fetch and display the source code for you — with syntax highlighting and numbered lines. You can even define if you want to wrap lines or tidy the markup for a better overview. One for the bookmarks. (cm)


7. A GitHub Shortcut That Changes Everything

Sometimes, it’s a small trick that makes all the difference. So, do you want to have your mind blown?

GitHub shortcut

Go to any GitHub repo, and press the . key on your keyboard. A web editor will open up in your browser window to edit the repo. You can edit, search, install (some) extensions and use commit back to the repo. We live in amazing times.


From our sponsor

Modern Web Apps Shipped Faster With Netlify

Netlify
Today’s newsletter is sponsored by Netlify, the best platform for frontend teams to build, run and scale modern web applications. Netlify provides native support for all popular Jamstack frameworks, including Next.js, Gatsby, and Nuxt. Get started for free, and easily manage multiple projects and integrations in one platform as you grow.


8. New On Smashing Job Board


9. Recent Smashing Articles


That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!


This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#316: Front-End Accessibility

Tuesday, August 31, 2021

With tips for automating accessibility testing, assessing third-party components accessibility, as well as useful accessibility extensions for Figma and VSCode. Issue #316 • August 31, 2021 • View in

#315: CSS Refactoring and JavaScript Migration

Tuesday, August 24, 2021

On refactoring CSS, migrating from JavaScript to TypeScript, optimizing for Next.js, and front-end case studies.Issue #315 • August 24, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing

#314: Front-End Games on CSS and JavaScript

Tuesday, August 17, 2021

With front-end games and challenges in CSS and JavaScript to take your coding skills to the next level. Issue #314 • August 17, 2021 • View in the browser 💨 Smashing Newsletter Dobry dzień Smashing

#313: Open-Source Icons, Fonts and Goodies

Tuesday, August 10, 2021

With free icons, gradients, and illustrations to give your project the finishing touch. Issue #313 • August 10, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing Friends, I remember

#312: Next.js Boilerplates and Guides

Tuesday, August 3, 2021

With Next.js boilerplates and tutorials to help you get started or boost your existing Next.js setup. Issue #312 • August 3, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing Friends,

✏ The Developer Experience Case, How To Get Testimonials, Markdownify Editor, and more...

Sunday, September 26, 2021

How to Get Testimonials and Use Them the Right Way [Infographics] QUICKSPROUT.COM COMMENTS 19 Examples of Beautiful Blog Layout Designs QODEINTERACTIVE.COM COMMENTS Markdownify - A Markdown Editor in

Sketching as a strategy

Sunday, September 26, 2021

Issue 59: The value of keeping things sketchy ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

✏ Tailwind CSS Pros & Cons, How to Create a Typography, 20 Neumorphism Examples, and more...

Saturday, September 25, 2021

The Pros and Cons of Tailwind CSS WEBDESIGNERDEPOT.COM COMMENTS How to Design Neumorphism and 20 Neumorphism Examples for Websites EN.NIEMVUILAPTRINH.COM COMMENTS How to Create a Typography for your

Get the Look: The All-Wood Kitchen Is Having a Moment

Friday, September 24, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our weekly roundup of the best designs to source and

✏ Want to be a Great Designer? Psychedelic Design Examples, TheatreJS, and more...

Friday, September 24, 2021

Theatre.js - JavaScript Motion Design Library THEATREJS.COM COMMENTS Infographic Reveals the World's Most Hated Brands CREATIVEBLOQ.COM COMMENTS Psychedelic Design Examples for Inspiration

The Iconic Home Opens This Monday

Friday, September 24, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Hermits, Math Concepts, Probable Futures, Geometric Art, Theatre.js

Friday, September 24, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 24 2021 These tiny MIT-designed robots can transform

You’re Invited: The Iconic Home

Thursday, September 23, 2021

Meet the designers behind our virtual showhouse ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

✏ Actionable Color Palettes, Best JS Frameworks, Transforming CX with Live Chat, and more...

Thursday, September 23, 2021

7 Tips for Transforming CX with Live Chat WEBDESIGNERDEPOT.COM COMMENTS 15+ CSS Particle Backgrounds - Free Code + Demos CSSHINT.COM COMMENTS Actionable Color Palettes - Collection of 30+ Color

Inside Wayfair’s $1.5 Billion Trade Division

Thursday, September 23, 2021

Plus, what to do if your Instagram account gets hacked, stolen, or deleted (image) Architectural Digest AD PRO Logo Image may contain: Human, Person, Face, and People The Iconic Home: 13 Black