lukem, to webdev

Feels good to remove a blob of JavaScript due to CSS offering the exact feature I need.

whatinput.js out, :focus-visible in.

edhowland,

@lukem yes, I feel that is often a better solution than JavaScript, especially for designing with in mind.

kizu, to webdev
@kizu@front-end.social avatar

I wrote a new article: “Future : Wishes Granted by Scroll-driven Animations”.

https://kizu.dev/scroll-driven-animations/

Stuck state for sticky headers?

“Proper” solution for scrolling shadows?

Highlighting the currently shown sections in a Table of Contents?

All these things could become possible with the new scroll-driven animations spec.

A video recording of an example featuring sticky headers. Scrolling through the example demonstrates how the they get a background and shrink in size when getting stuck, as well as multiple sticky headers combining into one when they get stuck together.

kizu,
@kizu@front-end.social avatar

Thanks to @bramus pointing out the (not yet edited into the specs) timeline-scope, I managed to make the “table of contents” example from my Tuesday's article work much better and without anchor positioning!

https://kizu.dev/scroll-driven-animations/#table-ofcontents-with-highlighted-current-sections

Also, as a bonus, I added scroll synchronization to the example — I couldn't believe it worked at first.

Future of is so nice.

A video of an example from the article: a scrollbox with a scrollable table of contents for some headers and sections. When the content area is scrolled, the items corresponding to the currently visible sections are highlighted in the table of contents. The table of contents is also automatically scrolled to keep the highlighted items in the center.

smallcircles, to webdev
@smallcircles@social.coop avatar

"Towards a Modern Web Stack"

This is interesting.

Ian "Hixie" Hickson editor of HTML specification for 10 years, in January 2023 criticises the use of , , for intricate applications, and proposes an alternate approach based on 4 lower-level :

  1. (for )

Gets criticised for it and defends his proposal on HN: https://news.ycombinator.com/item?id=34612696

(Correct link to the Google Doc is in bottom comment by Hixie)

dekkzz76,
@dekkzz76@emacs.ch avatar

@smallcircles

my first take reading Ian Hickson's comments is this proposal is a reaction the the failure of the developer community to do the right thing, gonna have a longer think about it all

his proposal link is here:

https://docs.google.com/document/d/1peUSMsvFGvqD5yKh3GprskLC3KVdAlLGOsK6gFoEOD0/edit?resourcekey=0-bPajpoo9IBZpG__-uCBE6w#heading=h.a5aaep4zlnxp

smallcircles,
@smallcircles@social.coop avatar

"This document proposes to enable browsers to render web pages that are served not as HTML files, but as Wasm files, skipping the need for , , and parsing in the rendering of the page, by having the , , and APIs exposed directly to . To enable developers to continue to use the wider range of APIs exposed on the web, a mechanism to "escape" to a JavaScript environment would need to be made available as well."

sarajw, (edited ) to random
@sarajw@front-end.social avatar

