Tag: web development

Categories
Posts

Introducing StrangeLine and More RetroStrange-ness

This weekend I did some work on RetroStrange infrastructure and scheduling.

RetroStrange TV (our 24/7 streaming TV channel) which is now fully autonomous and publishes notifications to Twitter when each show or movie begins with the #RSTV hashtag. You can find my TV station code on GitHub. The current setup of two Linode 4GB servers this should provide us with enough space and power to run it basically forever at $40/month. Support via Patreon appreciated.

The next RetroStrange Movie Night is November 23rd and we’re showing film noir classic D.O.A. (1949) see the Facebook Event.

The other big RetroStrange feature is the StrangeLine. I’ve set up a phone number you can call for various RetroStrange stuff. Right now you can call to get info on the next Movie Night, or listen to the Skulking Permit by Robert Sheckley as heard on LOFI SCIFI. We’ll add and change up the content regularly, so go ahead and give ‭(814) 787-2643‬ (that’s 814-STRANGE) a call.

Categories
Links

A Deep Dive on Z-Index Usage

How do you make sure your annoying popup is shown on top of every other element in the page, when you don’t know how many there are, who wrote them, and how bad they wanted their elements to be on top? That’s when you set your z-index to 100, or maybe 999, or maybe, just maybe 99999 to be really sure yours will win.

That, at least, is how I write my CSS. In the rest of this post, we will look at millions of z indices to see what everyone else does.

Of course, if you make websites for a living you’ll find this interesting. Like most things available here.

Categories
Links

Rough.js – A “Hand-drawn” Javascript Vector Library

