Forem: Kristian Freeman

Three ES6 JavaScript tricks you should know

Kristian Freeman — Tue, 02 Mar 2021 15:00:00 +0000

I've been watching a lot of "beginner programmer" videos on YouTube recently, trying to get back in the headspace of what it was like when I first learning code. One thing I realized while watching myself code is that I use a ton of ES6 trickery when writing JavaScript. ES6 is a term that JS programmers use to refer to the newer versions of JavaScript, which have a lot of syntax and usability improvements built into them.

Many of the ES6 things that made their way into the language back in 2016 are common place now: if you've read JavaScript tutorials online, you probably know about const and let for variable definitions, or you've seen "arrow functions" for defining JavaScript functions with easier-to-grok scoping rules.

There's a ton of great things in ES6 that make writing JavaScript so much easier: so much so that I forget sometimes I didn't ever write JS like this. Let's dive into it!

Destructuring objects and arrays

Destructuring is my favorite ES6 JavaScript trick. When you work with APIs and complex data structures, whether objects or arrays, destructuring allows you to rapidly dive through them, defining new variables and renaming them as need be, without needing to write syntax like data.response.user.name.first.

The destructuring syntax uses curly braces to assign variables on the left-hand side of your JavaScript expression. In the below example, I set up the variable data, setting the keys name, age, and location. In the second line, I use destructuring to assign three variables: name set to the key name inside of data, age set to the key age, and city, which I set to the key location.

ES6 Object Destructuring

That third variable is a neat trick: if I don't want to re-use the key name as my variable outside of the object, I can give it a new variable name, and then say which key it should use to assign the variable. For instance, in the above example, I wrote location: city, saying "set the variable location to the value of the key city, inside of data".

You can also use destructuring to get nested data. Given the below example, you can dive into a key inside of an object, and assign variables from the keys inside of that subsection of the object. In the below example, I'll look inside of the name key in data, which has an object as a value, and get the first and last keys from inside of it:

Destructuring nested fields

Arrays can also be destructured. This is particularly useful if you have a known order or structure to your arrays, allowing you to use the straight bracket array syntax to assign variables from inside the array. In the below example, I set up the array people, and then assign the variables me and you, with me corresponding to the first entry in the array, and you to the second:

Notably, this syntax can be incredibly useful for returning things as well. Given a function that requests data from the web, you may only want to return a certain number of fields. In the below example, I destructure a number of values from an API response, and then return them using a simple shorthand, where I skip setting a key/value pair if the key and the value are the same name. For instance, { error } instead of { error: error }, and { data } instead of { data: data }, as seen below:

Syntax shortcut for returning from functions

Iterators

Iterators allow you to loop through sets of data in JavaScript more effectively. Given a list of names in a names array, you would traditionally loop through them and act on each item as you would in many languages: by setting a temporary variable, often called i or something similar, and incrementing it as you loop through the array, stopping once you've reached the end:

This style of iteration works, but in newer versions of ES6, we can optimize it in a few ways. The for..in syntax allows you to skip incrementing a temporary variable and checking for the end of an array: just set a temporary variable and loop through the array, calling your temporary variable—JavaScript will stop executing the loop at the end of your array for you:

This is better, but the savvy readers among you might note that it still uses the index of each item in the array for looking up the actual value. For instance, when the loop runs for the first time, nameIndex will begin at 0, and if I were to console.log(nameIndex), I might expect to get Fox Mulder back—instead, I'll just get 0.

The for..of syntax fixes this. Instead of referring to the index, for..of skips it in favor of referencing the values directly. This means that we can simply loop through and console.log a value name, instead of nameIndex:

Spreads

Another syntax-heavy trick, spreads allow you to reference parts of an array or collection within a single variable.

To see this in action, we can look back at our previous example, an array of people. Given the addition of a third person, with the name "Someone else", we can use the ... spread operator to destructure and capture everything besides the first value in the array. In the below example, we use it to set the variable me, and then otherPeople, an array of everything else in the array:

You can also use the spread operator in functions. This is a really effective way to handle functions with an arbitrary number of arguments. In the below example, I'll use the spread operator to capture every argument into a sumNumbers function, and loop through them to build a summed value:

What are some of your favorite ES6 tricks? This isn't an exhaustive look by any means at the incredible improvements that ES6 made to JavaScript—for that, you should check out ES6 Features, a great website with usage examples for basically every feature ES6 added to the language.

Kristian

@signalnerve

What's your favorite ES6 trick? Mine is destructuring data outside of objects 🧠

More on this in tomorrow's bytesized.xyz newsletter 👀

16:34 PM - 01 Mar 2021

RT/like my ES6 Thread on Twitter ♥

2021's best developer tool is your browser's address bar

Kristian Freeman — Tue, 23 Feb 2021 15:15:00 +0000

In this blog post and video, I'll be looking at tips for searching better online.

DDG Bangs

DuckDuckGo (DDG) is an alternative to Google, the biggest search engine in the world. DDG's Bangs feature is probably one of my favorite secret weapons in my day-to-day browsing.

Bang searches work using the ! symbol, and a shortcut for what you want to search for. Let's start with a simple (and useful one) for developers: !gh — searching on GitHub.

!gh react.js will take you directly to GitHub's search page for the term "react.js", allowing you to find repos matching the term React.

DDG Bang searches turn your address bar into a launcher. Instead of being a simple search bar or a place to filter through your browser history, Bang searches are like having specific workflows for searching a thousand different websites , constrained by your ability to find the right keyword (though a lot of the time, you can just guess).

