BetweenJS ⚡️

Lightweight JavaScript (ES6) tweening library. ↔️


Purpose💡:

Make tweening usage convenient and powerful. 🔥

• Modern : Written in ES6 🥇
• Lightweight : 8.3 KB 👌🏻
• Performant : Optimized 💨


https://t.me/pgimg/151

[ Website ] : kutt.it/4ruR0X
[ Github ] : kutt.it/Wl425b

〰〰〰〰〰〰
#JavaScript #Library
@ProgrammingTip

Polly.JS 🐦

Record, Replay, and Stub HTTP Interactions 💡

Polly.JS is a standalone, framework-agnostic JavaScript library that enables recording, replaying, and stubbing HTTP interactions. 🗂

Polly taps into native browser APIs to mock requests and responses with little to no configuration while giving you the ability to take full control of each request with a simple, powerful, and intuitive API. ✨


Features :
• Fetch & XHR Support 🚀
• Simple, Powerful, & Intuitive API ⚡️
• First Class Mocha & QUnit Test Helpers 💎
• Intercept, Pass-Through, and Attach Events 👌
• Record to Disk or Local Storage 📼
• Slow Down or Speed Up Time 🔥

https://t.me/pgimg/154

[ Github ] : github.com/Netflix/pollyjs

〰〰〰〰〰〰
#JavaScript #Library
@ProgrammingTip

Angular Console 🅰️

The Power of the Angular CLI. ⚡️
The Convenience of an App. 💎

Spend less time looking up command line arguments, and more time shipping incredible products. ✨

The Angular CLI is immensely powerful and extensible. 🌀

In fact, there are so many capabilities that it can often be hard to remember all of the different configuration options for every available command, or remember that certain features even exist. 🌍

Angular Console is, first and foremost, a more approachable way to work with what the Angular CLI already provides. 🔥

Availabe for: Mac, Windows ✅


https://t.me/pgimg/155

[ Download ] : kutt.it/ngcli

〰〰〰〰〰〰
#JavaScript #Angular #CLI
@ProgrammingTip

How JavaScript works: an overview of the engine, the runtime, and the call stack 🐞

As JavaScript is getting more and more popular, teams are leveraging its support on many levels in their stack - front-end, back-end, hybrid apps, embedded devices and much more. 💎

This post is meant to be the first in a series aimed at digging deeper into JavaScript and how it actually works: we thought that by knowing the building blocks of JavaScript and how they come to play together you’ll be able to write better code and apps. ✅

As it turns out, there are a lot of developers that are using JavaScript on a daily basis but don’t have the knowledge of what happens under the hood. 🌀


https://t.me/pgimg/157

[ Article ] : kutt.it/js-md1

〰〰〰〰〰〰
#JavaScript
@ProgrammingTip

How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code ⚡️

A JavaScript engine is a program or an interpreter which executes JavaScript code. 🌀

A JavaScript engine can be implemented as a standard interpreter, or just-in-time compiler that compiles JavaScript to bytecode in some form. ✅


Why was the V8 Engine created❓

The V8 Engine which is built by Google is open source and written in C++. ✨

This engine is used inside Google Chrome. Unlike the rest of the engines, however, V8 is also used for the popular Node.js runtime.💎

V8 was first designed to increase the performance of JavaScript execution inside web browsers. 💨

In order to obtain speed, V8 translates JavaScript code into more efficient machine code instead of using an interpreter.💥

It compiles JavaScript code into machine code at execution by implementing a JIT (Just-In-Time) compiler like a lot of modern JavaScript engines do such as SpiderMonkey or Rhino (Mozilla). 🦊

The main difference here is that V8 doesn’t produce bytecode or any intermediate code. ❌


https://t.me/pgimg/160

[ Article ] : kutt.it/js-md2

〰〰〰〰〰〰
#JavaScript #Internals #V8
@ProgrammingTip

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