A rather geeky/technical weblog, est. 2001, by Bramus
The Stack Overflow team walks us through their Dark Mode implementation. Building dark mode on Stack Overflow → 💡 Writing a JS app (React / Angular / Vue / …) and looking to implement Dark Mode? No worries, I’ve got you covered.
Video from Kai Sassnowski’s talk at Laracon EU 2019: The goal of this talk is to explain how dependency containers work by building our own. We start out by building the simplest DI container possible to demonstrate the underlying concept. Most people will be surprised about how little code this actually takes (3-4 effective lines …
Continue reading “Demystifying Dependency Injection Containers”
One of the additions that shipped in Chrome 80 is the ability to link to Text Fragments. To easily create such links, I stumbled upon the “Copy Text Fragment URL” Plugin which adds an extra option to the context menu. Handy! Makes me wonder why it’s not a default Google Chrome feature. Chrome Web Store: …
Continue reading “Easily link to Text Fragments in Chrome with the “Copy Text Fragment URL” Plugin”
In this post Andréas Hanss gives us a tour on Flipper. Flipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface. To add flipper support to your React Native project, I recommend the “Add Flipper Support” section from the Upgrade to React …
Here in Belgium schools are locked down due to #coronavirus. With the school of my two oldest kids now switching to remote teaching, I took the time to set up my old MacBook Pro (model late 2008) for my two oldest kids to use. That didn’t go without any hiccups though: the OS X installer …
TIL: When working with namespaced files in PHP it’s a huge performance win when using fully-qualified function calls. ~ If you’re calling is_null in your code, PHP will first check for the function’s existence in the current namespace. If not found there, it will look for the function in the global namespace. This extra check …
In this series, step by step, I’ll show you how to build web applications with Laravel 6. We’ll start with the basics and incrementally dig deeper and deeper, as we review real-life examples. Once complete, you should have all the tools you need. Let’s get to work! All 68 videos in this course, totalling 8:59:43 …
Mariko Kosaka has created a small PWA that fills your screen with water over a duration of 20 seconds. After first using CSS animations to animate the water (video), she eventually turned to Houdini‘s CSS Paint API Wash your hands for 20 seconds →
<watched-box> Custom Element
Heydon Pickering has created <watched-box>: I wanted a simple, declarative container queries solution, and here it is: ❤ Custom Element + ResizeObserver 🥣 Use and mix together any CSS length units 🖼 Orientation supported 🧚♀️ ≅1.5KB minified Once imported you can use it as follows: <watched-box widthBreaks="70ch, 900px" heightBreaks="50vh, 60em"> <!– HTML and text stuff …
Continue reading “Container Queries with the <watched-box> Custom Element”
The react-intersection-observer package is an easy way to work with the Intersection Observer API in React. It comes with both a Hooks, render props and plain children implementation. import React from 'react' import { useInView } from 'react-intersection-observer' const Component = () => { const [ref, inView, entry] = useInView({ /* Optional options */ threshold: …
Continue reading “useInView – A React Hook to work with IntersectionObserver”