Tips and Tricks

2022/06/27 (增加連結)

Tips

• JavaScript The Hard Parts — Part 1

  • execution context

  • call stack

• How JavaScript Works behind the scenes?

• Inside the JavaScript Engine

• JavaScript Under The Hood: Advanced Concepts Developers Should Know

• JavaScript Tips — Good Constructs to Use

  • Don’t Use var, Use let or const

  • Use === or Object.is Instead of ==

  • undefined, null, 0, false, NaN, ‘’ (empty string) are all Falsy.

  • Use Semicolons for Line Termination

  • Use Class Syntax for Object Constructors

• Javascript Baker’s Dozen : 13 Javascript one-liners

• 10 JavaScript One-liners You Have Got to Add Your Arsenal as a Developer

• 15 Helpful JavaScript One-Liners

• Modern Javascript Techniques

  • Fundamentals

  • Workflow

  • Operations

  • Functions

  • Asynchronous

  • Functional Programming

• Spice up your JavaScript

• Does JS really do that?!

• Little known features of JavaScript

• 6 Cool Modern JavaScript Features Most Developers Don’t Know About

• Here’s How Not to Suck at JavaScript

• Is JavaScript the Best Language for New Coders?: Despite its many flaws, JavaScript just might be the best tinkering language for kids and new learners

  • Now for the problems…

    • JavaScript isn’t type safe

    • JavaScript doesn’t do OOP

    • The world is full of bad JavaScript code

    • JavaScript needs additional libraries and frameworks

• Must-Watch Javascript Talks

  • JavaScript Event Loop

  • Web APIs You [Probably] Didn’t Know Existed

  • Functional Programming with JavaScript

  • RxJS + Redux + React = Amazing!

  • JavaScript Engines — How Do They Even?

  • Wait, You Can Do That With JavaScript…!?

  • Using WebAssembly and Threads

  • A Quest to Be a (Web) Master

  • Imagine This: A Web Without Servers

  • What’s New in JavaScript (Google I/O ’19)

• Write your own javascript state management library

• 30 days of the best code snippets

• 127 Helpful JavaScript Snippets You Can Learn in 30 Seconds or Less

  • Part 1 of 6

  • Part 2 of 6

  • Part 3 of 6

  • Part 4 of 6

  • Part 5 of 6

  • Part 6 of 6

• 5 simple (?) algorithms for JavaScript Developers.

• The Underscored Importance of Underscore (JS)

  • underscrore.js

    • _.invert

    • _.functions

    • _.extend

    • _.uniqueId

    • _.template

• Some simple and amazing JavaScript tricks

  • Trick 1: Combining Multiple Objects

  • Trick 2: Inserting values in between an array

  • Trick 3: Get the current timestamp

    • How to Get a Timestamp in JavaScript?

  • Trick 4: Check if an object is an array

  • Trick 5: Object destructuring

  • Trick 6: Rest parameter syntax

• 10 Must-Know JavaScript Tricks & Tips About Reduce

• 10 Awesome Github Repos Every Web Developer Should Know

  • Awesome

  • List of (Advanced) JavaScript Questions

  • JavaScript Algorithms and Data Structures

  • Clean Code JavaScript

  • free-for.dev

  • Tech Interview Handbook

  • Effective Engineer — Notes

  • List of Free Learning Resources

  • Big List of Naughty Strings

  • Awesome First PR Opportunities

• Sharing Code In a Large JavaScript Project

  • Locally Shared Git Project Folders

    • Most devs place their code into Git as a code repository for their project. Well, it’s also possible to create a shared folder as a repository in Git and clone it anywhere locally.

• Compare require() vs import() in JavaScript

• 6 JavaScript Do’s and Don’t

• Why does JavaScript’s parseInt(0.0000005) print “5”?

• Automatic Dark Mode With JavaScript : Detecting Users’ OS Dark Mode Preference Using matchMedia()

• Event target vs currentTarget in JavaScript: The Important Difference

• The Do’s and Don’ts of Try-Catch in JavaScript

  • Don’t Use Try-Catch For Input Validation

  • Do Use Try-Catch for Error Handling

  • Do Use Try-Catch for Customizing Error Messages

  • Do Use Try-Catch to Catch ALL Exceptions

  • Don’t Use Try-Catch For Program Logic

3D

• 10 JavaScript Code Techniques To Manipulate Textures In Three.js

API

• Getting to Know the Broadcast Channel API in JavaScript

• 4 Awesome Browser APIs You Might Not Be Using Yet

Array

• 12 useful JavaScript array tricks

• Which is The Best Method To Find an Item in an Array of Arrays in JavaScript?

• 7 JavaScript one-liners to work with arrays and make you code cleaner

• 5 Use Cases for Array.from() in JavaScript

• How to Efficiently Merge Arrays in JavaScript

Console

• 9 JavaScript Console Tips That Will Improve Your Debugging Skills

Closure

• 10 JavaScript Closure Challenges Explained With Diagrams

Date

• Date-ing JavaScript

• Mastering dates in JavaScript

  • Formatting a date

  • Transforming a string representing a date into a Date object

  • Performing date arithmetics, e.g. calculating the distance between two dates or adding a hours, days, months, etc., to a given date

  • Formatting a date with moment.js and friends

  • Parsing a date with moment.js and friends

  • Date arithmetics with moment.js and friends

  • Probably the best choice right now is day.js

