Tag Archives: css

Reading list, 5

13-19th April 2015

  • tableflip dot club by (╯°□°)╯︵ ┻━┻: “We’ve watched mediocre men whiz by us on a glass escalator […] we’re denied opportunities because we aren’t “ready” for them […] It’s time we take our potential elsewhere […] We’re sharing our long memories of all the creeps who’ve hit on us and the cowards who’ve failed to promote us”. Oh wow. This resonates so much with some of my experiences, wow. Yes. More tableflips are in order!
  • Of undocumented Chrome features and unreadable W3C specs by ppk: “this sad state of affairs prevents me from writing tests and reporting their outcome on all these new, exciting technologies”, or why new undocumented APIs without examples are a tragic failure
  • The newly created Web Audio London meetup has published videos with the talks from the first meetup! they are in its YouTube channel
  • There is also a Music Hackspace in London! I haven’t been so I can’t tell how good is it.
  • More music: my pal Andy Lemon made a series of Commodore 64-based covers of 80s tunes
  • Gifsicle – command line animated GIFs. We can always add new tools for our Animated GIF battles. Its website is pretty terse but the GitHub page is more detailed: “it can merge several GIFs into a GIF animation; explode an animation into its component frames; change individual frames in an animation; turn interlacing on and off; add transparency; add delays, disposals, and looping to animations; add and remove comments; flip and rotate; optimize animations for space; change images’ colormaps; and other things”… *swooooooooning*
  • More control over text-decoration by Chris Coyier at CSS-Tricks — where the text-decoration CSS property can be further controlled with three new sub-properties: text-decoration-color, text-decoration-line and text-decoration-style. This is fantastic! I’m going to start using text-decoration-style: wavy everywhere! ;-)
  • More CSS! Gradients are sometimes hard to visualise, so Patrick Brosset wrote a tool which would do exactly that. This week, he moved it from codepen to a GitHub repository. Look at it–can you make it better?
  • Despoblados en Huesca – a website that collects all the abandoned towns and smaller settlements in Huesca, an Spanish province. I’m fascinated both by this and by the idea that some people do take over some of these settlements and make them inhabitable again. This notion of self-sufficiency has always intrigued me.
  • DiscoGS – I acquired a Sinology home NAS last week and I have been carefully rearranging and sorting my music collection. This website is a fantastic resource when you really start getting perfectionist and detailed about PROPERLY TAGGING the files.

Native smooth scrolling with JS

There’s a new way of invoking the scroll functions in JavaScript where you can specify how do you want the scroll to behave: smoothly, immediately, or auto (whatever the user agent wants, I guess).

window.scrollBy({ top: 100, behavior: 'smooth' });

(note it’s behavior, not behaviour, argggh).

I read this post yesterday saying that it would be available (via this tweet from @FirefoxNightly) and immediately wanted to try it out!

I made sure I had an updated copy of Firefox Nightly—you’ll need a version from the 28th of October or later. Then I enabled the feature by going to about:config and changing layout.css.scroll-behavior.enabled to true. No restart required!

My test looks like this:

native smooth scrolling

(source code)

You can also use it in CSS code:

#myelement {
  scroll-behavior: smooth;

but my example doesn’t. Feel like building one yourself? :)

The reason why I’m so excited about this is that I’ve had to implement this behaviour with plug-ins and what nots that tend to interfere with the rendering pipeline many, many times and it’s amazing that this is going to be native to the browser, as it should be smooth and posh. And also because other native platforms have it too and it makes the web look “not cool”. Well, not anymore!

The other cool aspect is that it degrades great—if the option is not recognised by the engine you will just get… a normal abrupt behaviour, but it will still scroll.

I’m guessing that you can still use your not-so-performant plug-ins if you really want your own scroll algorithm (maybe you want it to bounce in a particular way, etc). Just use instant instead of smooth, and you should be good to go!


Update: Frontender magazine translated this post to Russian.

On CSSConf + JSConf 2014

TL;WR*: a mostly social event, great for meeting the authors of those modules you see scroll past when you run npm install and it installs half of the internet. Also, lots of presentations on somewhat hipster stuff which I not always understood, but that’s great–I like not understanding it all from the get go, so I can learn something. And some discussion about physical and mental health and better community building and other important non purely technical stuff that usually never gets the chance to be discussed in tech conferences.
Continue reading

“Mozilla’s new technologies” (for Mozilla Power’13)

I was going to “manifest” myself in Cairo via the powers of videoconferencing for Mozilla Power’13, but connectivity issues happened, so I recorded a screencast with my talk:


Here’s hoping the Mozilla Egypt community is having a great event :-)

Do send me any questions you might have about the topics I discussed, and I’ll do my best to answer them!