Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Fri, 11 Oct 2024 22:05:48 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 225069128 Safari ± https://frontendmasters.com/blog/safari-%c2%b1/ https://frontendmasters.com/blog/safari-%c2%b1/#respond Thu, 10 Oct 2024 20:30:19 +0000 https://frontendmasters.com/blog/?p=4162 There are folks that think Safari is the worst current browser. Safari is the new IE, they say. You wouldn’t have to convince Alex Russell who regularly points to the fact that there isn’t browser choice on iOS, which is direct fuel for the app store, so keeping the web down is a business strategy. ios404.com points out 58 missing APIs on iOS WebKit. Roderick E.J.H. Gadellaa has itemized all the “Safari Showstoppers” by year, which is why Alex tends to call this a “rolling problem”. Nicolas Magand thinks Safari is going downhill just for regular usage, like watching YouTube. Matt Birchler has done a bit of science which directly combats the folk wisdom that Chrome is a battery hog. Chrome is actually more efficient than Safari, so this data says.

That paints a negative pictures of Safari, but it’s not terribly hard to picture a positive picture as well, pointing to years and years of accelerated releases, forging ahead on useful platform features. Seeing cross-document View Transitions get released so quickly after starting life as a Chrome-led project, for instance, to me is a great thing. I have doubts that there is an actual internal conspiracy at Apple to keep the web down, while at the same time wishing they’d loosen up the iOS browser choice restrictions and invest even more in Safari development.

]]>
https://frontendmasters.com/blog/safari-%c2%b1/feed/ 0 4162
Web Components are Bad, Good, and OK https://frontendmasters.com/blog/web-components-are-bad-good-and-ok/ https://frontendmasters.com/blog/web-components-are-bad-good-and-ok/#respond Thu, 03 Oct 2024 14:18:24 +0000 https://frontendmasters.com/blog/?p=4111
  • Papa bear’s porridge is hot. Web Components Are Not the Future: “Web Components possibly pose the biggest risk to the future of the web that I can see.” — Ryan Carniato
  • Mama bear’s porridge is cool. Web Components Are Not the Future — They’re the Present: “If you’re convinced that your way is the best and only way, it’s natural to feel disenchanted when a decision is made that you don’t fully agree with.” — Cory LaViska
  • Baby bear’s porridge is jusssst right. Web components are okay: “I find these debates a bit tiresome. I think the fundamental issue, as I’ve previously said, is that people are talking past each other because they’re building different things with different constraints.” — Nolan Lawson
  • There is a meta conversation of “Web Components are very definitely going to be around 10 years from now while any JavaScript framework today will not” is worth considering, but pits the two directly against each other when we really don’t need to.

    ]]>
    https://frontendmasters.com/blog/web-components-are-bad-good-and-ok/feed/ 0 4111
    Interop 2025 https://frontendmasters.com/blog/interop-2025/ https://frontendmasters.com/blog/interop-2025/#respond Tue, 01 Oct 2024 15:34:00 +0000 https://frontendmasters.com/blog/?p=4104 I love the Interop project. We’re a couple of years into it, and each year it worked just like it was supposed to: features are chosen, those features are implemented (or fixed up) across all browsers. Choosing the features is somewhat democratic, and submissions are open for 2025. Remember last year I measured the positive sentiment of the open issues and compared it to what was ultimately chosen. It wasn’t terribly correlated but we did get some “popular” stuff still. There are already quite a few submissions. I’ve got some favorites already but I need to think a bit more to pick my favorites.

    ]]>
    https://frontendmasters.com/blog/interop-2025/feed/ 0 4104
    AI in Chrome https://frontendmasters.com/blog/ai-in-chrome/ https://frontendmasters.com/blog/ai-in-chrome/#comments Thu, 29 Aug 2024 14:46:51 +0000 https://frontendmasters.com/blog/?p=3680 Chrome is experimentally shipping with Gemini Nano, their smallest Large Language Model (LLM) baked right in, then offer APIs to use it.

    In Chrome, these APIs are built to run inference against Gemini Nano with fine-tuning or an expert model. Designed to run locally on most modern devices, Gemini Nano is best for language-related use cases, such as summarization, rephrasing, or categorization.

    It’s an API most, with methods you call and get responses. Raymond Camden had a look:

    const model = await window.ai.createTextSession();
    await model.prompt("Who are you?");
    
    // I am a large language model, trained by Google.

    Using AI in this way means 1) it’s fast (no network trip) 2) it works offline 3) it’s private (maybe) 4) it’s free to use.

    I admit that’s awfully compelling. I suspect this will happen and will be very highly used.

    Don’t we need to think about standards here though? What if Apple ships window.ai.instantiateIntelligence() with an .ask() method? And Firefox ships navigator.llm('dolly').enqueueQuery()? I’d just like to remind everyone that when browser just ship whatever and compete on proprietary features, everybody loses.

    ]]>
    https://frontendmasters.com/blog/ai-in-chrome/feed/ 3 3680
    No Web Without Women https://frontendmasters.com/blog/no-web-without-women/ https://frontendmasters.com/blog/no-web-without-women/#respond Tue, 25 Jun 2024 16:29:21 +0000 https://frontendmasters.com/blog/?p=2835 A very nice one page website from the Brooklyn-based studio Selman showcasing just how much web (and other) technology was rooted in innovation by women. Printable posters, too.

    ]]>
    https://frontendmasters.com/blog/no-web-without-women/feed/ 0 2835
    Comparing Interop 2024 Choices to the Popular Vote https://frontendmasters.com/blog/comparing-interop-2024-choices-to-the-popular-vote/ https://frontendmasters.com/blog/comparing-interop-2024-choices-to-the-popular-vote/#respond Thu, 08 Feb 2024 14:24:47 +0000 https://frontendmasters.com/blog/?p=750 Here’s what made the list this year:

    A little while back I measured the “popular vote” on features based on positive GitHub emoji reactions on the threads.

    So! How well did what was actually chosen stack up to the popular vote? Let’s see.

    Interesting results I’d say! It’s kind of all over the map.

    By no means to I expect the final results to map perfectly, or at all, to the popular vote. I’m sure there are a million considerations, not the least of which is how ready any of the proposals even is for interop work. For instance, as excited as I am about View Transitions, they are only implemented in Chrome, so it’s not exactly “interop” work when the implementations to compare don’t even exist. Interop is more about shoring up the cracks in existing implementations with testable results.

    So as far as “making existing implementations work better together”, I’d say this is a pretty nice list.

    I’d say I’m most excited about popover, since it’s such a common UI pattern you gotta love seeing the web platform help with that. And most surprised by the relative color syntax. I absolutely love the syntax, but I thought it had petered out for some reason so it’s delighting to see it come back to life in a way that’ll nearly guarantee we have it cross-browser.

    ]]>
    https://frontendmasters.com/blog/comparing-interop-2024-choices-to-the-popular-vote/feed/ 0 750
    The Popular Vote of Interop 2024 https://frontendmasters.com/blog/the-popular-vote-of-interop-2024/ https://frontendmasters.com/blog/the-popular-vote-of-interop-2024/#comments Wed, 03 Jan 2024 15:39:27 +0000 https://frontendmasters.com/blog/?p=305 I believe it will be sometime in January we’ll hear what the Interop Project is going to focus on in 2024. This is a cross-company effort that picks certain web platform features to make sure work perfectly across browsers, meaning us web developers will more happily choose to implement them. I think it’s awesome.

    We’ve already seen the list of proposals. Just for kicks, I went through the whole list and tally’d up the amount of positive-emoji reactions to each one (so stuff like 👍, ❤️, and 🚀, but no votes for negative or ambivalent reactions). This is to get a sense of the “popular vote” of what any random developer thinks of the proposals. I left a few reactions myself and had my own votes a while back.

    The “Votes”

    I have no idea if these “votes” will be heavily weighted by the decision makers. But at least now we’ll be able to compare what was chosen to what seemed to be the popular vote.

    ProposalPositive Votes
    JPEG XL image format498
    View Transitions Level 1135
    Scroll-driven Animations91
    [css-values-5] attr() support extended capabilities77
    Popover71
    Unit division and multiplication for mixed units of the same type within calc()66
    CSS box sizing properties with MathML Core65
    Navigation API59
    CSS scrollbar-gutter54
    Relative Color Syntax47
    WebM AV1 video codec42
    CSS Nesting42
    CSS anchor positioning40
    CSS style container queries (custom properties)36
    WebM Opus audio codec35
    WebXR34
    Masonry layout33
    text-box-trim32
    Custom Media Queries32
    <details> and <summary> elements31
    margin-trim27
    Declarative Shadow DOM26
    EXPAND :has() to include support for more pseudo-classes21
    Web Share API21
    Allowing <hr> inside of <select>19
    text-wrap: balance18
    CSS Multi-Column Layout block element breaking17
    User activation (2024 edition)17
    Trusted Types16
    Canvas text rendering and metrics (2024 edition)16
    Notifications API15
    input[type=”range”] styling14
    display: contents accessibility13
    text-wrap: pretty13
    backdrop-filter12
    P3 All The Things12
    Accessibility issues with display properties (not including display: contents)12
    CSS Typed OM Level 1 (houdini)12
    Intersection Observer v212
    Fetch Web API – Content-type parsing11
    Text Fragments11
    Media pseudo classes: :paused/:playing/:seeking/:buffering/:stalled/:muted/:volume-locked11
    Streams11
    CSS image() function11
    CSS element() function11
    css fill/stroke11
    import attributes / JSON modules / CSS modules11
    CSS Logical Properties and Values11
    Accessibility (computed role + accname)10
    font-family keywords10
    Gamut mapping10
    scrollbar-width CSS property9
    The @starting-style CSS rule8
    Resolve accessibility issues in datalist8
    Custom Highlight API8
    Scrollend Events8
    CSS Painting API Level 1 (houdini)8
    Full support of background properties and remove of prefixes8
    JSON Module Scripts7
    overscroll-behavior on the root scroller7
    HTML focusgroup attribute7
    URLPattern7
    CSS background-clip7
    WebDriver BiDi7
    <search>6
    Emoji text rendering using non-system emoji fonts6
    WasmGC6
    JavaScript Promise Integration6
    CSS text-indent6
    Canvas2D filter and reset6
    hidden=until-found and auto-expanding details6
    The transition-behavior CSS property5
    Web Audio API5
    WebRTC “end-to-end-encryption”5
    CSS color module level 45
    CSS box-decoration-break5
    Viewport-Percentage Lengths in WebViews and In App Browsers5
    CSS Module Scripts4
    The overlay CSS property4
    WebTransport API4
    font-size-adjust4
    blocking=”render” attribute on scripts and style sheets4
    Indexed DB v34
    HTTP(S) URLs for WebSocket3
    requestIdleCallback3
    document.caretPostitionFromPoint3
    WebRTC peer connections and codecs3
    CSS object-view-box3
    HTMLVideoElement.requestVideoFrameCallback()3
    Running WebAssembly Spec Tests in WPT2
    size-adjust2
    CSS :dir() selectors and dir=auto interoperability2
    Local Network Access and Mixed Content specification2
    Ready-made counter styles2
    CSS caret, caret-color and caret-shape properties2
    Storage Access API1
    CSS Zoom1
    video-dynamic-range Media Query1
    inverted-colors Media Query1
    Making the display and content-visibility CSS properties animatable0
    WIP: Typography bucket investigation0
    text-transform: full-size-kana & text-transform: full-width0
    MediaCapture device enumeration0
    Detect UA Transitions on same-document Navigations0

    What else?

    This isn’t a list of everything possible they could work on, although it’s a pretty nice list. One I was thinking about is the Contact Picker API, as I got an email from an old friend wondering about how one might do such a thing on a website these days. It’s a pretty nice API, but it’s isolated to just Chrome on Android right now, which is a bummer. But alas, not happening in Interop 2024 (not that support work might not truck anyway).

    What are your thoughts?

    If you were the final choice for Interop 2024, what would you pick?

    ]]>
    https://frontendmasters.com/blog/the-popular-vote-of-interop-2024/feed/ 2 305