Olof

Interested in Web 2.0, CSS3, HTML5, Javascript and the open web.

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Tip! 📜

You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥

.search {
animation: shrink;
animation-timeline: scroll();
animation-range: 0 calc(var(--header-height) * 0.5);
}
@​keyframes shrink {
to { width: calc(100% - var(--button-size); }
}

The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙

For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡

header {
animation: shadow;
animation-timeline: scroll();
animation-range:
var(--header-height)
calc(var(--header-height) * 1.5);
}
@​keyframes shadow {
to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}

Then you have the little extras! 🧸🎈

Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨

Give it a try! ⭐️

@CodePen link below! 👇

[icarus.gk ❯ @icarusgkx]

Vue 3’s most underrated feature 🫣

Frameworks where you can do this:
✅ Vue
✅ Solid.js
🚫 React
🚫 Svelte
🚫 …

[Node.js @nodejs]

Are you currently hiring for a role that includes using Node.js? Reply with a link to the opening and any relevant context.

If you're not, we'd appreciate a retweet for visibility 💚

[Jonathan Neal @jon_neal]

Really, how are you writing ShadowDOM these days?

[♇4n3💬 @Pl4n3]

Experimenting with web speech coding. For when there is no keyboard (eating/vr). #javascript https://t.co/qdm8GUpej4

[Jonathan Neal @jon_neal]

I wrote a PostCSS plugin to create & maintain advanced style guides with CSS and Markdown https://t.co/GRb9uDjagr

[JavaScript Daily @JavaScriptDaily]

Installing Node.js v4.0.0 on a Raspberry Pi: http://t.co/JBQBPF4vrQ

[Olof @viking_olof]

Use this simple tool http://t.co/ZEYnjzo0Y2 to tag your links for Google Analytics. Predefined (fb,t,lin) and custom sources #analytics

[Keen @keen_io]

Open source dashboard templates for bootstrap https://t.co/4qbYj8rqv4

[Olof @viking_olof]

This is my tweet from my new laravel twitter application

[Olof @viking_olof]

Ristrutturare i CSS: aggiustare e modularizzare | CSS HTML.it http://t.co/S5dJhHII8P #css #webdesign

[Olof @viking_olof]

30 Awesome Free CSS3 Text Effects, Tutorials and Techniques http://t.co/xjCZHL4mkS #css #webdesign

[Olof @viking_olof]

55 Free CSS3 Animated Buttons Tutorial and Techniques of 2013 http://t.co/ahhDMHps1M #css #webdesign

[Olof @viking_olof]

How To Make Wordpress Images Responsive http://t.co/cH0COQOitw #wordpress

[Olof @viking_olof]

How To Disallow Specific Shortcodes in Post Content http://t.co/RkYcRA8e70 #wordpress

[Olof @viking_olof]

PHP Tutorial for Beginners | Webmonkey | http://t.co/KgkSJAVtVP http://t.co/7ZI4KPN71f #php

[Olof @viking_olof]

Learn PHP in 24 Hours http://t.co/nSiLRLnK5f #php

[Olof @viking_olof]

Best way to learn PHP for Absolute Beginners! | Onvard http://t.co/iz3tntNPeZ #php

[Olof @viking_olof]

Build Your Own Database Driven Web Site Using PHP http://t.co/0lsl6nkhP7 #php

[Olof @viking_olof]

Creando archivos pdf con php http://t.co/sWENXDlduc #php