Front End web development

There is "futuristic" JavaScript that we can write. "Stage 0" refers to ideas for the JavaScript language that are still proposals . Still, someone might turn that idea into a Babel plugin and it could compile into code that can ship to any browser. For some of these lucky proposals, Stage 0 becomes 1, 2, 3, and, eventually, an official part of the language. There used to be a point where even the basic features of ES6 were rather experimental. You'd never ship an arrow function to production &dash; you'd compile it to ES5 and ship that instead. But ES6 ( aka ES2015, four years ago!) isn't experimental anymore. Its features aren't proposals, drafts, or candidates. They are finished parts of the language, with widespread support. The main sticking points with browser support are IE <= 11 and Safari <= 9. It's entirely possible you don't support those browsers. In that case, you're free to ship ES6 features to production, and ...

This extra-long CVS receipt Codepen makes me incredibly happy since my high school job was working at CVS. from Brad Frost https://ift.tt/2I5osxB

Cool little utility from Aaron Ladlage that creates solid form patterns using native HTML5 controls and attributes. from Brad Frost https://ift.tt/2U88Kcn

You scroll down to a certain point, now you want to style things in a certain way. A header becomes fixed. An animation triggers. A table of contents appears. To do anything based on scroll position, JavaScript is required right now. You watch the scroll position via a DOM event and alter an element's styling based on that position. Or, probably better if you can, use IntersectionObserver . We just blogged about all this. Now there is a new (unofficial) spec trying to bring these possibilities to CSS. I love it when web standards get involved because it sees authors like us trying to pull off certain design effects and wants to (presumably) help make it easier and more performant. I also like how this spec lists editors from Mozilla and Google and Apple. I wonder how they'll handle the infinite-loop stuff here. Like you scroll to a point, it triggers some animation, which moves some element such that it changes the scroll position, which stops the animation, which moves th...

One of the best things about design systems is you can create components that have design, development, accessibility, responsive, performance, etc best practices baked right into them. By taking care of the boring stuff, users of the design system don’t have to think about (or at least think as hard about) certain things, freeing them up to focus on more pressing tasks. You likely know that form fields must have an accompanying label , which is often handled by providing an id attribute to the label, like so: <label for="first-name">First Name</label> <input type="text" id="first-name" /> This creates a relationship between the label and the input , resulting in an accessible experience for users using assistive technologies and a better UI experience since now clicking/tapping the label focuses users into the input. Pretty cool! This is relatively easy to wrap your head around, but it can get tricky fast when you want to prov...

Brad Frost wrote about a recent experience with a website that used <input type="number"> : Last week I got a call from my bank regarding a wire transfer I had just scheduled. The customer support guy had me repeat everything back to him because there seemed to be a problem with the information. “Hmmmm, everything you said is right right except the last 3 digits of the account number.” He had me resubmit the wire transfer form. When I exited the account number field, the corner of my eye noticed the account number change ever so slightly. I quickly refocused into the field and slightly moved my index finger up on my Magic Mouse. It started looking more like a slot machine than an input field! Brad argues that we then shouldn’t be using <input type="number"> for “account numbers, social security numbers, credit card numbers, confirmation numbers” which makes a bunch of sense to me! Instead we can use the pattern attribute that Chris Ferdinandi look...

Planning for Responsive Images with some magical CSS Grid What’s new on iOS 12.2 for Progressive Web Apps by Maximiliano Firtman Bit , a distributed virtual component repository for projects built in a modular way (open source) Standardizing WASI: A system interface to run WebAssembly outside the web by Lin Clark HTTP State Tokens – draft spec by Mike West (Google) on a mechanism for”better cookies” HTML email reborn, as Google brings AMP to your inbox -“With AMP embeds, email can now contain rich interactivity, not just text and pictures”. Whoop-de-fucking-doo. Grindr ‘up for sale on security grounds’ – “US authorities expressed concern that [Kunlun Group] the firm’s ownership of the US-based firm is a national security risk”. Kunlun is the leading partner in the consortium that own Opera browsers. Idiosyncracies of the HTML parser – a fabulously geeky book by Simon Pieters aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com – a useful URL lengthener ...

