This is a bit of a rant, but I’ve been frustrated recently by devs treating 4-year-old features (yes, ES2015 features have been in the standard for 4 years!) as something new. I’ve been told that my code looks like I’m trying to show off that I know ES2015. I don’t know what that even means at this point, it’s just part of the javascript language.

Edit: by the way, I’m not talking about debates surrounding readability of arrow functions vs. function keyword; rather I’m talking about using things like the Set object.

JS Fam, I hope we're all well. Here is my dependency free components list for you all. I generally prefer coding Vanilla and I like my bundles small, so this list is mostly composed of micro JS components that will help assist you in your builds and keep your end production files small.

Some of you might be itching for some SPA versions of these for your frameworks and you can probably find some in the wild but when it comes to building Single Page Applications, I don't roll with giants like React or Vue because my heart belongs to Mithril which a lot of these work beautifully with but of course these all will implement well with whatever framework you're using and obviously with no framework too because they're dependency free.

Hopefully they will be of use to some of you in the future.

Component List

^{Component = Libraries, Modules, plugins etc}

All credit and thanks goes to the maintainers of these libraries, y'all are the real MVP's up in here. Remember to star a project if you like it, creators need to know what they've released is appreciated.

UTILITIES

Loadjs (Script Loader)

LoadJS is a tiny async loading library for modern browsers (IE9+) for your external scripts. A fantastic little component coming in the 800 bytes, comes in real handy in a lot of situations, especially those working on SaaS platforms that require additional third parties to get simple functionality Cough, Shopify Cough, Cough.

Simple State Manager (Responsive Manger)

Simple State Manager (SSM for short) is a javascript state manager for responsive websites. Need to load specific components based on screen size? look no further because SSM is here. A fantastic ES6 component with a tiny size that helps you control what you load depending on your users screen width.

Picturefill (Responsive Images)

A responsive image polyfill. Need better control of your images? Picturefill has got you. Load in images based on screen dimensions. Why load in a 150kb image when you're in mobile, get those speed gains!

Store (Local Storage)

Work with Local storage. Store.js makes working with your browser’s local storage an utter ease and supports legacy browsers.

JS Cookie (Cookies)

If you're not using JS Cookie then you're living under a rock or still think jQuery is cool to use (no offense jQuery users). JS Cookie makes working with cookies an ease and it's tiny at 900 bytes gzipped!

Qwest (Ajax Library)

Qwest is a simple ajax library based on promises and that supports XmlHttpRequest2 special data like ArrayBuffer, Blob and FormData. A really handy and impressive tool that will make working with JSON a pleasure.

Validate (Form Validation)

Need form validation? Validate.js will make your life easier on so many levels. A tiny 2.5kb component that ensures your users are not getting past without correct validation in place.

UI COMPONENTS

Vanilla Modal (Modal)

An ES6 modal component that ships with everything you require in a modal component, plus it's tiny in size. Have this in production on several projects and it works like an absolute charm.

Siema Carousel (Carousel)

Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. You want a carousel that doesn't ship with a bunch of additional stuff you don't need? Look no further. Fck Slick and these other jQuery dependant giants. Siema got your covered and is highly configurable + responsively supported of course.

Tabbis (Tabs)

Need tabs? Tabbis is tiny and uses LocalStorage to save previous viewed tabs (Fck yeah!) – I rewrote this in ES6 so if you want an ES6 version check the closed issues of the repo. A well written little component and is all you need for tabs.

Slideout (Offcanvas)

Slideout is poetic and your goto component for responsive design. When you need off-canvas drawers (menu), use Slideout. Super customizable and tiny size coming in at only 2kb minified and gzipped.

Pikaday (Date Picker)

Need a date picker? Pikaday is going to be your best friend in this situation. Pikaday is customizable and includes all the flavors you will require. 5kb minified and gzipped.

Rellax (Parallax)

Rellax is a buttery smooth parallax library that works with mobile. This little weapon is perfect for any Parallax implementation you find yourself having to include, it's super lightweight at only 1.2kb minified and gzipped.

Stickybits (Stickies)

I've tried them all when it comes to sticky's and while we are going to be supporting it in CSS in the near future, Stickybits is the dominant one in the sticky game. Lightweight and well maintained, it makes working with sticky elements an absolute delight and you won't get jumpy elements with this little gem.

EDIT HISTORY:

1. Sentence Restructure

2. Formatting Fam, formatting.

3. Formatting (again)

4. Linking Part 2

5. List editing history

https://9to5google.com/2019/05/29/chrome-ad-blocking-enterprise-manifest-v3/

It seems like the time to migrate to Firefox is upon us.

Hi guys, I messed around a bit and made this little toy demo: https://jsfiddle.net/06L845jx/86/

It could be a little hint to help beginners understand, how 3D engines (like OpenGL or Direct X) work.

You can see, that drawing is just looping through triangles, processing each one with a Vertex Shader, and calling a Fragment Shader on it. The current "Fragment shader" just strokes the outline of a 2D triangle, but you could extend it, make a Z-buffer and loop through each pixel, for a proper fragment shading :) Or make the camera move with arrows on a keyboard (update transformation matrix).

The model is just a cube: 8 vertices for 12 triangles (two for each side). But it can render any triangle model you give it (e.g. generate a model with a code).

-------------------------------------------------------------

Thanks for upvotes! I made a second demo with 100 cubes (54 lines of JS) https://jsfiddle.net/06L845jx/127/