A rather geeky/technical weblog, est. 2001, by Bramus
bezier-easing provides Cubic Bezier Curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, …any other custom curve) exactly like in CSS Transitions. Pass in the 4 points of the bezier curve of your liking – just like you’d use when defining a CSS Transition Timing Function using cubic-bezier() – and then project x, ranging from …
Continue reading “bezier-easing – cubic-bezier implementation for your JavaScript animation easings”
webpack-dashboard – A CLI dashboard for your webpack dev serverwebpack-dashboard is a webpack plugin that changes the noisy CLI output from this … … into that: Now when you run your dev server, you basically work at NASA Awesome stuff! Installation possible via npm: npm install webpack-dashboard –save-dev webpack-dashboard – A CLI dashboard for your webpack dev server →
react-music — Make beats with React!The past few days Ken Wheeler has been tweeting some sneak peeks of what he’s been up to, after having heard that Akai was discontinuing its standalone hardware MPC drum machine offering: I did what any geek that writes React code all day long would do: I wrote a library so that I can make …
A fictional conversation on web development: I’m building a simple web app at the moment — a normal TODO app using HTML, CSS and JavaScript, and I’m planning to use jQuery. Is that the way to go? : Oh, no. That’s old school. jQuery is dead — no one uses it anymore. You need to use React now. That’s …
Continue reading ““It’s the future!” — A fictional conversation on web development”
Eric Bidelman has bundled lots of code snippets around change events that can get triggered in the browser: Changes range from simple things like DOM mutations and catching client-side errors to more complex notifications like knowing when the user’s battery is about to run out. The thing that remains constant are the ways to deal …
thisCory House: There are at least five ways to handle the this context in React. Let’s consider the merits of each approach. Use React.createClass Bind in Render Use Arrow Function in Render Bind in Constructor Use Arrow Function in Class Property Currently I’m mostly using Approach 4 (“Bind in Constructor”), but Approach 5 (“Arrow Function …
Continue reading “React Binding Patterns: 5 Approaches for Handling this“
CSS is powerful, you can do a lot of things without JavaScript. A quite commonly known example is usage of the Adjacent Sibling Selector (viz. +) to build custom radio buttons/checkboxes or tab interfaces. See the Pen CSS Custom Checkboxes / Radio Buttons by Bramus! (@bramus) on CodePen. With a few more CSS tricks such as …
AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down. By setting data-aos-* attributes on your HTML elements, you can define which animation to use, what timing to use, etc. …
In a recent project I implemented Kinetic Scrolling (aka Momentum Scrolling, aka Inertia Scrolling). For this I based myself upon the set of demos and articles by Ariya Hidayat. The article series starts at basic drag-and-scrolling, and then continues to momentum scrolling, and so forth. Even though the content is over 3 years old, it …