Here's some of my favorites:

!gh: GitHub
!yt: YouTube
!wiki: Wikipedia
!stackoverflow: StackOverflow
\test → I'm feeling lucky search for DDG

Search operators

Search operators, whether in Google, DuckDuckGo, or any search engine, have long been touted as "advanced" searching. You've probably seen some of these before, but some of the basics are worth exploring again, so you can refine your searches as much as possible.

Search engines work by looking at what you're searching for, and trying to find matching terms in the content that it knows about. When I search for the term "javascript packages", search engines are trying to find content that it knows about the term "javascript packages", but also "javascript" and "packages" separately.

Exact match

The exact-match operator, which you can use by wrapping your search term in double quotes, searches just for the exact text that you're looking for.

A great example of this is searching for error messages. Recently, my Ghost blog went down, and I saw the following error message in my logs:

MESSAGE: Worker initialization failure: EMFILE

Searching that term in Google returns 6.5k results. Searching the same term, wrapped in double quotes, as an exact-match search, returns just three results, all specifically related to the issue I ran into on my own blog:

"MESSAGE: Worker initialization failure: EMFILE"

Search by site

Using my above example, I first did a general search for an error message, before ultimately using the exact-match search to narrow my searches down to just three results.

These three results look almost identical: one is from GitHub, and two are from gitMemory, which seems to be a mirror for GitHub.

This sort of duplication is really common in searches, especially when there's a strong incentive to generate a lot of content on your site for SEO (search engine optimization) purposes.

The site: operator allows you to narrow your search results to a specific website. In the above case, let's say I just want to search for results from GitHub. Updating my search term to only search github.com will remove the two gitMemory results from my search:

site:github.com "MESSAGE: Worker initialization failure: EMFILE"

Inclusion, exclusion, combination

There's a few other search tricks you should know about that I'll run through quickly.

The AND operator allows you to search for multiple terms together. For instance, python AND javascript.

The OR operator allows you to search for either one term, another term, or both. For instance, javascript OR typescript.

The parentheses operator allows you to group a certain part of your query into a separate section. This is useful when using the AND/OR operators above: if I'm searching for new form packages to use in my project, I could search (javascript OR typescript) form packages, I could then see results for form packages in JavaScript or TypeScript.

The -exclude operator allows you to remove certain terms from your search. For instance, if I'm researching how best to do form validation in JavaScript, I may want to remove results from older websites in favor of more up-to-date results.

Searching form validation javascript returns the usual sites you'll always see in these searches — w3schools, tutorialspoint, and more — but filtering the search down to form validation javascript -w3schools -tutorialspoint will remove both sites from the search results, and returns things like a FreeCodeCamp article from January 2020, with more modern JavaScript syntax and a better implementation.

Shortcut URLs

The recent explosion of new top-level domains (TLDs) has given rise to one particularly useful shortcut: .new domains. These TLDs have been registered by a number of companies, including many developer tools, that let you jump quickly to new repositories, projects, documents, and more.

Here's a list of some of my favorites:

repo.new creates a new GitHub repository
story.new creates a new Medium story
docs.new / sheets.new / slides.new all create new things in the Google ecosystem — a new Google Doc, Google Sheet, or Google Slides presentation
pen.new creates a new CodePen pen
js.new creates a new JavaScript project in CodeSandbox
canva.new creates a new Canva artboart
link.new creates a new Bit.ly link

Handy sites

GitHub1s

GitHub1s is a recent discovery I made via a great video from the codeSTACKr YouTube channel. It allows you to view any GitHub repository directly in VS Code, in your browser. I’m kinda amazed this works, and it’s super fast, too. Just change any GitHub repo URL in your browser (for instance, signalnerve/lilredirector) to github1s.com, and in just a few seconds, you’ll get a VS Code instance you can use to poke around the codebase.

Just as a caveat, this project doesn’t appear to let you search globally throughout the codebase using the File Finder (Ctrl+p) or using the Search function (Ctrl+f) — instead, it appears to be constrained to whatever file you have open. This doesn’t make it immediately useful for discovering something in a new project, but this may be something that can be fixed in the future.

jsDelivr

jsDelivr is a free CDN for open source code. It has the standard CDN-for-JS and CSS tricks: you can provide version numbers and files directly in the URL, and you can hotlink directly to jsDelivr to include things like jQuery or Tailwind CSS (see our Tailwind CSS guide) in your projects.

jsDelivr’s underrated feature is GitHub integration. A few years ago, there was a great project called RawGit, which allowed you to hotlink directly to GitHub projects or files in your codebase. It effectively made GitHub a free (and easy-to-use) storage service for your projects. As you might imagine, it became expensive to run as it got more popular, and it eventually shut down.

Since jsDelivr is already a CDN, adding support for hotlinking your GitHub files turns out to be a pretty trivial addition. jsDelivr supports linking to GitHub by using the /gh/user/repo@tag/file-path syntax, as seen below:

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

Another great feature of jsDelivr is the directory UI. By simply going to /gh/user/repo/ (omitting the tag and file-path), you can see a complete directory structure for the project, allowing you to click around, and ultimately select a file for inclusion in your project. For an example of this, check out my lilredirector repo inside of jsDelivr — clicking any of the files will give you a versioned and ready-to-use link that you could import into your project.

