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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
LowDB is a small local JSON database for Node, Electron and the browser powered by Lodash.β‘οΈ
Sample π :
[ GitHub ] : github.com/typicode/lowdb
γ°οΈγ°οΈγ°οΈγ°οΈγ°οΈγ°οΈ
#JavaScript #Database
@ProgrammingTip
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
Programming Tips π‘
Photo
You Don't Know JS by Kyle Simpson.pdf
4.2 MB
You Don't Know JS π
Author π : Kyle Simpson
Publisher : O'Reilly β¨
γ°οΈγ°οΈγ°οΈγ°οΈγ°οΈγ°οΈ
#Book #JavaScript #Deep
@ProgrammingTip
Author π : Kyle Simpson
Publisher : O'Reilly β¨
γ°οΈγ°οΈγ°οΈγ°οΈγ°οΈγ°οΈ
#Book #JavaScript #Deep
@ProgrammingTip
Marky β±
JavaScript timer based on
For browsers that don't support
[ Github ] : github.com/nolanlawson/marky
γ°οΈγ°οΈγ°οΈγ°οΈγ°οΈγ°οΈ
#Measurement #Benchmark #JavaScript
@ProgrammingTip
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
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
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
Telegram
Programming Tips Resources
Why I created another React component library π
[ Article ] : https://kutt.it/ARC
[ Github ] : https://github.com/sha-el/sha-el-design
γ°οΈγ°οΈγ°οΈγ°οΈγ°οΈγ°οΈ
#React #JavaScript
@ProgrammingTip
[ Article ] : https://kutt.it/ARC
[ Github ] : https://github.com/sha-el/sha-el-design
γ°οΈγ°οΈγ°οΈγ°οΈγ°οΈγ°οΈ
#React #JavaScript
@ProgrammingTip
Telegram
Programming Tips Resources