Cameron Nokes' Web Development Blog Feed
I wrote about jq in greater depth [here](/blog/working-with-json-in-bash-using-jq/). This is a cheatsheet of commands and function that I've found useful for quick reference. ### Table of contents - Common usages - [Piping from curl](#piping-from-curl) - [From a JSON file](#from-a-json-file) - [In a chain of pipes](#in-a-chain-of-pipes) - Common selectors - [Get a named…
Some times the best way to understand something is to build it on your own, from scratch. Doing this has been one of the best ways for me to deeply learn both JavaScript and common patterns and techniques that can be used to solve a variety of problems. `lodash` is one of the most popular JS libraries, and learning how any of its methods are implemented is good learning. I've read various parts of…
Apple iPhones store images in HEIC format (high efficiency image compression). HEIC has more advanced compression that JPG, which is great, the problem is that most other devices or websites can't use an HEIC file. Want to upload an iPhone photo to a website? You'll probably need to convert it first if you're on a desktop. Sure, there are ways to make it so that iOS stores your photos as JPG but…
[Electron](https://electronjs.org/) is a popular platform to publish desktop apps these days. Many people are familiar with popular applications like VSCode or Slack that are written in Electron, but is there a way I can check on my own to know if an app was built using Electron? Yes. In fact, I created a quick video of the process (macOS only): How to know if a desktop app uses #Electron…
Sed, which stands for stream editor, is probably most commonly used to find and replace strings in bash scripts. Something like this: ```bash sed 's/foo/bar/g' foo.txt ``` It's a powerful tool, but one that's a little confusing. For me, at first glance sed looked about as confusing as regex was before I learned it -- just a bunch of characters and symbols haphazardly mashed together. Sed is…
The Event emitter pattern (maybe better said as the [observer pattern](https://en.wikipedia.org/wiki/Observer_pattern)) is a bedrock in the JavaScript ecosystem. It's a well-known, useful pattern for decoupling concerns in an application. Many codebases I've worked on use a library such as [eventemitter3](https://github.com/primus/eventemitter3) or [mitt](https://github.com/developit/mitt). But…
I learned the other day that [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) can be used to not only abort `fetch`es, but can be used in basically any way you like. Just like promises can be used to represent any future, pending value, `AbortController` can be used as a controller to stop pending async operations. This was exciting to me, which I realize…
> Want the TL:DR? See the [jq cheatsheet](/blog/jq-cheatsheet/) Perhaps you’ve seen or even written bash that looks like this: curl -s 'http://api.icndb.com/jokes/random' \ | python -m json.tool \ | grep '\"joke\"' \ | cut -d ':' -f 2 \ | sed 's/"/\"/g' *(Note: the above code was taken from…
You already have a library/package written in TypeScript that you’re ready to publish to NPM, but you still want all the types to work and you don’t want to commit compiled JS files. This article is for you 😘. > **TLDR;** you can see a simple example of this in action here: > [ccnokes/dom-event-utils](https://github.com/ccnokes/dom-event-utils) If you haven’t written your TS based package yet, no…
Whether it’s just for npm install or some git commands, most everyone deals with [bash](https://en.wikipedia.org/wiki/Bash_(Unix_shell)) sometime. I’ll be honest, bash can have some weird syntax, but I still think it’s a highly useful tool and very efficient way to automate tasks. For example, react, angular, and vue all have shell scripts in their repositories. Plus, bash is available on every…
[fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) is the hot new way to make HTTP requests in the browser. More than just being a better, more ergonomic API than [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest), it brings a lot of exciting new capabilities like response streaming, more control over credentials and CORS requests, and…
Actually, it’s not secret — it’s [documented right here](https://docs.angularjs.org/api/ng/service/$http#caching). Although, I find that not a lot of people know about that feature. But there’s more to it than is documented there, so don’t worry, keep reading 😀. Basically, you can do this: …and get some caching for free. Easy! Passing the cache: true property tells angularJS to cache the response…
[RxJS](http://reactivex.io/rxjs/manual/overview.html) is cool and increasingly popular, but it seems like there’s a fair bit of confusion around when and why you would use it. “Why would you ever need that?”, your coworkers might say to you. I’m no RxJS expert and I don’t think it’s needed for every project, but for me, the main reasons to use it are that it allows you to: * Easily compose…
You have an amazing web app. But now you want the same app packaged as a desktop app, but with a little extra native magic sprinkled on top. For example, you want your todo app to show a little red counter on the dock icon with the remaining todo count on it, like this:  apps interact with a remote web service or API, which probably means the application has to store credentials (could be API access tokens, password, etc) for that. How do you do that securely? Simply storing it in plain text in an unprotected file can be a security issue. > **TL;DR** Code for this example is here under the storing-sensitive-data folder. >…
Central to Electron is the concept of two or more operating system level processes running concurrently — the “main” and “renderer” processes. Dealing with multiple processes is new territory if you’re coming from browser Javascript land. It was definitely a paradigm shift for me initially, and working with multiple processes may mean you make different design choices in your app that you wouldn’t…
> Code in this article can be found here: [https://github.com/ccnokes/electron-tutorials](https://github.com/ccnokes/electron-tutorials) Most Electron apps need some sort of way to save user data. This could be user preferences (e.g. show/don’t show notifications) or some kind of application data (e.g. last window size and position). So how do we save user settings in an Electron app? And where do…
So you’ve got a [native node.js addon](https://nodejs.org/api/addons.html) written in C, C++, Objective-C, C, or something else. Debugging the JS is easy — you can use WebStorm’s built-in debugger (my preferred method), node-debug, iron-node, or others. But what if you want to inspect what’s going on in your native C++ code? I’m a native node addon and C++ beginner myself, so I recently had to…