With Server-sent events you are able to send one-directional events to a web page.

Here is an example of how I used this functionality in Minimal Analytics

Here I want to show how you can create your own 11ty plugin.

Below I'm going to illustrate how to lazy load images using Eleventy plugins.

While building Minimal Analytics I had the need to test a function that was dependent on time.

In my case, the function returned the milliseconds until midnight.

Here is a simple way to test the function msUntilMidnight.

Web Analytics & dashboards always fascinated me.

This is my approach to a self-hosted, simple web analytics solution.

It also helped me to get back to Full stack web development, using a clean and testable approach.

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 has been released, with exciting changes and improvements!

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.

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

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.

How to configure authenticated uplinks with Verdaccio.

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

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

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

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.

µ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.

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

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 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.

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

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..

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

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.

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.

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:

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

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)!

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.

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.

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

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

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.

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.

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.

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

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

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

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.

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.

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.

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).

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.

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.