[Neat tool for drawing cutesy vector shapes](https://github.com/pshihn/rough):

>Rough.js is a light weight (~9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.

There’s a lot of nuance to this, too. For example, there are 5 distinct fill styles (hachure, solid, zigzag, cross-hatch, or dots) and it supports Web Workers with the [optional Workly library](https://github.com/pshihn/workly).

Categories
Links

Retrobatch, a new batch image processor from Flying Meat

[Looks like a heck of a swiss-army-knife of a tool][link]. It’s node-based, supports CoreML image classification and sorting, and yep… it supports AppleScript. FM’s suggestions for new use cases contain fun, weird, stuff like “Read an image from the clipboard, apply a drop shadow, and write it right back to the clipboard to paste into another app.”

Retrobatch is available as [a 14 day free trial][link], and [licenses start at $29.99](https://flyingmeat.com/store/). Props to Flying Meat for being one of those third-party Mac development houses that just keeps going.

[link]: https://flyingmeat.com/retrobatch/ “Retrobatch”

Categories
Links

CSS Sans

[A font constructed entirely by CSS](https://yusugomori.com/projects/css-sans/fonts). It is, essentially, a programmatic realtime typeface. I love how it degrades for older versions of IE:

It’s not what I’d consider practical for production use. Still, CSS Sans is a hell of a demonstration of how far CSS has come since Microsoft shipped Internet Explorer 3 in 1996, which was first browser to implement some of the CSS1 spec (CSS v1 was not yet a W3C recommendation).

Categories
Links

Crunch, an impressive new PNG compression tool for macOS

>[Crunch is a macOS tool](https://github.com/chrissimpkins/Crunch) for lossy PNG image file optimization. It combines selective bit depth, color type, and color palette reduction with zopfli DEFLATE compression algorithm encoding using embedded versions of the pngquant and zopflipng PNG optimization tools.

The [example images](https://github.com/chrissimpkins/Crunch#examples) are impressive. Obviously, you won’t want to use this on your archival or source images. I did a quick test on a few of sites at work, and was able to take some PNGs w/ transparent backgrounds down from 1.5mb to *130kb*. That’s a greater than 10x reduction in size. Jimminy.

Categories
Links

Layout Land: CSS Grid

Jen Simmons is doing a great job of introducing the core concepts of CSS Grid with this (https://www.youtube.com/playlist?list=PLbSquHt1VCf1x_-1ytlVMT0AMwADlWtc1). These videos have been a huge help to me getting up to speed on the state of the tech. Highly recommended.

Categories
Links

A List Apart going ad-free, patron-supported

ALA was instrumental to my start in this business. I both bless and curse them for this. [Here’s the Patreon.][pat] It’s a move I am fully in favor of. Death to ads.

>[We’re getting rid of advertisers][link] and digging back to our roots: community-based, community-built, and determinedly non-commercial. If you want to highlight local events or innovations, expand your skills, give back, or explore any other goal or idea, we’re here to support you with networking and backing from the community.

[link]: https://alistapart.com/article/new-a-list-apart-wants-you “New A List Apart wants you! · An A List Apart Article”

[pat]: https://www.patreon.com/alistapart/posts “A List Apart Patreon”

Categories
Links

Kill sticky headers

Like most web trends intended to increase “engagement” (nobody knows what this actually means), sticky bars are overused and poorly used. [Kill ’em all with this bookmarklet.][link]

[link]: https://alisdair.mcdiarmid.org/kill-sticky-headers/ “Kill sticky headers”

Categories
Links

#c0ffee is the color

A [beautiful list of valid HTML colors which are also english-language words][link]. There’s a poetry to how some of these match up; “defied / #DEF1ED” for example seems perfect somehow?

[link]: http://c0ffee.surge.sh/ “#c0ffee is the color”

Categories
Links

WebGL demo: What Are You Syncing About?

[Quite the demo][1], in-browser live rendered 3D animation and music using Three.js. Just press start. (via [waxy][waxy])

[1]: https://stianj.com/what-are-you-syncing-about/ “What Are You Syncing About?”
[waxy]: http://waxy.org “Andy Baio’s blog”

Categories
Links

Stop using device breakpoints

[Adam Silver with some good horse sense][1]. This is a surprisingly common practice here in the Year of Luigi 2017. It’s mostly surprising because we spent so much time talking about this during the original web standards push that I’d hoped it had sunk in.

[1]: https://medium.com/simple-human/stop-using-device-breakpoints-b11a87e2625c “Stop using device breakpoints – Simple = Human – Medium”

Categories
Links

flickgame

[Tiny, web-based, game engine for creating games contained to 16 drawings (each an individual color).][link]

Makes me think of WarioWare Inc.

[link]: http://www.flickgame.org/ “flickgame.org”

Categories
Links

Hex Preview

[Dead simple hex color scheme web app][link]. Just type in your hex codes, and it will update in real time. You can add any number of colors at once to see how they look together, too.

[link]: http://hexpreview.com/ “Hex Preview – the command-line-like color app”

Categories
Links

All Major Browsers Fall At Pwn2Own Day Two

[What’s that they say about castles built on sand?][link]

>Two researchers on Thursday took down the four major browsers, Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, and Apple Safari, as Pwn2Own, the annual hacking contest that runs in tandem at CanSecWest, wound down in Vancouver.

[link]: https://threatpost.com/all-major-browsers-fall-at-pwn2own-day-2/111731 “All Major Browsers Fall At Pwn2Own Day Two | Threatpost | The first stop for security news”

Categories
Links

gulp.js – the streaming build system

[Some crazy webdev magic.][link] I barely understand this enough to know that it looks awesome. Highly recommend viewing [the introduction slideshow][intro].

[link]: http://gulpjs.com “gulp.js – the streaming build system”
[intro]: http://slides.com/contra/gulp “gulp slideslow”

Categories
Links

sql.js: A port of SQLite to JavaScript

[This is ridiculous and great][link]:

>sql.js is a port of SQLite to JavaScript, by compiling the SQLite C code with Emscripten. no C bindings or node-gyp compilation here.

Once again, via [Jesper][jesper].

[link]: https://github.com/kripken/sql.js “kripken/sql.js”
[jesper]: http://waffle.wootest.net “Jesper’s blog, Waffle”

Categories
Links

slick – the last carousel you’ll ever need

[A full-responsive, CSS3-enabled, touch-ready, arrow-key supporting, draggable carousel that you can instance with one line.][link]

Having built and used probably a dozen different image slider / content carousels this one looks like it covers all of the bases and with minimal markup bullshit. Color me impressed.

[link]: http://kenwheeler.github.io/slick/ “slick – the last carousel you'll ever need”

Categories
Links

grid

>[Drag and drop library for two-dimensional, resizable and responsive lists.][link]

I’ve seen this done before but not so efficiently, responsively, and with no dependencies. (via [Jesper][jesp])

[link]: https://github.com/ubervu/grid “uberVU/grid”
[jesp]: http://waffle.wootest.net “Waffle, Jesper’s blog.”

Categories
Links

Font-To-Width

>[Font‑To‑Width (FTW!)][link] is a script by Nick Sherman and Chris Lewis that takes advantage of large type families to fit pieces of text snugly within their containers.

Can definitely see using this for some datavis stuff. There is some FOUT (Flash of unstyled text) to deal with though.

[link]: http://font-to-width.com/ “Font-To-Width”