Refactoring is one of those words that evokes fear in the eyes of many folks, from developers to product owners and everyone in between. It may as well be a four-letter word in many ways. It's also something that we talk about quite a bit around here because, like books on the topic , where to start with one , and the impact of letting technical debt pile up . Ben Rady has thoughts on refactoring as well, but in the context of pair programming: We pair for about 6 hours a day, every day. Everything that's on the critical path is worked on in a pair. Always. Our goal is always to get the thing we're working on to production as fast as we responsibly can, and the best way I've found to that is with a pair. Ben then dives into the process of working alongside others and how to ship software with that approach, a lot of which I think relates to front-end development best practices, too. But I also love how punk rock this team is, as they appear not to develop software...

So many web projects use npm to pull in their dependencies, for both the front end and back. npm install and away it goes, pulling thousands of files into a node_modules folder in our projects to import / require anything. It's an important cog in the great machine of web development. While I don't believe the npm registry has ever been meaningfully challenged, the technology around it regularly faces competition. Yarn certainly took off for a while there. Yarn had lockfiles which helped us ensure our fellow developers and environments had the exact same versions of things, which was tremendously beneficial. It also did some behind-the-scenes magic that made it very fast. Since then, npm now also has lockfiles and word on the street is it's just as fast, if not faster. I don't know enough to advise you one way or the other, but I do find it fascinating that there is another next generation of npm puller-downer-thingies that is coming to a simmer. pnpm is focus...

Andy Bell wrote up his thoughts about the whole web versus native app debate which I think is super interesting. It was hard to make it through the post because I was nodding so aggressively as I read: The whole idea of competing with native apps seems pretty daft to me, too. The web gives us so much for free that app developers could only dream of, like URLs and the ability to publish to the entire world for free, immediately. [...] I believe in the web and will continue to believe that building Progressive Web Apps that embrace the web platform will be far superior to the non-inclusive walled garden that is native apps and their app stores. I just wish that others thought like that, too. Andy also quotes Jeremy Keith making a similar claim to bolster the point: If the goal of the web is just to compete with native, then we’ve set the bar way too low. I entirely agree with both Andy and Jeremy. The web should not compete with native apps that are locked within a store. ...

CSS Custom Properties have been a hot topic for a while now, with tons of great articles about them, from great primers on how they work to creative tutorials to do some real magic with them . If you’ve read more than one or two articles on the topic, then I’m sure you’ve noticed that they start by setting up the custom properties on the :root about 99% of the time. While putting custom properties on the :root is great for things that you need to be available throughout your site, there are times when it makes more sense to scope your custom properties locally. In this article, we’ll be exploring: Why we put custom properties on the :root to begin with. Why global scoping isn’t right for everything. How to overcome class clashing with locally scoped custom properties What’s the deal with custom properties and :root? Before we jump into looking at the global scope, I think it’s worth looking at why everyone sets custom properties in the :root to begin with. I’ve been dec...

Need a URL shortener for your site, but aren't sure which PHP solution is best for you? Like with any web development solution, there are layers of complexity to the choice. Will I be using this shortener myself? Do public users need to access it? Do I need to inject an ad, popup, or other form of content during the process? With a shortener script in hand, you can implement a variety of solutions. Whether you're looking to make a monetized link-shortening service, track your own links throughout the web, or get more value out of sharing URLs, there's a tool for that. When choosing a self-hosted URL shortener, all of this and more come into effect. We've gathered some of the best PHP URL shortening scripts and tools out there, and highlighted their features to make your search easier. Whatever you're looking for in a shortener, there's likely to be something for you on this list. Let's jump in! 1.  AdLinkFly: Monetized URL Shortener AdLinkFly: Monetiz...

Consider, a DOM Event: const button = document.querySelector("button"); button.addEventListener("click", (event) => /* do something with the event */) We added a listener to a button click. We’ve subscribed to an event being emitted and we fire a callback when it does. Every time we click that button, that event is emitted and our callback fires with the event. There may be times you want to fire a custom event when you’re working in an existing codebase. Not specifically a DOM event like clicking a button, but let's say you want to emit an event based on some other trigger and have an event respond. We need a custom event emitter to do that. An event emitter is a pattern that listens to a named event, fires a callback, then emits that event with a value. Sometimes this is referred to as a "pub/sub" model, or listener. It's referring to the same thing. In JavaScript, an implementation of it might work like this: let n = 0; const ev...

