A rather geeky/technical weblog, est. 2001, by Bramus
Yesterday Ana Tudor wondered if should could write CSS selectors using less-than and greater-than logic: CSS attribute selector wish:[data-code>2][data-code<19] { /* styles */ }[data-code>=19][data-code<65] { /* other styles */ }and so on… — Ana Tudor (@anatudor) October 12, 2016 Unfortunately this kind of selectors don’t work (yet). Until then one could use JavaScript to tackling …
Continue reading “CSS attribute value less than / greater than / equals selectors”
Today, Facebook – in collaboration with Google and others – released Yarn, a new package manager for JavaScript. Introducing Yarn: a new package manager for JavaScript from @fbOpenSource, @tildeio, @googledevs & @exponentjs. https://t.co/2LfN5OXjOv — Yarn (@yarnpkg) October 11, 2016 In comparison to npm, the Yarn website pushes these three main benefits forwards: Speed Reliability Security …
For a recent project we did at work I needed outlined text. Using text-shadow you can achieve the desired effect, but one must admit: it’s ugly. Some browsers however (Webkit) support the text-stroke property which gets a much nicer result. Here’s a demo pen: See the Pen CSS Transparent and Outlined Text by Bramus! (@bramus) …
From StackOverflow: It’s possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color? Using an (inset) text-shadow in combination with transparent text color this indeed is possible: With some more CSS – and an extra attribute – it’s possible to even achieve a (faux) …
Continue reading “Emoji Silhouettes and Emoji Outlines with CSS”
A typical issue with the well supported Viewport Relative Units (you know: vh, vw, vmin, and vmax) that bothers me a lot is that MobileSafari (Safari on iOS) takes the height of the address bar into account for 100vh. Take a look at the footer of that first block in the screenshot below: since its …
Continue reading “Making viewport units work properly in Mobile Safari”
Today Wes Bos tweeted a few fun things one can do with JavaScript and Emoji: It’s possible to spread emoji sequences into their single parts: […’👨👩👧👦’] // [“👨”, “”, “👩”, “”, “👧”, “”, “👦”] Combining Emoji is also possible: [“👨”, “”, “👩”, “”, “👧”].reduce((prev, curr) => prev + curr) // “👨👩👧” And oh, you can …
At work we’ve been building quite some stuff on top of React the past few months. We use Grunt (and more recently Webpack) to run browserify with the babelify transform to transpile our ES6 code into ES5. Earlier this week I came to the point where I wanted to distribute a built component as a …
Continue reading “Distributing your React Component as a Standalone Version”
Chris White, Laravel Developer: For most situations using S3 is a no brainer, but the majority of developers transfer their user’s uploads to S3 after they have received them on the server side. This doesn’t have to be the case, your user’s web browser can send the file directly to an S3 bucket. You don’t …
Continue reading “Uploading files using AJAX directly to S3”
UPDATE 2017.12: For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it. html, body { overscroll-behavior-y: none; } Safari however does not support it … UPDATE 2021.06: The workaround below no longer seems to work in recent iOS/MobileSafari versions …
Continue reading “Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)”
Today I learned: In JavaScript it is possible to use the + operator alone before a single element. This indicates a math operation and tries to convert the element to a number. If the conversion fails, it will evaluate to NaN. This is especially useful when one wants to convert a string to a number …