What Happened When I Peeked Into My Node_Modules Directory 🤯

The left-pad fiasco shook the JavaScript community to its core when a rouge developer removed a popular module from npm, causing tens of projects to go dark. ❌

While code bloat continues to slow down our websites, drain our batteries, and make “npm install” slow for a few seconds, many developers like myself have decided to carefully audit the dependencies we bring into our projects. 🌀

It’s time we as a community stand up and say enough is enough, this community belongs to all of us, not just a handful of JavaScript developers with great hair. 👥

I decided to document my experiences in auditing my projects’ dependencies, and I hope you find the following information useful. ✅


https://t.me/pgimg/173

[ Article ] : kutt.it/nmo

〰〰〰〰〰〰
#JavaScript #NPM
@ProgrammingTip

Splitting.js ✨

Splitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more❗️


https://t.me/pgimg/181

[ Website ] : splitting.js.org
[ Github ] : kutt.it/splt

〰️〰️〰️〰️〰️〰️
#JavaScript #Animation
@ProgrammingTip

Boost Your Vue.js Workflow With Vue CLI 3 ⚡️

We can hardly imagine modern web development without the help of Command-Line Interface (CLI) tools. 💻

They tremendously facilitate and speed up the development workflow by reducing the amount of repetitive and tedious tasks. ✅

Setting up a project manually, with all the linting, building, testing, preprocessing, optimizing, and dependency tracking features, doesn't sound like a fun job, does it❓

That's why all modern client-side development frameworks (such as Angular, React, etc.) offer their own version of CLI tools, and Vue.js is no exception. 💎

But with its latest third version, Vue CLI is going one step ahead of the others. ✨

It's now not only highly powerful and flexible, but also comes with a full-blown GUI. 🌈

Yeah, you heard right. Vue CLI 3 offers a full graphical user interface out of the box. 🌀


https://t.me/pgimg/182

[ Article ] : kutt.it/vcli
[ Website ] : cli.vuejs.org

〰️〰️〰️〰️〰️〰️
#Vue #JavaScript #CLI
@ProgrammingTip

Tilt.js ✨

A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery. 💎

Alternatives :
• Vanilla JS
• React
• Polymer


https://t.me/pgimg/185

[ Github ] : github.com/gijsroge/tilt.js
[ Demo ] : gijsroge.github.io/tilt.js/

〰️〰️〰️〰️〰️〰️
#JavaScript #jQuery #Parallax #React
@ProgrammingTip

THE JAVASCRIPT EVENT LOOP ⚡️

The Event Loop is one of the most important aspects to understand about JavaScript. ✨

This post explains it in simple terms. 💎


https://t.me/pgimg/186

[ Article ] : kutt.it/jel

〰️〰️〰️〰️〰️〰️
#JavaScript #EventLoop
@ProgrammingTip

LowDB is a small local JSON database for Node, Electron and the browser powered by Lodash.⚡️

Sample 💎 :

const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')

const adapter = new FileSync('db.json')
const db = low(adapter)

// Set some defaults (required if your JSON file is empty)
db.defaults({ posts: [], user: {}, count: 0 })
.write()

// Add a post
db.get('posts')
.push({ id: 1, title: 'lowdb is awesome'})
.write()

// Set a user using Lodash shorthand syntax
db.set('user.name', 'typicode')
.write()

// Increment count
db.update('count', n => n + 1)
.write()

Result 🔥:

{
"posts": [
{ "id": 1, "title": "lowdb is awesome"}
],
"user": {
"name": "typicode"
},
"count": 1
}



https://t.me/pgimg/194

[ GitHub ] : github.com/typicode/lowdb

〰️〰️〰️〰️〰️〰️
#JavaScript #Database
@ProgrammingTip

Learn Webpack in 15 Minutes ⚡️

Build tools have become an integral part of web development, mainly due to the ever-increasing complexity of JavaScript apps. 🛠

Bundlers allow us to package, compile, and organize the many assets and libraries needed for a modern web project. 📦