Geeking with @hl and . He's on an ageing macbook. Have realised my /basic site isn't working too well on his version of safari (that can't be updated)... Oop.

At least it's only my personal site. The headings aren't working as I want in firefox either shakey-fist

I've added a bunch of prefixes to background-clip and linear-gradient, but no luck yet...

sarajw,
@sarajw@front-end.social avatar

Ugghhh. How can I do a @supports query with regard to the fancy new gradients where you can specify going through the hue wheel the longer or shorter way round?

amxmln, to webdev
@amxmln@mastodon.design avatar

I really like how we’ve started calling certain things in names like the “lobotomised owl” and “holy albatros” as if they were some sort of arcane spells. 🤣 Brings a bit of magical ✨sparkle✨ back into programming. 😊

davidbisset, to webdev
@davidbisset@phpc.social avatar
chrisshaw, to wordpress

How to get two mobile menus on a free WordPress theme, like this:

https://diary.uncountable.uk/


1/2

symfonystation, to Symfony
@symfonystation@phpc.social avatar

Explore the March 17, 2023 @symfonystation Communiqué of Symfony, Drupal, PHP, Fediverse, and Cybersecurity news. https://www.symfonystation.com/Symfony-Station-Communique-17-March-2023 :symfony: :elephpant_purple: :drupalicon: :wordpress: :fediverse: :php: :phpstorm: :phpstan: :apiplatform: 🇺🇦

symfonystation, to Symfony
@symfonystation@phpc.social avatar

Explore today's @symfonystation Communiqué of Symfony, Drupal, PHP, Fediverse, and Cybersecurity news. https://www.symfonystation.com/Symfony-Station-Communique-02-June-2023 :symfony: :elephpant_purple: :drupalicon: :fediverse: :php: 🇺🇦

u0421793, to random
@u0421793@functional.cafe avatar

CSS: I just can’t get safari macOS or iOS to give sane results with

background-color: color-mix(in oklch shorter hue, var(--theme-support-chip-colour), var(--scheme-base-flatTint));

Where
--theme-support-chip-colour: var(--colour-chip-richthickYellow);
Eg in light mode it’d be
--colour-chip-richthickYellow: oklch(73.7% 0.174 83.07 / var(--alpha));
--scheme-base-flatTint: oklch(100% 0 0);
(Alpha is 1 for now)

Supposed to be mixing white with yellow – I get violet

All my background gradients are insane because of this misbehaviour

nhoizey, to webdev French
@nhoizey@mamot.fr avatar
mobileatom, to Symfony
@mobileatom@me.dm avatar

Explore today's @symfonystation Communiqué of Symfony, Drupal, PHP, Fediverse, and Cybersecurity news. https://www.symfonystation.com/Symfony-Station-Communique-26-May-2023 #Symfony #SymfonyCasts #PHP #Drupal #Cybersecurity #Fediverse #Mastodon #CSS :symfony: :elephpant_purple: :drupalicon: :fediverse: :php: 🇺🇦

ctietze, to random
@ctietze@mastodon.social avatar

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

"Margins don't collapse in a container with display set to flex or grid."

Damn you, ! ✊

jasonnab, to webdev

My website is hand crafted and artisan
Sourced from localhost
Made with 100% organic HTML; and non-GMO CSS (the CSS is not organic sadly)

davidbisset, to webdev
@davidbisset@phpc.social avatar

Nice.

A brief tutorial explaining how to move an element along a given path, using the offset-path property.

https://rauno.me/craft/graph-slider

nhoizey, to webdev French
@nhoizey@mamot.fr avatar
tylermumford, to webdev
@tylermumford@mas.to avatar

There's a new Slow Animation for Focusing! This one's a rainbow. 🏳️‍🌈

michael, to webdev
@michael@thms.uk avatar

TIL you can watch transitions in slow mo using chrome dev tools. Super useful:

https://blog.jim-nielsen.com/2023/slow-motion-animations-with-chrome-devtools/

mobileatom, to webdev
@mobileatom@me.dm avatar

Responsive CSS Layout Grids without Media Queries via SitePoint.
https://www.sitepoint.com/responsive-css-layout-grids-without-media-queries/

mobileatom, to webdev
@mobileatom@me.dm avatar

Quick Tip: Shipping Resilient CSS Components via SitePoint.
https://www.sitepoint.com/quick-tip-shipping-resilient-css-components/

symfonystation, to Symfony
@symfonystation@phpc.social avatar

Explore today's @symfonystation Communiqué of Symfony, Drupal, PHP, Fediverse, and Cybersecurity news. https://www.symfonystation.com/Symfony-Station-Communique-02-June-2023 :symfony: :elephpant_purple: :drupalicon: :fediverse: :php: 🇺🇦

chrisshaw, to wordpress

For the main menu, just use the standard header menu in your theme, maybe with a bit of styling.

Then in the off canvas section (accessible via trigger in kadence, but could be different in other themes) add the HTML widget.

In there you can add whatever links you want. It's a menu maintained separately from the menu functions, so if any of the links change, you'll have to update manually.


2/2

iamdtms, to webdev
@iamdtms@mas.to avatar
mobileatom, to Symfony
@mobileatom@me.dm avatar

Explore today's @symfonystation Communiqué of Symfony, Drupal, PHP, Fediverse, and Cybersecurity news. https://www.symfonystation.com/Symfony-Station-Communique-02-June-2023 🇺🇦

  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • provamag3
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • anitta
  • Leos
  • tester
  • JUstTest
  • All magazines