Everything you need to know to get started with Tailwind CSS, the utility-first CSS framework 🍃

Kristian Freeman — Tue, 02 Feb 2021 15:00:00 +0000

Bytesized is a weekly newsletter covering important ideas for developers. Join 4,000+ developers who get our newsletter in their inbox every week ➝

Tailwind is a utility-first CSS framework. Unlike comprehensive frameworks like Bootstrap or Foundation, which provide solutions for things like cards, forms, and buttons, Tailwind allows you to compose your UI out of smaller classes: for instance, the p-4 class applies a padding of 1rem, and the flex class sets up a basic flexbox layout by setting display: flex.

Tailwind offers a very different approach to writing CSS. That approach is controversial (more on that later), but for the most part, many developers find moving to a utility-first CSS framework makes it easier to own your CSS, instead of working under the constraints of CSS that's given to you.

Let's look at Tailwind from a few angles – first, a few video introductions to Tailwind, templates and starter kits, tools and cheat sheets, and some deep dives into the how and the why of Tailwind.

Video introductions to Tailwind

Get started with Tailwind CSS in 15 Minutes

Chris on Code's 15 minute intro to Tailwind covers why it matters, how it works, and how to build your first few components with it. Check out Chris' Beginner Tailwind course if you dig his teaching style and want to go more in depth with Tailwind, too!

Building interfaces with Tailwind CSS

Adam Wathan, creator of Tailwind CSS, shows off the framework by recreating Netlify using 100% Tailwind classes. It's a really great lesson in breaking down existing designs and building them back up with simple CSS primitives, and the entire series (linked as part of the video) covers rebuilds of drastically different layouts and page styles using just Tailwind. Must-watch!

Templates and starter kits

Tailwind UI

Tailwind UI is a commercial product built by the Tailwind Labs team (comprised of the Tailwind creators and engineering team), showcasing beautiful component and page layouts directly using Tailwind. An interesting development of Tailwind UI is how often it seems to contribute new features or directions back to Tailwind, the open-source framework: if you want to support the development of Tailwind UI, buying the UI library is a great place to start.

Looking for an intro to Tailwind UI itself? This video on our YouTube channel covers Tailwind UI and how to get started with it, by adding it to an existing web app.

Tailwind Components

Tailwind Components is a free, open-source collection of community contributed components for Tailwind. If you have designs or layout ideas that aren't covered in Tailwind UI, or you can't afford Tailwind UI, this could be a great solution for filling in the gaps.

Tailwind Toolbox

Tailwind Toolbox provides a different approach to Tailwind starter kits by giving you full-on templates to get started with the framework. Things like landing pages, admin dashboards, and smaller components like modals, accordions, and responsive tables are all covered, and available for free.

Tools and cheat sheets

Tailwind Play

Tailwind Play is Tailwind's official online playground for the framework. Experiment with layouts and configurations and try out new designs in real-time, using the most up-to-date version of the framework.

Tailwind Cheat Sheet

Jay Elaraj's cheat sheet is a great interactive site for looking at all of the classes and properties exposed by Tailwind, allowing you to search and dive directly into the corresponding docs for anything in the framework.

awesome-tailwindcss

This GitHub repo is a collection of tutorials, starter kits, open-source projects, and basically anything built with or about Tailwind CSS. It's open-source, and you can contribute to it yourself, so if you find a missing resource, make sure to add it!

How and why it works

CSS Utility Classes and "Separation of Concerns"

Adam Wathan's original post on Tailwind CSS, where he first announced the framework, also serves as a great introduction to the why of CSS utility frameworks. In the post, he argues that CSS utility class frameworks offer better consistency, less premature abstractions, and more consistent designs:

My experience is that building things utility-first leads to more consistent looking designs than working component-first, as unintuitive as it might sound at first.

Why Tailwind CSS

Shawn Wang writes on why he changed his mind about Tailwind CSS:

I'm not a Tailwind shill. I'm a Guo Lai Ren - someone who has changed their mind on it recently and am a happy user despite acknowledged tradeoffs. "Crossover people" can often be more persuasive to skeptics than born-and-bred believers. So I hope to contribute my perspective to the discussion, if you are open to it.

Why Tailwind Isn't for Me

For a contrary point of view, check out Jared White's blog post about his experience with Tailwind, and why he thinks it's the wrong direction for CSS on the web:

I've gotten into more than one heated argument on the interwebs lately over Tailwind CSS. I'm not proud of this. I don't like being at odds with anybody. I think the folks building Tailwind are talented and nice people. But at a pure technical level, I simply don't like Tailwind. Whoever it was built for, it was not built for me.

Liked this issue? Check out last month's Bytesized newsletters, in case you missed them:

See you next week!

Bytesized is a weekly newsletter exploring important ideas for developers. Join us on our Discord server 👋

Here's what you need to learn and master Vim, the modal text editor 🤸‍♀️

Kristian Freeman — Wed, 13 Jan 2021 15:22:34 +0000

Bytesized is a weekly newsletter covering important ideas for developers. Join 4,000+ developers who get our newsletter in their inbox every week ➝

Vim (Vi IMproved) was first released in 1991 by Bram Moolenaar. It started as a clone of vi, a Unix text editor initially released in 1976.

Vim (and Vi) are modal text editors: they have contextual "modes" that allow you to interact with the text in your file in different ways. Vim has modes for different situations – insert for when you're writing text, visual for selecting text and manipulating it, normal for navigating through your document, and many more for ancillary situations.

