fridayfrontend

fridayfrontend, 11 days ago to random

The deskilling of web dev is harming the product but, more importantly, it's damaging our health – this is why #burnout happens: "You’re expected to follow half-a-dozen different specialities, each relatively fast-paced and complex in its own right, and you’re supposed to do it without cutting into the hours where you do actual paid web development." https://www.baldurbjarnason.com/2024/the-deskilling-of-web-dev-is-harming-us-all/

fridayfrontend, 1 month ago to webdev

The Front End Developer/Engineer Handbook 2024: "This handbook is a resource for both seasoned professionals and newcomers in the field of front-end web development to learn and explore the practice of front-end development." #HTML #CSS #JavaScript
https://frontendmasters.com/guides/front-end-handbook/2024/

fridayfrontend, 1 month ago to CSS

Help Us Invent #CSS Grid Level 3, aka “Masonry” Layout: "With such fundamental disagreements at play, no browser can ship. We must first come to consensus in the CSS Working Group. This is where we need your help. We’d like real-world web designers and developers to weigh into the discussion, and express what it is that you want. Your input really can make a difference." https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

fridayfrontend, 2 months ago to CSS

In today's lunch video, these #CSS best practices might be holding you back! "We’re told about a lot of CSS best practices early on, and while some of them can be very useful, I feel like many of them are more like training wheels that are there so we can focus on other stuff, and eventually it’s a good idea to take them off!" https://www.youtube.com/watch?v=7Q7qlquojQk

fridayfrontend, 2 months ago to webdev

An #HTML Switch Control: "Generally, we recommend using a switch when the user understands the element as a setting that is either 'on' or 'off'. A checkbox is well suited for when the user would understand the element as something to be selected." https://webkit.org/blog/15054/an-html-switch-control/

fridayfrontend, 2 months ago to CSS

#CSS Custom properties with defaults: 3+1 strategies: "My preferred solution is what I call pseudo-private custom properties. You use a different property internally than the one you expose, which is set to the one you expose plus the fallback." https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/

fridayfrontend, 3 months ago to CSS

Today's lunch video is "The #CSS Cascade: A (re)introduction." -= "I recorded a talk today in which I (re)introduce you to the Cascade. It covers well-known and not-so-well-known basics as well as cascade layers and scoping. Enjoy! " https://vimeo.com/916686376

fridayfrontend, 3 months ago to CSS

Okay, Color Spaces: "When I was a kid, art teachers taught me about The Color Wheel with its Three Primary Colors and its Three Secondary Colors and while that did help me make greenish paint when I only had yellow and blue, it also gave me some wrong ideas about color." #CSS https://ericportis.com/posts/2024/okay-color-spaces/#fn-2-mark

fridayfrontend, 3 months ago to CSS

Tailwind vs Semantic CSS: "This study compares two sites with identical design: the commercial Spotlight template from the developers of #Tailwind vs the same site with semantic #CSS. The semantic version is 8× smaller, renders faster, and requires no JS bundlers/tooling." https://nuejs.org/blog/tailwind-vs-semantic-css/

fridayfrontend, 4 months ago to accessibility

Accessible notifications with ARIA Live Regions: "We’re going to learn about ARIA live regions — the accessible notifications system that enables us to make dynamic web content more accessible to screen reader users." #a11y https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/

fridayfrontend, 4 months ago to CSS

Nested Dark Mode via #CSS Proximity: "Nested theming is the case where the page is styled in one theme but sub-sections of it use another theme. A practical example of nested theming could be a scrolling product page that has discrete sections, some on a light background and some on a dark background, or maybe a rich editor web app that allows users to preview content in different themes." https://jwdallas.com/posts/nesteddarkmode/

fridayfrontend, 4 months ago to webdev

Media Queries in #HTML Video: "I decided to try serving different video using some of the features we use for serving content based on user preferences and accessibility features. I made a video. Then I made alternate versions for assorted media queries. While this would be onerous for some organizations to do for many of their videos, I wanted to at least test both the support and the practicality for teams that can wrangle the budget to give this a shot." https://adrianroselli.com/2023/12/media-queries-in-html-video.html

fridayfrontend, 4 months ago to accessibility