• Formatting Dates with the DateTimeFormat Object

  • The Constructor and the Format Method

  • Other Instance Methods

• Handling Dates in JavaScript

  • Built in Date Object

  • Moment.js

• JavaScript — What The Heck is UTC and Why You Need to Know This

  • What is UTC

  • Time Zone

  • The Boundary of Time Zone

  • Date Object in JavaScript

• Formatting Relative Time with JavaScript’s RelativeTimeFormat Constructor

  • Intl.RelativeTimeFormat

• The Future of Date and Time in JavaScript

• Best Moment.JS Alternatives

  • Luxon, Day.js, date-fns and js-joda.

• The Complete Guide to Date Manipulation in JavaScript

  • JavaScript Date Manipulation Libraries

    • Date-fns

      • Stop using MomentJs : date-fns

    • Luxon

      • Stop Using MomentJS. Here Is What You Should Use Instead : Luxon

      • Stop using Moment.js for Dates and Time in JavaScript : Luxon.js is the modern replacement of Moment.js

• JavaScript Temporal API- A Fix for the Date API **還沒正式release

• The Easiest Way To Format Dates In JavaScript : Internationalization API

Observer

• 3 Web Observers Every Web Developer Should Know

  • MutationObserver

  • ResizeObserver

  • IntersectionObserver

Object

• Are JavaScript Object Properties Ordered?

  • When an object’s property keys are a combination of the above types, the object’s non-negative integer keys (enumerable and non-enumerable) are first added to the array in ascending order, then String keys are added in insertion order. Finally, Symbol keys are added in insertion order.

Proxy

• What are ES6 Proxies and how to use them?

Request

• How to Cancel a Request in JavaScript?

Scope

• Scopes In Javascript.

Editor

• Introduction to Editor JS

• Getting Started with Editor JS

LocalStorage

• Pro tips using localStorage

Mail

• 8 Best JavaScript Email API Libraries

PDF

• The Simplest Javascript PDF Viewer Ever

DOM

• The Basic Vanilla JavaScript Project Setup

• How to Create and Manipulate DOM Nodes in Vanilla JS : Working with the DOM in Vanilla JS apps (part 1): Tips for creating and manipulating DOM nodes without frameworks.

Test

• Test component interactions with Storybook

Flow

• Typescript vs Flow. Which static type checker should you use on your project?

Build tools

• Is Vite Better than Webpack? : Fixing Webpack’s developer experience with Vite: A modern JavaScript build tool

• Time to say goodbye to Webpack?

• Struggling With Webpack? Understand It Through Illustrations

Package

• NPM Commands and Shortcuts You Should Know as a JavaScript Dev

Frameworks

Remix

• 6 Killer Features From Remix

• Is Remix JS the Next Framework for You?

• Next.js vs. Remix: Analyzing Key Aspects and Differences

Performance

Web Worker

• Boost Your Web Application Performance With JavaScript Web Workers

Lazy Loading

• Lazy Loading JavaScript With the New Intersection Observer API

Caching

• The Power of Caching in JavaScript

Clean code

• 6 JavaScript Techniques To Help You Write Cleaner Code

• 7 JS clean coding tips every developer should know

• 7 JS patterns junior developers should know well

  • Making Variables from Properties / destructuring assignment.

  • The Spread Syntax

  • The Bracket Notation

  • The Map data object

  • Deep dive into the arrow functions

  • Properties assignment to a function

  • Method chaining

• Top 10 JavaScript Patterns Every Developer Like

• JavaScript Patterns —Methods and Inheritance

• JavaScript Patterns — Modules and Sandbox

• JavaScript Antipatterns — Prototypes, Switch, and More

  • Built-in Prototypes

    • We should never add methods to built-in prototypes.

  • switch Pattern

  • Avoiding Implied Typecasting

  • Avoiding eval()

    • We shouldn’t use eval or related methods like the Function constructor or passing strings to setTimeout or setInterval .

  • Number Conversions with parseInt()

• JavaScript Antipatterns — Functions

• JavaScript Antipatterns — Immediate Functions

• JavaScript Antipatterns — Formatting and More

ESLint

• ESLint rules that made me a better React developer

Polyfill

• Polyfills, Ponyfills, and Transpiling

• Compiling vs. Polyfilling in JavaScript

  • Compiling means the compiler (Babel) performs syntax transforms, but it does not add any new JavaScript primitives.

  • Able to be compiled

    • Arrow functions

    • Async functions

    • Block scoped functions

    • Classes

    • Class properties

    • Computed property names

      • Less bugs in JavaScript thanks to computed properties

    • Constants

    • Decorators

    • Default parameters

    • Destructuring

    • Modules

    • Object rest/spread

    • Property Method assignment

  • When you add a polyfill, you are adding brand-new functionality to your JavaScript code that did not exist there before.

  • Need to be polyfilled

    • ArrayBuffer

    • Array.from

    • Array.of

    • Array#find

    • Array#findIndex

    • Function#name

    • Map

    • Number.isNan

    • Object.assign

    • Object.entries

    • Object.values

    • Promise

    • Set

    • String#includes

    • Symbol

    • WeakMap

    • WeakSet