Posts tagged "javascript"

Simple Static site/blog search in 14 Lines of JavaScript

Published on
#javascript #blogging 

This is my approach to a purely client side search feature for static blogs and sites.

I am currently using this under /posts to let readers search through my blog posts.

Read more below about how to integrate it in your site.

Node.js 15 is here

Published on
#nodejs #javascript 

Node.js 15 has been released, with exciting changes and improvements!

Test driving a HackerNews scraper with Node.js

Published on
#tdd #nodejs #testing #cleancode #refactoring #javascript 

This is a short summary of my experience while writing a simple HackerNews scraper.

As a pure exercise or kata if you want, I tried to apply Clean code, Refactoring and Testing priciples for this small npm module.

The task is simple:

Get the posts on the front page of https://news.ycombinator.com and parse them.

Fast virtual scrolling with preact

Published on
#preact #react #javascript 

If you need to show many list items, one common technique to overcome this issue, is to apply the concept of "virtual scrolling".

Simple event tracking with Plausible Analytics

Published on
#javascript #analytics 

Do you want to know how users make use of your site? Which links they click most and what converts most?

From the official documentation you can trigger custom events via JS, by including a small utility function plausible:

<script>
window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
</script>

Whenever you call plausible('...event...') you put a tracking event in a queue (window.plausible.q) and will be tracked.

Authenticated uplinks with verdaccio

Published on
#nodejs #javascript #npm #npmregistry #registry 

How to configure authenticated uplinks with Verdaccio.

Fixing 431 Request Header Fields Too Large in Node.js

Published on
#nodejs #javascript 

You're seeing a blank page saying "HTTP_ERROR 431"?

And you're running a Node.js HTTP server, like express or fastify?

Setting up a Verdaccio npm registry

Published on
#nodejs #javascript #npm #npmregistry #registry 

In case the npm registry goes down, it's wise to have a backup registry.

Minimal dark mode with CSS and JavaScript

Published on
#javascript #css #darkmode 

Dark mode is everywhere nowadays. Personally using darkreader as an extension of Brave browser, and I'm loving it.

But if you want to roll your own, for fun or for whatever reason, continue reading to understand how I did it.

Using ┬Ácompress to dramatically optimize static assets

Published on
#javascript #blogging 

┬Ácompress is a lovely utility by WebReflection that compresses common static files.

A micro, all-in-one, compressor for common Web files

Using it since commit ce0a9e on this very website, in my GitHub Actions workflow.

Optional chaining in Node.js 14 and JavaScript

Published on
#javascript #nodejs 

A long awaited feature of the language and runtime has been released and is available in Node.js 14 (and modern browsers): Optional chaining!

Nullish coalescing in Node.js 14 and JavaScript

Published on
#javascript #nodejs 

The Nullish coalescing operator in useful to handle default values, without short-circuiting on values that result as falsy.

Falsy values are undefined, null, false, 0, NaN, and '' in JavaScript, and sometimes you want to retain those values, explicitly excluding null and undefined.

devblog: yet another static site generator, seriously

devblog is yet another lightweight static site generator.

Although there are widely used SSG like 11ty (which this blog was previously based on), Jekyll (also previously used), GatsbyJS and many others, I wanted to get my hands dirty and understand how to make the process of building a static blog even simpler, if possible.

Even simpler in the sense of "it does just what I need and nothing more".

Install via npm i -g devblog or create a blog with a one-liner npx devblog init my-new-blog, cd my-new-blog and serve with npx http-server _site 8080. It's that easy.

Rebuild the blog by running npx devblog (or npm i -g devblog and then just run devblog in the main directory)

Continue reading my story of building devblog.

How to solve Puppeteer Chrome Error ERR_INVALID_ARGUMENT

Published on
#puppeteer #javascript #scraping 

I was encountering this error when trying to set up a puppeteer instance with a proxy.

How to connect puppeteer to a Proxy

Published on
#puppeteer #javascript #scraping 

In a previous post I tried to explain how to troubleshoot an issue when connecting to a Proxy with Puppeteer investigating API documentations , Chromium flags and all that funny jazz..

Twitter OAuth Login with fastify and Node.js

Published on
#nodejs #javascript #twitter #oauth #fastify 

GitHub example repo

At christian-fei/twitter-oauth-login-in-nodejs on GitHub you can find the whole source code.

Learn how to create a Twitter OAuth Application

Twitter OAuth Login by example with Node.js

Published on
#nodejs #javascript #twitter #oauth 

Lately I found myself dealing with Twitter and Google OAuth (1.0a and 2.0) to authorize a user to act on their behalf, namely reading profile information, reading and posting content on their behalf or other common permissions.

Since my process of trying to understand and make sense of OAuth has been both fun and rough, I wanted to summarize a full example in a single JavaScript file and document other findings along the way.

Twitter OAuth by example in Node.js

Published on
#javascript #nodejs 

Curious about how to call an HTTP API like Twitter or GitHub by authenticating through OAuth (1.0a and 2.0)?