Baseline Does Not Really Cover Baseline Support: "The relatively new Web Platform Baseline offering does not track browser support for accessibility features built into the web platform. If you need to understand whether browsers support #a11y features as your own base level set of requirements, for legal or other compliance reasons, then Web Platform Baseline does not represent a baseline." https://adrianroselli.com/2023/12/baseline-does-not-really-cover-baseline-support.html

fridayfrontend, 6 months ago to webdev

How to Use Responsive #HTML Video (...and Audio!): "Now that responsive HTML video delivery works across all browsers, let's look at how to use it" https://scottjehl.com//posts/using-responsive-video/

fridayfrontend, 6 months ago to webdev

#HTML #WebComponents Are Having a Moment: "Everyone’s talking about HTML Web Components, and I think it’s the start of something magical!" https://cloudfour.com/thinks/html-web-components-are-having-a-moment/

fridayfrontend, 6 months ago to CSS

#CSS Responsive Multi-Line Ribbon Shapes: "In this second installment of this brief two-part series, we look at two additional ribbon variations that introduce techniques for masking a repeated background gradient in CSS." https://www.smashingmagazine.com/2023/11/css-responsive-multi-line-ribbon-shapes-part2/

fridayfrontend, 6 months ago to webdev

#HTML #WebComponents - "The grain of a React component is not the grain of a web component. Their design prioritize different functionality and forms of use. If you try to use one like the other, you’ll fight the direction of their natural grain." https://blog.jim-nielsen.com/2023/html-web-components/

fridayfrontend, 6 months ago to webdev

#HTML #WebComponents: "When you wrap some existing markup in a custom element and then apply some new behaviour with #JavaScript, technically you’re not doing anything you couldn’t have done before with some DOM traversal and event handling. But it’s less fragile to do it with a web component. It’s portable. It obeys the single responsibility principle. It only does one thing but it does it well." https://adactio.com/journal/20618

fridayfrontend, 7 months ago to webdev

Blinded By the Light DOM: "You just take some normal #HTML markup, wrap it with a custom element, and then write some #JavaScript to add capabilities which you can then style with regular #CSS! Everything’s of the Light Side of the Web. No need to pierce the Vale of Shadows or whatever." https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/

fridayfrontend, 7 months ago to javascript

Web Components Will Outlive Your #JavaScript Framework: "If we're building things that we want to work in five or ten or even 20 years, we need to avoid dependencies and use the web with no layers in between." https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/

fridayfrontend, 7 months ago to CSS

#CSS relative color syntax: "Create new colors based on another color's channels and values. Relative color syntax creates a smooth path for color manipulation within CSS, offering ways for authors and designers to lighten, darken, desaturate, adjust opacity, and more!" https://developer.chrome.com/blog/css-relative-color-syntax/

fridayfrontend, 7 months ago to CSS

#CSS Findings From Photoshop Web Version: "A few weeks ago, Adobe released a web version of Photoshop that is built with the web technologies like WebAssembly, web components, P3 colors, and a lot more. I thought it would be interesting to see how the CSS was written for such a massive app like Photoshop." https://ishadeed.com/article/photoshop-web-css/

fridayfrontend, 7 months ago to CSS

Color Me Curious: "Asking 'what color space should I use?' is sort of like asking 'what’s the best font to use?' Context here is everything and the answer totally depends on what kind of problem you’re trying to solve. Color spaces are designed to solve different kinds of problems." #CSS https://buttondown.email/cascade/archive/002-color-me-curious/

fridayfrontend, 7 months ago to webdev

The #HTML picture element for unexpected art direction: "What I wasn't expecting was that changing the image for light and dark themes is also art direction, and therefore a good use for the picture element." https://weblog.anniegreens.lol/2023/10/the-picture-element-for-unexpected-art-direction

fridayfrontend, 8 months ago to accessibility

Today's lunch video is "Accessibility Is Easy: Except for When It Isn’t." "Not everything that you need to build on your site has a ready-made solution in the form of an HTML element or a recognised and documented pattern. Sometimes, things can get a little more tricky." #a11y https://www.youtube.com/watch?v=bEqRp9GMC0g