Posts tagged "javascript"

Found 56 posts tagged javascript

Experiment: Navigating the web with JavaScript disabled

Published on
#javascript #web 

Yes, you read that right.

I'm a JavaScript Developer, and I'm currently navigating the web with JavaScript disabled.

WTF? Why? How? But seriously, WHY?


Read more

scroll-behaviour

Published on
#til #javascript 

Scrolling/Jumping to a specific part of a webpage can be achieved in various ways, and with different bevaviours.

E.g.

  • JavaScript
  • CSS
  • HTML

Read more

Simple Server-sent events example in Node.js/JavaScript

Published on
#nodejs #javascript #featured -sse 

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


Read more

Lazy loading images in 11ty/eleventy

Published on
#javascript #eleventy #seo #blogging 

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.


Read more

How to test a function that works with time

Published on
#javascript #nodejs #testing 

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.


Read more

Making Minimal Analytics

Published on
#fullstack #nodejs #javascript #preact 

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.


Read more

Simple Static site/blog search in 14 Lines of JavaScript

Published on
#javascript #blogging -search #static 

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.


Read more

Node.js 15 is here

Published on
#nodejs #javascript 

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


Read more

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.


Read more

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


Read more

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.


Read more

Authenticated uplinks with verdaccio

Published on
#nodejs #javascript #npm 

How to configure authenticated uplinks with Verdaccio.


Read more

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?


Read more

Setting up a Verdaccio npm registry

Published on
#nodejs #javascript #npm 

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


Read more

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.


Read more

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.


Read more

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!


Read more

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.


Read more

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.


Read more

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.


Read more

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


Read more

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


Read more

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.


Read more

Twitter OAuth by example in Node.js

Published on
#javascript #nodejs #twitter #oauth 

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.


Read more

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:


Read more

Connect to MongoDB with monk in Node.js

Published on
#javascript #nodejs #mongo 

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


Read more

Recover from failed lerna publish

Published on
#javascript #nodejs #lerna 

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


Read more

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.


Read more

Deploy Eleventy site with Github Actions on AWS S3

Published on
#javascript #nodejs #eleventy #github #aws #s3 

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.


Read more

Publishing org scoped npm packages with travis

Published on
#javascript #nodejs #travis #npm 

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


Read more

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.


Read more

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.


Read more

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.


Read more

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.


Read more

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

Published on
#javascript #jekyll 

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


Read more

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.


Read more

Functional JavaScript: Write your own negate/not function

Published on
#javascript #nodejs 

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.


Read more

Simple templating with regular expressions

Published on
#javascript #nodejs 

Let's say you made a jQuery plugin and want to have an output (like a list of search results), whose aspect and format can be defined by the user.

Theory

The theory is very simple:

With a JSON file/object and the template the user provided you can create a basic templating system.


Read more

How to lazy load Disqus comments

Published on
#javascript #disqus 

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.


Read more