In this tutorial we will take a look at Webpack, a powerful open-source bundler and preprocessor that can handle a huge variety of different tasks.💎


[ Article ] : kutt.it/webpck15

〰️〰️〰️〰️〰️〰️
#JavaScript #Webpack #Bundler
@ProgrammingTip

XState ✨

JavaScript and TypeScript finite state machines and statecharts for the modern web.

Statecharts are a formalism for modeling stateful, reactive systems. ⚡️

This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic. 🗣


[ Github ] : github.com/davidkpiano/xstate

〰️〰️〰️〰️〰️〰️
#JavaScript #TypeScript #StateChart
@ProgrammingTip

You Don't Know JS 📕

Author 🖊 : Kyle Simpson

Publisher : O'Reilly ✨

〰️〰️〰️〰️〰️〰️
#Book #JavaScript #Deep
@ProgrammingTip

Marky ⏱

JavaScript timer based on performance.mark() and performance.measure(), providing high-resolution timings as well as nice Dev Tools visualizations. 🌈

For browsers that don't support performance.mark(), it falls back to performance.now() or Date.now(). In Node, it uses process.hrtime(). ✨


[ Github ] : github.com/nolanlawson/marky

〰️〰️〰️〰️〰️〰️
#Measurement #Benchmark #JavaScript
@ProgrammingTip

Are Node.js Modules Singletons ? 🤦🏻‍♂️

Node.js modules can behave like Singletons, but they are not guaranteed to be always singleton❗️

There are two reasons for this and both are mentioned in the official Node.js documentation 📑 :

1- Node’s module caching mechanism is case-sensitive. 🤷🏻‍♂️

2- Modules are cached based on their resolved filename. 🗣


[ Article ] : kutt.it/nodesingle

〰️〰️〰️〰️〰️〰️
#JavaScript #NodeJS
@ProgrammingTip

Emojis – the fun and weird parts! 😅

Come get a time out from useful learning and get a brief introduction to the surprisingly interesting world of emojis ! ⚡️

Emojis – to most of us they're just a weird distraction from proper language.

They're actually a rather cool piece of technology (❗️) with a meaningful impact on society. I'll teach you 3 things you didn't know about emojis, but you'll be glad you do ! ✨


[ Conference ] : kutt.it/emoji
[ Article ] : kutt.it/emojiart

〰️〰️〰️〰️〰️〰️
#Emoji #JavaScript
@ProgrammingTip

Superstruct 🔥

A simple and composable way to validate data in Javascript. ✨

Superstruct makes it easy to define interfaces and then validate JavaScript data against them. ⚠️

Its type annotation API was inspired by Typescript, Flow, Go, and GraphQL, giving it a familiar and easy to understand API. 🧠

But Superstruct is designed for validating data at runtime, so it throws (or returns) detailed runtime errors for you or your end users. 👥

This is especially useful in situations like accepting arbitrary input in a REST or GraphQL API, but it can even be used to validate internal data structures at runtime when needed. ✅


[ Github ] : kutt.it/SprStr

〰️〰️〰️〰️〰️〰️
#JavaScript #Validation
@ProgrammingTip

Elasticlunr.js ⚡️

Elasticlunr.js is a lightweight full-text search engine developed in JavaScript for browser search and offline search. 🔍

Elasticlunr.js is developed based on Lunr.js, but more flexible than Lunr.js. 🔥

Elasticlunr.js provides Query-Time boosting, field search, more rational scoring/ranking methodology, fast computation speed and so on. 💎

Elasticlunr.js is a bit like Solr, but much smaller and not as bright, but also provide flexible configuration. ✨


[ Website ] : elasticlunr.com
[ Github ] : github.com/weixsong/elasticlunr.js

〰️〰️〰️〰️〰️〰️
#JavaScript #Search
@ProgrammingTip

Why I created another React component library 🌈

[ Article ] : https://kutt.it/ARC
[ Github ] : https://github.com/sha-el/sha-el-design

〰️〰️〰️〰️〰️〰️
#React #JavaScript
@ProgrammingTip