Posts tagged "javascript"
Simple Static site/blog search in 14 Lines of JavaScript
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
Node.js 15 has been released, with exciting changes and improvements!
Test driving a HackerNews scraper with Node.js
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
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
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
How to configure authenticated uplinks with Verdaccio.
Fixing 431 Request Header Fields Too Large in Node.js
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
In case the npm
registry goes down, it's wise to have a backup registry.
Minimal dark mode with CSS and JavaScript
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
µ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
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
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
I was encountering this error when trying to set up a puppeteer instance with a proxy.
How to connect puppeteer to 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..
Twitter OAuth Login with fastify and Node.js
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
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
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
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
An example of connecting to mongodb with the Monk NPM module.
Lazy loading images in 2020
#javascript
Recover from failed lerna publish
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
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
#javascript
Deploy Eleventy site with Github Actions on AWS S3
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
If you stumbled upon this article, you are probably seeing the following error message on travis in the deployment stage:
pm2 deploy fast
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
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
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
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
#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
#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
Angular is a JavaScript framework for creating modern web applications, which are inherently declarative, modular, with testability in mind.
Always $digest after you expect
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
#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.
Conforming to protocols in JavaScript
#javascript
Functional JavaScript: Write your own negate/not function
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.
How to use morgan with node-simple-router
#javascript
Angular: Filter already selected items from ng-options
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
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
#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.