Items tagged javascript, css
Filters: javascript × css × Sorted by date
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! # 22nd March 2024, 1:33 am
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. # 20th August 2022, 8:57 pm
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! # 13th July 2022, 4:26 pm
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. # 14th November 2020, 5:24 am
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. # 29th December 2017, 8:30 am
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. # 2nd April 2011, 8:27 am
Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5. Great demo, though calling -webkit-animation HTML5 (or even CSS3) is a bit of a stretch... # 4th May 2010, 7:27 pm
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.
— Alex Russell # 6th November 2009, 7:35 am
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. # 2nd July 2009, 10:56 am
TiddlyPocketBook. Paul Downey took Nat’s dinky pocketbooks CSS and combined it with TiddlyWiki to create a single page pocketbook editor. # 28th May 2009, 1:24 am
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.
— John Resig # 22nd February 2009, 11:11 pm
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. # 22nd February 2009, 5:53 pm
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) } # 23rd December 2008, 12:49 pm
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. # 23rd October 2008, 6:25 pm
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. # 19th June 2008, 6:09 pm
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. # 5th March 2008, 6:28 pm
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. # 15th January 2008, 8:59 am
Javascript CSS Selector Engine Timeline. It’s not every day you see a piece of code you wrote compared to a Ford Pinto :) # 14th January 2008, 1:25 pm
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. # 15th December 2007, 12:22 pm
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. # 5th December 2007, 3:32 pm
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. # 11th September 2007, 8:44 am
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. # 17th July 2007, 10:44 pm
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. # 17th May 2007, 9:40 am
JavaScript/CSS Font Detector (via) Really clever trick: detects the fonts that you have installed by writing out some text and measuring its dimensions. # 20th March 2007, 11:20 pm
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(!) # 17th January 2007, 9:09 am
Conditionally Sticky Sidebar. A nicer implementation of the trick I’m using for my add comment form; this one takes advantage of position: fixed in browsers that support it. # 20th December 2006, 1 am
YUI CSS Grid builder (via) The YUI CSS grid system can be hard to get your head around. This interactive tool makes it much easier to figure out. # 16th December 2006, 10:30 pm
Firefox 1.5 developer highlights
Firefox 1.5 Beta 1 is out, and is the most exciting browser release in a very long time. It comes with the Gecko 1.8 rendering engine, which includes a ton of interesting new features. New in this version (unless you’ve been tinkering with the Deer Park series):
[... 719 words]getElementsBySelector()
Inspired by Andy, I decided to have a crack at something I’ve been thinking about trying for a long time. document.getElementsBySelector is a javascript function which takes a standard CSS style selector and returns an array of elements objects from the document that match that selector. For example: