Posts tagged javascript, css
Filters: javascript × css × Sorted by date
If you've found web development frustrating over the past 5-10 years, here's something that has worked worked great for me: give yourself permission to avoid any form of frontend build system (so no npm / React / TypeScript / JSX / Babel / Vite / Tailwind etc) and code in HTML and JavaScript like it's 2009.
The joy came flooding back to me! It turns out browser APIs are really good now.
You don't even need jQuery to paper over the gaps any more - use document.querySelectorAll() and fetch() directly and see how much value you can build with a few dozen lines of code.
Calling LLMs from client-side JavaScript, converting PDFs to HTML + weeknotes
I’ve been having a bunch of fun taking advantage of CORS-enabled LLM APIs to build client-side JavaScript applications that access LLMs directly. I also span up a new Datasette plugin for advanced permission management.
[... 2,050 words]Button Stealer (via) Really fun Chrome extension by Anatoly Zenkov: it scans every web page you visit for things that look like buttons and stashes a copy of them, then provides a page where you can see all of the buttons you have collected. Here's Anatoly's collection, and here are a few that I've picked up trying it out myself:
The extension source code is on GitHub. It identifies potential buttons by looping through every <a> and <button> element and applying some heuristics like checking the width/height ratio, then clones a subset of the CSS from window.getComputedStyle() and stores that in the style= attribute.
So you think you know box shadows? (via) David Gerrells dives deep into CSS box shadows. How deep? Implementing a full ray tracer with them deep.
The Dropflow Playground (via) Dropflow is a “CSS layout engine” written in TypeScript and taking advantage of the HarfBuzz text shaping engine (used by Chrome, Android, Firefox and more) compiled to WebAssembly to implement glyph layout.
This linked demo is fascinating: on the left hand side you can edit HTML with inline styles, and the right hand side then updates live to show that content rendered by Dropflow in a canvas element.
Why would you want this? It lets you generate images and PDFs with excellent performance using your existing knowledge HTML and CSS. It’s also just really cool!
Shoelace (via) Saw this for the first time today: it’s a relatively new library of framework-agnostic Web Components, built on lit-html and covering a huge array of common functionality: buttons and sliders and dialogs and drawer interfaces and dropdown menus and so on. The design is very clean, the documentation is superb—and it looks like you can cherry pick just the components you are using for a pretty lean addition to your page weight. So refreshing to see libraries like this that really take advantage of modern web standards.
Bringing page transitions to the web (via) Jake Archibald’s 13 minute Google I/O talk demonstrating the page transitions API that’s now available in Chrome Canary. This is a fascinating piece of API design—it works by effectively creating a static image screenshot of the before and after states of the transition, then letting you define CSS animations that animate a transition between the two static images. By default the screenshot encompasses the full viewport, but you can instead define multiple elements within the page and apply separate transitions to them. It’s only available for SPAs right now but the final design should include support for multi-page applications as well—which means transitions with no JavaScript needed at all!
The Cleanest Trick for Autogrowing Textareas (via) This is a very clever trick. Textarea content is mirrored into a data attribute using a JavaScript one-liner, then a visibility: hidden ::after element clones that content using content: attr(data-replicated-value). The hidden element exists in a CSS grid with the textarea which allows the textarea to resize within the grid when the hidden element increases its height.
Frontend in 2017: The important parts. Keeping track of developments in the frontend and JavaScript community is pretty much a full time job here days, so I found this summary of trends and developments over 2017 very useful for trying to catch up.
What’s New In DevTools (Chrome 62). Some really neat stuff. Highlights include top-level “await” support in the console, the ability to take screenshots of specific HTML nodes, CSS grid highlighting and the ability to drop a .HAR file onto the network panel in order to view it as a waterfall.
Qwery—The Tiny Selector Engine. A quarter of the size of Sizzle (1K gzipped and minified) due to only supporting ID, class and attribute selectors. Could be useful for things like embeddable widgets and badges, where depending on a larger library is impolite.
Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5. Great demo, though calling -webkit-animation HTML5 (or even CSS3) is a bit of a stretch...
It’s interesting to me how much [Closure] feels like a more advanced version of Dojo in many ways. There's a familiar package system, the widgets are significantly more mature, and Julie and Ojan's Editor component rocks. The APIs will feel familiar (if verbose) to Dojo users, the class hierarchies seem natural, and Closure even uses Acme, the Dojo CSS selector engine.
Modernizr (via) Neat idea and an unobtrusive implementation: a JavaScript library that runs feature tests for various HTML5 features (canvas, box shadow, CSS transforms and so on) and adds classes to the HTML body element, allowing you to write CSS selectors that only apply if a feature is present. Detected features are exposed to JavaScript as boolean properties, e.g. Modernizer.multiplebgs.
TiddlyPocketBook. Paul Downey took Nat’s dinky pocketbooks CSS and combined it with TiddlyWiki to create a single page pocketbook editor.
I think you overstate the usefulness of the [jQuery Rules] plugin. Using this plugin, users are now limited by what selectors that can use (they can only use what the browsers provide - and are at the mercy of the cross-browser bugs that are there) which is a huge problem. Not to mention that it encourages the un-separation of markup/css/js.
jQuery.Rule (via) jQuery plugin for manipulating stylesheet rules. For me, this is the single most important piece of functionality currently missing from the core jQuery API. The ability to add new CSS rules makes an excellent complement to the .live() method added in jQuery 1.3.
Quickchoice—a Speed Dial clone
(via)
Lovely demonstration of the CSS transform property, as supported by modern browsers. The magic is all in the iframe { transform: scale(0.25, 0.25) translate(-1200px, -900px) }
CSSHttpRequest (via) Devious cross-domain Ajax hack that uses CSS for transport (@import rules with data URIs, but it still works in IE). Similar to JSONP but safer, since JSONP can cause arbitrary JavaScript to execute.
When Bugs Collide: Fixing Text Dimming in Firefox 2. Handy tips from Drew on fixing the glitchy text rendering in Firefox 2 when you animate opacity without breaking alpha-transparent PNGs in IE6.
Internet Explorer 8 Readiness Toolkit. The new built-in development tools look similar enough to Firebug to make me very happy. Also of interest: Selectors API (for fast getElementsBySelector), CSS 2.1 support, support for XHTML style namespaces in HTML, an interesting Web Slices feature based on the hAtom microformat and 6 connections per host (up from 2) which should make Comet easier.
jQuery 1.2.2: 2nd Birthday Present. The API stays the same, but there are some healthy speed improvements, a new way of adding custom events and (most importantly) .ready() now waits for the CSS to be ready in addition to the DOM.
Javascript CSS Selector Engine Timeline. It’s not every day you see a piece of code you wrote compared to a Ford Pinto :)
ExtInfoWindow 1.0: Ajax powered, CSS customization. Finally, a semi-official way of creating customised info windows for the Google Maps API. You lose the default shadow but gain the ability to style the entire info window using CSS.
YUI 2.4.0 released. Lots of great new features, but the one I’m most excited about is Selector: YUI finally has a CSS query engine.
jQuery 1.2. Lots of neat new stuff; my favourite new feature is “Partial .load()” which lets you pull in HTML with Ajax and then use a CSS selector to grab a subset of that page and inject it in to the DOM.
Conflicting Absolute Positions. Neat technique, although it uses CSS expressions for IE compatibility so it may break down in IE 5 and 6 when JavaScript is disabled.
dojo.query: A CSS Query Engine For Dojo. I incorrectly criticised Dojo for not having a CSS node selection tool in my talk yesterday; not sure how I missed this.
JavaScript/CSS Font Detector (via) Really clever trick: detects the fonts that you have installed by writing out some text and measuring its dimensions.
MySpace: Too Much of a Good Thing? CSS customization really was just the result of forgetting to strip HTML. They “eventually” decided to filter out JavaScript(!)