Read more about how to do it with Node.js

Learn how to create Twitter login with OAuth 1.0a.

Minimal environments with dotenv and Node.js

Published on
#javascript #nodejs 

Personally I use dotenv to handle different environments in my Node.js applications.

It gives you the ability to specify a .env file (generally provisioned on each environment with the corresponding environment variables), along these lines:

Connect to MongoDB with monk in Node.js

Published on
#javascript #nodejs 

An example of connecting to mongodb with the Monk NPM module.

Recover from failed lerna publish

Published on
#javascript #nodejs 

Lately, I was having issues with lerna while trying to publish packages from a mono-repo.

The problem was that lerna, sometimes, failed while publishing the changed packages (with the command lerna publish --conventional-commits)!

The cleanest way to maintain connect / express middlewares in Node.js

Published on
#javascript #nodejs 

I want to share how I maintain my connect / express middlewares for simple HTTP APIs in Node.js

The code snippets below are taken from pomodoro.cc api source code.

my blogging stack in 2020

Published on
#javascript 

Deploy Eleventy site with Github Actions on AWS S3

Published on
#javascript #nodejs 

gh-actions-working.png

I finally managed to get the deployment of an eleventy - 11ty site (namely this one) and sync with AWS S3, where this blog is hosted.

Publishing org scoped npm packages with travis

Published on
#javascript #nodejs 

If you stumbled upon this article, you are probably seeing the following error message on travis in the deployment stage:

pm2 deploy fast

Published on
#javascript #nodejs 

I found it. It found me...

Whatever!

I came across the only documentation about cloning a git repo with the [--depth option](https://git-scm.com/docs/git-clone#git-clone

Easy rate limit with Promise.all and p-limit

Published on
#javascript #nodejs 

Rate limiting API calls to an HTTP service doesn't have to cumbersome and too complicated.

A simple way to achieve this (and that I use all the time) is to combine Promise.all with an npm package called p-limit.

p-limit is used to run multiple promise-returning & async functions with limited concurrency.

A story about npm publish / unpublish

Published on
#javascript #nodejs 

Today I sat down and wrote a tiny package called wait-for-user-input. it can be used to wait for stdin input in a command line script.

Mapping historic market data

Published on
#crypto #blockchain #javascript 

Market data is generally represented as an array of arrays, and each entry is a data point that represents a "snapshot" of the market in a given period of time.

Chaining and indenting after the return statement

Published on
#javascript 

Lately I have been following the Standard.JS style guide (after disliking ava & xo) and took style-guides in general more seriously.

Use Simple-Jekyll-Search on your blog in these easy steps

Published on
#javascript 

Requirements

  • a Jekyll blog (of course)

Create search.json

Create a file search.json with this content https://github.com/christian-fei/Simple-Jekyll-Search/blob/master/example/search.json

Introduction to AngularJS

Published on
#angularjs #javascript 

Angular is a JavaScript framework for creating modern web applications, which are inherently declarative, modular, with testability in mind.

Always $digest after you expect

Published on
#angularjs #javascript #testing 

Angular`s digest loop is like a baby: you need to take care of it and feed it well, or it will puke all over your nice shirt. Actually, it will probably, eventually do it anyway.

How to invalidate AppCache

Published on
#javascript 

AppCache is a nice guy when it comes to caching stuff, but at the end of the day it is just a fucking douchebag.

For me AppCache is a smelly, almost invisible, annoying little parasite.

If you're having trouble cleaning up the mess this guy did (aka invalidate the cache), these simple steps will lessen your burden and throw this douchebag out of the parents' house.

Functional JavaScript: Write your own negate/not function

Published on
#javascript #nodejs #javascript 

Let's say you want to filter odd numbers from a list of numbers, like [1,2,3,4,5,6] should become [1,3,5].

One way to solve this problem in a functional fashion is to provide an odd filter function, that is internally composed by a negation of an even filter on those numbers.

Angular: Filter already selected items from ng-options

Published on
#angularjs #javascript 

Let's say you have an array of things.

You want to provide to your user the ability to select two things from this array.

If you use the <select> tag you won't be able to select multiple options from this list unfortunately. You can either come up with a new directive that handles this, use somebody else's plugin, or roll your own Angular filter (probably for learning purposes).

A closer look at Angular's dependency injection

Published on
#angularjs #javascript 

Angular's DI in combination with lazy loading of dependencies is one of my favourite features of Angular.

I was fascinated about the simplified API that Angular provides to make DI happen and the ability to create testable, modular code out of the box.

Anyways we are here to look what's behind Angular's DI, so here we go.

How to lazy load Disqus comments

Published on
#javascript 

Disqus is definitely one of the best commenting systems out there (not to mention that it is responsive). As a speed freak I'm always concerned how much assets a website needs to load, affecting the overall load time of it.

Join other 100+ developers!
Consider subscribing if you are into topics like DIY, Node.js, Elixir and more.

View the past editions of my newsletter