Nick Nisi, Suz Hinton, and Kevin Ball talk about The Great Divide in JS Party #61 , then I get to join Suz and Jerod again in episode #67 to talk about it again. Dave and I also got into it a bit in ShopTalk #346 . Direct Link to Article — Permalink The post Podcasts on The Great Divide appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/2UMsIWj

HTML, CSS, and the Path to Accessible Web Design by Jennifer Riggins, quoting me. All you need to know about hyphenation in CSS by Mr Richard Rutter Sophisticated Partitioning with CSS Grid by Rob Weychert Killed By Google – a “list of dead Google products, services, and devices.” < Of course, any company has the right to withdraw products. But it's a good idea not to base your products on someone else's free APIs/ hosting etc. If it's free they owe you nothing. The Fabulous And Groovy Vadim And Vitaly Video Show – 1 hour YouTube video of Vadeem Makeev, Vitaly Friedman and me discussing CSS Nesting, AV1 codec, the new KV standard library and all the web news that’s fit for family viewing. Square leverages Weebly acquisition to bridge offline and online commerce – Square “wants to play a part in all transactions — this is how it makes its money, whether a sale takes place online or offline.” Google hit with €1.5bn fine from EU over advertising – “”Google has...

Over the course of the last four articles in this five-part series, we’ve taken a broad look at the technologies that make up the Web Components standards. First, we looked at how to create HTML templates that could be consumed at a later time. Second, we dove into creating our own custom element . After that, we encapsulated our element’s styles and selectors into the shadow DOM , so that our element is entirely self-contained. We’ve explored how powerful these tools can be by creating our own custom modal dialog, an element that can be used in most modern application contexts regardless of the underlying framework or library. In this article, we will look at how to consume our element in the various frameworks and look at some advanced tooling to really ramp up your Web Component skills. Article Series: An Introduction to Web Components Crafting Reusable HTML Templates Creating a Custom Element from Scratch Encapsulating Style and Structure with Shadow DOM Advanced Toolin...

Here’s a wonderful post by Eric Higgins all about refactoring and technical debt. He compares giant refactoring projects to being similar to Tetris: Similar to running a business, Tetris gets harder the longer you play. Pieces move faster and it becomes harder to keep up. Similar to running a business, you can never win Tetris. There is no true finish line. You only control how quickly you lose. Similar to running a business, allowing too many gaps to build up in Tetris will cause you to lose. I love this comparison, despite my mediocre Tetris skills. It does feel like even "easy" development becomes harder as technical debt grows on a project, much the same way Tetris pieces gain speed and provide little time to react as the stack grows. However, I do think perhaps I have a more optimistic view of technical debt overall. If you work slowly and carefully then you can build up a culture of refactoring and gather momentum over time. Direct Link to Article — Permalink ...

Yesterday the European Commission fined Google for almost €1.5 billion for unfairly favoring some of its online advertising services over those of its rivals — and it appears the EC isn’t done yet. One of the ongoing antitrust cases is about Android, and more specifically about Google Services, the package of Google apps such as Play, YouTube, and Chrome that Android-using hardware vendors must either adopt completely, or not at all. Getting Google Play on their devices requires vendors to adopt Services. That is the reason that almost all non-Chinese Android phones come with Google Chrome installed, even if they have another browser, such as Samsung Internet, on the homepage. Browser choice If Google Services is ruled in contravention of EU antitrust rules, that may have an impact on the Android browser market. Google itself sees that as well, and is taking measures. Yesterday, it stated in a press release : Now we’ll also do more to ensure that Android phone owners know about...

Yesterday the European Commission fined Google for almost €1.5 billion for unfairly favoring some of its online advertising services over those of its rivals — and it appears the EC isn’t done yet. One of the ongoing antitrust cases is about Android, and more specifically about Google Services, the package of Google apps such as Play, YouTube, and Chrome that Android-using hardware vendors must either adopt completely, or not at all. Getting Google Play on their devices requires vendors to adopt Services. That is the reason that almost all non-Chinese Android phones come with Google Chrome installed, even if they have another browser, such as Samsung Internet, on the homepage. Browser choice If Google Services is ruled in contravention of EU antitrust rules, that may have an impact on the Android browser market. Google itself sees that as well, and is taking measures. Yesterday, it stated in a press release : Now we’ll also do more to ensure that Android phone owners know about...