Here's Greg Hurrell on modal text editors:

A modal text editor is a, nowadays rare, text editor that offers multiple interaction modes which are optimized for specific types of action and interaction. The rationale is that each mode is a finely-tuned tool which allows the user to realize their objectives in an efficient and powerful manner. This does require more learning than you might be accustomed to as a user of a non-modal editor, but the reward is hopefully increased efficiency and power.

Last week, we looked at the most popular editor in the world, VSCode.

Our focus was on productivity – most readers of Bytesized probably know of VSCode, and are probably using it.

The same generally can't be said of Vim: only 25% of people surveyed in Stack Overflow's 2019 Developer Survey use Vim, and it has a notoriously hard learning curve.

I've used Vim for almost a decade, and even if I'm not in Vim every day, the concepts of modal editing and keyboard-based navigation have transferred over into everything I do on the computer. Learning Vim is worth doing!

In this edition of the Bytesized newsletter, I'll cover both how to learn Vim, by going through some great tutorials and long-form pieces on how to think about modal editing, as well as some batteries-included configurations and plugins to have a great setup quickly. The Vim ecosystem is incredibly active and there's a ton of great developer experience improvements to be made over Vim's default setup as well, so if you're using Vim, you'll still get a ton out of this newsletter. Let's dig in!

Learn Vim, fast

How to Learn Vim: A Four Week Plan

Peter Jang offers a structured four-week plan to learn the fundamentals of Vim:

Week 1: Complete vimtutor once a day, every day
Week 2: Use Vim with minimal config, no plugins
Week 3: Use Vim with minimal plugins
Week 4: Compose Vim commands with verbs and nouns

VimTricks – weekly tips, tricks, guides, plugins, videos, screencasts, and more – all about Vim

VimTricks is a newsletter covering Vim tricks and plugins. Each week, you get a new Vim command, tip, or hack on how to work inside of Vim more effectively. Even if I'm not using Vim and I'm experimenting with a new editor or tool, I still try to catch up with VimTricks every week – it's a great read!

Learn Vim For the Last Time: A Tutorial and Primer

Daniel Missler's blog has a comprehensive (and up-to-date) reference to Vim, covering both the basics – working with files, changing/deleting text, etc., and more advanced topics, like repeating commands, macros. Of particular note is the section on Vim's editing language – see the video "Mastering the Vim Language" later in the newsletter for more on this.

vim.so: Learn and Master Vim faster with interactive exercises

Kenneth Cassel is building an interactive online Vim course that's available for just $8 at an early-bird discount.

Instant configurations

A huge part of Vim's culture is sharing your configuration. The rise of GitHub has made this super easy: there's a ton of batteries-included Vim configurations that you can install in minutes to completely change (and hopefully enhance) your Vim workflow. Here's some of the more popular ones:

amix / vimrc

The ultimate Vim configuration (vimrc)

The Ultimate vimrc

Over the last 10 years, I have used and tweaked Vim. This configuration is the ultimate vimrc (or at least my version of it).

There are two versions:

The Basic: If you want something small just copy basic.vim into your ~/.vimrc and you will have a good basic setup
The Awesome: Includes a ton of useful plugins, color schemes, and configurations

I would, of course, recommend using the awesome version.

How to install the Awesome version?

Install for your own user only

The awesome version includes a lot of great plugins, configurations and color schemes that make Vim a lot better. To install it simply do following from your terminal:

git clone --depth=1 https://github.com/amix/vimrc.git ~/.vim_runtime
sh ~/.vim_runtime/install_awesome_vimrc.sh

Install for multiple users

To install for multiple users, the repository needs to be cloned to a location accessible for all the intended users.

git clone --depth=1 https://github.com/amix/vimrc.git

…

View on GitHub

SpaceVim / SpaceVim

A community-driven modular vim distribution - The ultimate vim configuration

SpaceVim is a community-driven modular Vim distribution. It manages collections of plugins in layers, which help to collect related packages together to provide IDE-like features.

The last release is v1.6.0, check out following-HEAD page for what happened since last release.

See the followings below for more information:

Quick Start Guide: A simple guide for Beginners.
Documentation: The full documentation about using SpaceVim.
Available Layers: A list of all available layers included in SpaceVim.

Support SpaceVim

This project exists thanks to all the people who contributed We are thankful for any contributions from the community.

The best way to support SpaceVim is to contribute to it either by reporting bugs Helping the community on the Gitter Chat or sending pull requests.

For more information please check our development guidelines.

If you use SpaceVim…

View on GitHub

spf13 / spf13-vim

The ultimate vim distribution

