Programming Tips πŸ’‘
51.5K subscribers
67 photos
10 videos
30 files
354 links
Programming & AI:
Tips πŸ’‘
Articles πŸ“•
Resources πŸ‘Ύ
Design Patterns πŸ’Ž
Software Principles βœ…

πŸ‡³πŸ‡± Contact: @MoienTajik

🎯 Buy ads: https://telega.io/c/ProgrammingTip
Download Telegram
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
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
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