spf13-vim : Steve Francia's Vim Distribution

                __ _ _____              _
     ___ _ __  / _/ |___ /      __   __(_)_ __ ___
    / __| '_ \| |_| | |_ \ _____\ \ / /| | '_ ` _ \
    \__ \ |_) |  _| |___) |_____|\ V / | | | | | | |
    |___/ .__/|_| |_|____/        \_/  |_|_| |_| |_|
        |_|

spf13-vim is a distribution of vim plugins and resources for Vim, Gvim and MacVim.

It is a good starting point for anyone intending to use VIM for development running equally well on Windows, Linux, *nix and Mac.

The distribution is completely customisable using a ~/.vimrc.local, ~/.vimrc.bundles.local, and ~/.vimrc.before.local Vim RC files.

Unlike traditional VIM plugin structure, which similar to UNIX throws all files into common directories, making updating or disabling plugins a real mess, spf13-vim 3 uses the Vundle plugin management system to have a…

View on GitHub

Watch Vim in action

How to Configure Vim like VSCode

Ben Awad covers his configuration to setup Vim like VSCode, including a file explorer, type-ahead suggestions, and more.

THE PERFECT VIM CONFIGURATION

Sebastian Karlsson dives into his .vimrc (the Vim configuration file), how it works, and how to install it for yourself.

Mastering the Vim Language

Chris Toomey covers Vim's editor language – a dense mapping of text objects, nouns, and verbs – that allow you to think about inserting and editing text in a way that many other editors simply can't do.

What is Neovim, and why should you care?

Neovim is an open-source project to modernize Vim and Vim's modal editing for a new generation of programmers. In this video, the MinuteVimTricks YouTube channel covers why Neovim matters for Vim developers, and why it may be worth switching to.

My favorite plugins

Like I said at the beginning of the email, I've been using Vim for almost a decade. Since this newsletter is getting a bit long, I narrowed down my choice picks to just three – the plugins I can't live without when I'm in Vim.

Syntastic

syntastic is a syntax checking plugin for Vim. If you've only worked with VSCode or other IDEs (integrated development environments), you might be surprised to learn that Vim ships without any sort of syntax checking! This plugin hooks into your language's checker tools (e.g. jslint, rustc, or gcc) and renders potential code errors right in your editor.

vim-syntastic / syntastic

Syntax checking hacks for vim


              / \,,_  .'|
           ,{{| /}}}}/_.'            _____________________________________________
          }}}}` '{{'  '.            /                                             \
        {{{{{    _   ;, \          /            Ladies and Gentlemen,              \
     ,}}}}}}    /o`\  ` ;)        |                                                |
    {{{{{{   /           (        |                 this is ...                    |
    }}}}}}   |            \       |                                                |
   {{{{{{{{   \            \      |                                                |
   }}}}}}}}}   '.__      _  |     |    _____             __             __  _      |
   {{{{{{{{       /`._  (_\ /     |   / ___/__  ______  / /_____ ______/ /_(_)____ |
    }}}}}}'      |    //___/   --=:   \__ \/ / / / __ \/ __/ __ `/ ___/ __/ / ___/ |
jgs `{{{{`       |     '--'       |  ___/ / /_/ / / / / /_/ /_/ (__  ) /_/ / /__   |
     }}}`                         | /____/\__, /_/ /_/\__/\__,_/____/\__/_/\___/   |
                                  |      /____/                                    |
                                  |                                               /
                                   \_____________________________________________/

View on GitHub

vim-airline

vim-airline was one of the first plugins I used to make my Vim installation look good. It updates Vim's tabline (the solid bar across the bottom of Vim's UI) with better colors, as well as the ability to customize it with information from other plugins, or from your own custom scripts.

vim-airline / vim-airline

lean & mean status/tabline for vim that's light as air

vim-airline

Lean & mean status/tabline for vim that's light as air.

When the plugin is correctly loaded, there will be a nice statusline at the bottom of each vim window.

That line consists of several sections, each one displaying some piece of information. By default (without configuration) this line will look like this:

+-----------------------------------------------------------------------------+
|~                                                                            |
|~                                                                            |
|~                     VIM - Vi IMproved                                      |
|~                                                                            |
|~                       version 8.2                                          |
|~                    by Bram Moolenaar et al.                                |
|~           Vim is open source and freely distributable                      |
|~                                                                            |
|~           type :h :q<Enter>          to exit                               |
|~           type :help<Enter> or <F1>  for on-line help                      |
|~           type :help version8<Enter> for version info                      |
|~                                                                            |
|~                                                                            |
+-----------------------------------------------------------------------------+
| A | B |                     C                            X | Y | Z |  [...] |
+-----------------------------------------------------------------------------+

The statusline is the colored line at the bottom, which contains the sections (possibly in different colors):

section

…

View on GitHub

ctrlp

ctrlp is a classic fuzzy file finder for Vim, used to quickly look up files in a project. This keyboard-based file finder became extremely popular via the editor TextMate, and this project seeks to bring it to Vim. Just type <CTRL>-p (or whatever you customize it to), write a few characters of the file you're looking for, and press enter. So easy!

kien / ctrlp.vim

Fuzzy file, buffer, mru, tag, etc finder.

#This project is unmaintained You should use this fork instead.

ctrlp.vim

Full path fuzzy file, buffer, mru, tag, ... finder for Vim.

Written in pure Vimscript for MacVim, gVim and Vim 7.0+.
Full support for Vim's regexp as search patterns.
Built-in Most Recently Used (MRU) files monitoring.
Built-in project's root finder.
Open multiple files at once.
Create new files and directories.
Extensible.

Basic Usage

Run :CtrlP or :CtrlP [starting-directory] to invoke CtrlP in find file mode.
Run :CtrlPBuffer or :CtrlPMRU to invoke CtrlP in find buffer or find MRU file mode.
Run :CtrlPMixed to search in Files, Buffers and MRU files at the same time.

Check :help ctrlp-commands and :help ctrlp-extensions for other commands.

Once CtrlP is open:

Press <F5> to purge the cache for the current directory to get new files, remove deleted files and apply new ignore options.
Press <c-f> and <c-b>…

View on GitHub

Liked this issue? Good news—Bytesized's theme this month is editors. We'll be looking at text editors, tools for thought, and how to be more productive this year as we build software. See you next week!

Bytesized is a weekly newsletter exploring important ideas for developers. Join us on our Discord server 👋

14 Great VSCode Resources - Dev Setups, Quickstart Videos, Courses, and Deep Dives

Kristian Freeman — Tue, 05 Jan 2021 19:31:05 +0000

VSCode is the most popular text editor in the world.

That's a remarkable stat on its own, but even more so when you consider how new it is: the first release was in April 2015.

In this issue of Bytesized (a free newsletter covering important ideas for developers), we'll take a look at VSCode from a productivity angle: there's a good chance that VSCode is part of your repertoire, so instead of teaching you what it is, we'll look at how you can get more productive with it.

Bytesized covers important ideas for developers, sent to over 4,000 people every week. Join here!

Setups

My Visual Studio Code Setup

Ali Spittel's collection of her favorite VSCode extensions and themes.

The Ultimate VSCode Setup for Front End/JS/React

Elad Ossadon covers the extensions you need to have to work as a front-end developer in VSCode.

My VS Code Setup

Caleb Porzio's favorite extensions, settings, and special "zen" mode for minimalist developers.

How to set up VSCode to improve your productivity

A collection of useful extensions, with a focus on text editing improvements and reducing repetitive motions and actions with templating extensions.

Quickstart Videos

5 Ways to Customize VS Code

James Quick covers custom themes, fonts, extensions, settings, and keyboard shortcuts in his popular VSCode intro.

VS Code Top-Ten Pro Tips

The uber-popular Fireship YouTube channel takes a look at ten tips for increasing your VSCode productivity and happiness.

Using VSCode with the VIM Extension

Richard Bagshaw covers a great way to use VSCode: Vim keyboard bindings. He walks through how to install a Vim extension, set up your key bindings, and best practices for making the switch to Vim shortcuts in your day-to-day work.

Visual Studio Code Markdown Preview

If you work in GitHub, read Reddit, or write code-adjacent prose in anyway, you probably have some familiarity with Markdown. This video covers the basics of some great Markdown tooling for VSCode, showing how you can lint, spell-check, build templates, and preview your Markdown content directly in VSCode.

Courses

Vim for VSCode

Joe Previte's excellent $10 course has 100+ exercises for learning how to use Vim inside of VSCode.

VSCode Power User

Ahmad Awais's comprehensive (5 hours!) course on getting up and running with VSCode, including specific sections on web development, working with Git and GitHub, Markdown, and Ahmad's favorite extensions. This course is on sale pretty frequently, so keep an eye out 👀

Make VS Code Awesome

Caleb Porzio's course on VSCode isn't focused on exploring every single feature of the editor; instead, it's about zooming in on the important things for developers: extensions, keyboard-based navigation, and a particular focus on building a better development experience for PHP developers.

Digging Deeper

Language Server Extension Guide

VSCode is open-source, but it's also changing the way that other text editors think and work with the underlying code they show to users. The VSCode Language Server is a spec that has allowed developers to build support for languages into VSCode with first-party support, and it's even been the inspiration for new features in older editors like Vim and Emacs. Check out more about how it works!

VSCode Architecture And Overview

Want to know how VSCode works under the hood? C#Corner's overview of the architecture of VSCode covers all the pieces of the open-source codebase and how they fit together. As you might expect, VSCode wouldn't be possible without a ton of incredible underlying open-source tooling: this article teaches you what those things are.

How to Configure VS Code Like a Pro

There's a lot of underlying primitives in VSCode that aren't as well-known, but provide great support for working in a codebase for an extended period of time. Stefan Metodiev's guide to setting up VSCode workspaces, tasks, and snippets is a great way to build a more IDE-like experience for your projects inside of VSCode.

Bytesized is a free weekly newsletter covering important ideas for software developers. Join 4,000+ devs who read our weekly newsletter to stay in-the-know on important trends in software development!

CLOUDFLARE PAGES: First look at Cloudflare's new JAMstack deployment platform

Kristian Freeman — Thu, 17 Dec 2020 17:11:49 +0000

Let's dive into Cloudflare Pages, Cloudflare's new deployment platform for deploying all your JAMstack applications!

Cloudflare Pages: https://pages.cloudflare.com
Announcement blog post: https://blog.cloudflare.com/cloudflare-pages/
Link to request beta access: https://www.cloudflare.com/pages-jamstack-platform-beta-sign-up/
Documentation (guides, tutorials): https://developers.cloudflare.com/pages/
Build an API for your frontend using Cloudflare Workers: https://developers.cloudflare.com/pages/tutorials/build-an-api-with-workers

My new course on starting and growing your newsletter is live

Kristian Freeman — Thu, 01 Oct 2020 14:10:42 +0000

I'm super excited to announce my first course: Newsletter Bootcamp.

Newsletter Bootcamp is a seven-day email course and Ebook that will teach you everything you need to know to start and grow your newsletter. The bootcamp is launching at just $10, so if you're interested, buy now to lock in the best price!

Each day, you'll focus on a theme, complete exercises, and dig deep into how to build a compelling and engaging newsletter that subscribers love.

Here's some of what you'll learn:

How to pick a newsletter idea that resonates with subscribers
How to stay consistent and publish a newsletter every single week
How to write fresh content and keep your newsletter engaging
How to get effective feedback from your subscribers
How to measure your newsletter's success
How to monetize your newsletter

The course bundle includes a go at your own pace email course, a downloadable PDF version of the bootcamp, and an audiobook reading of each lesson (MP3 format).

You can buy Newsletter Bootcamp on Gumroad!

Unsure if Newsletter Bootcamp is for you? Get a nine page PDF sample by joining the newsletter!

How to start a newsletter with Substack

Kristian Freeman — Tue, 18 Aug 2020 21:21:02 +0000

In this video, I'll show you how to start a newsletter in a little under twenty minutes with Substack.

In a recent survey I took of subscribers to the Mailing List Hackers project on Product Hunt, the majority of them said that they don't have a newsletter, but really want to start one.

In this video, I'll show you a simple, free way to start a newsletter using Substack, including creating a new publication, publishing your first post, and sending it to your newsletter subscribers.

For more content like this, consider joining the Mailing List Hackers community below! You'll get access to our chat community, other courses and videos, and an invite to our monthly meetups (and access to our archive of past meetups).

Mailing List Hackers 💌

@mlisthackers

💬 Join our chat community to talk all things newsletters and mailing lists

mailinglisthackers.com/chat

20:59 PM - 10 Aug 2020

0 0

🚀 Made a chat server for mailing list hackers

Kristian Freeman — Mon, 10 Aug 2020 18:59:43 +0000

Hey friends 👋

Mailing List Hackers is a new chat community for people building mailing lists and newsletters. The goal long-term is to build a paid membership community, but for now, joining is free for the first hundred people or so to build a community of like-minded folks and get the conversation going.

Super quick link to get your invite 👉 https://mailinglisthackers.com/chat

Wrote a bit about the process below on the site, so if you're interested in learning more about the project, check it out:

https://www.mailinglisthackers.com/become-a-founding-member-of-mailing-list-hackers-for-free

We have a few channels so far, including software-specific channels (#mailchimp, #convertkit, etc) as well as a fun #show-your-work channel to show off your emails, stats, or whatever else you're building. Really excited to build this stuff out based on user feedback, too!

If you're building a mailing list, or if you're interested in building one but don't know where to start, come hang out in the chat, ask questions, and get feedback on what you're building. See you there!

Open Monetization Wallet supports dev.to's new account payment pointers 💅

Kristian Freeman — Fri, 12 Jun 2020 15:15:10 +0000

In a post published on Wednesday, @ben announced that dev.to now supports account-specific Web Monetization payment pointers – hooray!

You can now web-monetize your DEV posts! (But don't get your hopes up too quickly)

Ben Halpern ・ Jun 10 ・ 1 min read

#webmonetization #gftwhackathon #coil #meta

My Grant For The Web Hackathon project Open Monetization Wallet (OMW) supports account-specific payment pointers on the site with no additional configuration needed! Check out the announcement post below to learn more about the project:

✨ Announcing Open Monetization Wallet - my GFTW Hackathon project

Kristian Freeman ・ May 21 ・ 4 min read

#gftwhackathon #showdev

To get started, simply go to /settings/misc on this site and enter your Open Monetization Wallet URL. With the pre-release version of Open Monetization Wallet, you can enter in your wallet URL and get access to some sweet features, like a durable, unique wallet URL (so you can change your wallet provider between tools like Uphold, Stronghold, and more, without having to change the URL you specify on dev.to), and revenue sharing, if you want to share Web Monetization payments between multiple people or wallets.

A fun update – I've submitted a grant application for Open Monetization Wallet to help support shipping version 1.0 of the project! You can check out the v1.0 milestone I've created on GitHub that has a lot of exciting new features - multiple wallets, UI improvements, and more! Wish me luck as the grant application is reviewed 😅

#onedayprojects: Four projects for web developers to start today (video)

Kristian Freeman — Tue, 26 May 2020 19:07:42 +0000

Four projects that you can get started on today, specifically designed to help you learn crucial skills and concepts in web development! #onedayproject

Resources mentioned:

"How to Become a Really Good Game Developer In Under a Year" - Miziziziz

🐦 Follow Bytesized Code on Twitter https://twitter.com/bytesizedcode

🐦 Follow your host Kristian on Twitter https://twitter.com/signalnerve

💛 BYTESIZED CODE is building a developer community for everyone! We publish weekly programming tutorials and guides, and also produce the unique online conference Byteconf, where developers around the world learn in a live-streamed, 100% free dev conference. Join our community! https://www.bytesized.xyz

✨ Announcing Open Monetization Wallet - my GFTW Hackathon project

Kristian Freeman — Thu, 21 May 2020 15:02:34 +0000

Hey dev.to! 👋 I'm super excited to announce the first release of Open Monetization Wallet (OMW), a tool I built as part of the Grant For The Web Hackathon.

OMW makes it easier to accept payments with the Web Monetization API at scale, including support for:

Custom wallet URLs: own your own "Payment Pointer", e.g. $wallet.signalnerve.com, instead of $pay.stronghold.co/abcdef123
Change between wallets/providers with no downtime
Logs of incoming payment requests
Revenue sharing between multiple wallets, e.g. for multiple team members
Infinitely scalable with serverless technology
Free and open-source

If you want to poke around at the interface, I've set up a demo instance - check it out at omw-demo.signalnerve.workers.dev!

I'm super interested in the Web Monetization standard, and one thing that stuck out to me immediately when reading through the documentation was the opportunity to simplify "Payment Pointers".

If you've signed up for a wallet on Stronghold or other wallet providers, you'll know that the URL is pretty hard to remember, and non-durable: if you make a new wallet URL, or switch providers, you'll need to go and update every time you use the wallet URL across your projects. OMW provides a "vanity URL", meaning that you can deploy it somewhere like $wallet.signalnerve.com. This means that you can swap out your wallet URL with no downtime and avoid the worst-case scenario: your wallet URL silently failing and missing out on the chance to get paid for your work.

OMW also has support for revenue sharing, so you can add a number of users (for instance, multiple members of your team), and incoming payments will be distributed between your team members' wallets. For instance, you can evenly divide payments between a developer and designer (a 50/50 split), or even weigh the revenue share so that one member gets 90% of the payments, and the other gets 10%.

All of this happens behind a single vanity URL, so you can change the revenue sharing and number of users without ever leaving the OMW admin interface!

I chose to use Cloudflare Workers for building the first version of OMW, and I'm really happy with the results. OMW is deployed with serverless technology, so if a thousand people who all have the Coil extension visit your site, the wallet will scale gracefully. Workers KV is used as both a JAMstack deployment platform (hosting the Gatsby admin interface) and as a lightweight database, allowing you to store wallet information and even logs about incoming payments without needing to spin up an external database.

Disclosure: I work as the developer advocate for Cloudflare Workers! Regardless, I still would have picked Workers for this project :)

I made a quick video to show off the basics of OMW, and you can check the source on GitHub (it's 100% open-source and free) to see how it's built.

I'm using OMW on bytesized.xyz, so if you're using Coil or something similar to pay creators, you should see an indicator that your Coil account is streaming payments to my vanity OMW wallet. I already made two cents during my testing of the site - woo-hoo!

My first deposit into my Web Monetization wallet, powered by OMW!

As I mentioned above, OMW is open-source, and I have more things planned for the project over the next few weeks. Check out the issue tracker if you're interested in contributing, and if you want to run it yourself, the README on GitHub has everything you need to get up and running.

Expect the ride between pre-release (< 1.0.0) to be a little bumpy, as I'll be working on making it easier to deploy the project without needing to install dependencies locally, and the way that the project is set up is bound to change slightly.

Thanks to the dev.to team for this awesome hackathon, and I'm looking forward to seeing everyone else's projects. Happy coding!

Update: thanks to everyone who's been checking out this project! Sharing some of my favorite tweets about it below:

Arturo Portilla

@arturo_p_a

The #WebMonetization community is fascinating! Amazing vibe and great ideas brewing everywhere.

@signalnerve just announced the release of Open Monetization Wallet (OMW), an open tool aimed at simplifying and enhancing the management of Web Monetization payments.

Check it out! twitter.com/signalnerve/st…

16:22 PM - 22 May 2020

kristian is logged off @signalnerve
excited to show off open monetization wallet (omw) this morning - a set of tools to help you and your team make money with the web monetization api 💸 built for the @thepracticaldev /@GrantForTheWeb hackathon, using @cloudflaredev workers! blog post 👇 https://t.co/utI3DJEMHr

2 12

alispivak

@alispivak

Another cool @ThePracticalDev @GrantForTheWeb hackathon project- @signalnerve's 's Open Monetization Wallet provides a vanity pointer you can configure for revenue sharing, logging capabilities, a nice-looking interface, and runs on @Cloudflare workers.
dev.to/bytesizedcode/…

14:31 PM - 22 May 2020

1 5

This section fills out the template for a GFTW Hackathon submission – it's copy-pasted from the above blog post

What I built

OMW makes it easier to accept payments with the Web Monetization API at scale, including support for:

Custom wallet URLs: own your own "Payment Pointer", e.g. $wallet.signalnerve.com, instead of $pay.stronghold.co/abcdef123
Change between wallets/providers with no downtime
Logs of incoming payment requests
Revenue sharing between multiple wallets, e.g. for multiple team members
Infinitely scalable with serverless technology
Free and open-source

Submission Category:

Foundational technology

Demo

https://omw-demo.signalnerve.workers.dev/admin/

Link to Code

signalnerve / openmonetizationwallet

👛 Tools for managing a vanity Web Monetization wallet

Open Monetization Wallet

Tools for managing your vanity Web Monetization wallet

Summary

Open Monetization Wallet (OMW) makes it easier to accept payments with the Web Monetization API at scale. Some features:

Custom wallet URLs: own your own "Payment Pointer", e.g. $wallet.signalnerve.com, instead of $pay.stronghold.co/abcdef123
Change between wallets/providers with no downtime
Logs of incoming payment requests
Revenue sharing between multiple wallets, e.g. for multiple team members
Infinitely scalable with serverless technology
Free and open-source

Prerequisites

A Cloudflare Workers unlimited plan to deploy your OMW instance
If deploying in front of a domain, a configured Cloudflare zone (see the "Origin" section of "Configuration" below)
wrangler cli tool installed and configured (see the Quick Start in the docs)
A configured Web Monetization wallet + payment pointer for use in your account, e.g. from Stronghold

Configuration

`wrangler.toml`

Copy wrangler.toml.example to wrangler.toml and begin filling out the file to prepare your OMW instance for deployment.

…

View on GitHub

How I built it

Technology used:

Cloudflare Workers
Workers KV
Gatsby
GitHub Actions
Tailwind UI

Additional Resources/Info

(see repo link and demo video above!)