web
Ideas, thoughts and links about web developement.
Posts
Blog Migration
Links
Coding In The Age Of Code Components
This is the age of code components. Web, React, Angular, Vue, and even Node components are the building blocks of pretty much everything these days.
11-05-2017Beyond the Bubble: Real world performance – Building Calibre
Something that has really struck me this past year is how little we as a web industry know about the ways in which people (yep, real people, not other web developers) access the Internet, and tangentially, how antiquated our methods of delivering content to users really are.
26-05-2017traintimes.org.uk performance notes
On Twitter last week, Bruce Lawson asked people to write up their performance optimisations. I’ve had some bits of time to make some improvements to traintimes.org.uk, and so here is a short essay/notes (I don’t get much free time at present for various small-person-shaped reasons) on how this site is currently seven times quicker than the official site on a mobile:
26-05-2017ManifeStation - Automagically create your Web App Manifest
enter a domain to have a W3C Web App Manifest automagically generated from its existing HTML
15-06-2017A beginner's guide to designing interface animations | Creative Bloq
Motion design is a necessary skill for the modern web. With web animation thriving, everyone from UX designers to front-end developers needs an appreciation for what motion can add to their work.
28-06-2017Designing state machines | Drivy Engineering
State machines are a very powerful tool but are often underused in web development. The design process forces you to think hard about how you want to model your data, about the different objects lifecycles, about the way you want to expose your data and communicate with your whole team, and about the upcoming evolutions. Going through this process takes a lot of efforts but is worthwile, it brings a lot of structure to your code and your team. Also, the actual implementation of a state machine is usually very simple.
28-06-201710 guidelines to improve your web accessibility | Aerolab
There’s a quote by Tim Berners-Lee, Director of W3C and inventor of the World Wide Web, that says, “The power of the web is in its universality”. As people who make a living by making websites, it’s our responsibility to ensure everyone has access to them. Web accessibility seems like a tall order on paper, but it’s definitely much easier than it sounds.
30-08-2017Betting on the Web
Note: I just spoke at Coldfront 2017 about why I’m such a big proponent of the Web. What follows is essentially that talk as a blog post (I’ll add a link to the video once it is published).
15-09-2017The State of the Web – Karolina Szczur – Medium
The Internet is growing exponentially, and so is the Web platform we create. Often though we fail to reflect on the greater picture of connectivity and contexts the audience of our work might find themselves in. Even a short glance at the state of the World Wide Web shows that we haven’t been building with empathy, situation variability awareness, let alone performance in mind.
25-09-2017web-conferences-2018/README.md at master · asciidisco/web-conferences-2018
A list of Web & JavaScript related conferences happening in 2018. Please send in a PR if you want to add a new event or fix/enhance the info given for existing ones. Thank you 🙏
14-12-2017Learn Svelte
Svelte is a tool for building fast web applications.It is similar to JavaScript frameworks such as React, Angular, Vue, and Ractive, which all share a goal of making it easy to build slick interactive user interfaces.But there's a crucial difference: Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.
13-02-2019Accessibility Insights
Solve accessibility issues before they reach your customers.
13-03-2019An Introduction to Web Components | CSS-Tricks
Front-end development moves at a break-neck pace. This is made evident by the myriad articles, tutorials, and Twitter threads bemoaning the state of what once was a fairly simple tech stack. In this article, I’ll discuss why Web Components are a great tool to deliver high-quality user experiences without complicated frameworks or build steps and that don’t run the risk of becoming obsolete. In subsequent articles of this five-part series, we will dive deeper into each of the specifications.This series assumes a basic understanding of HTML, CSS, and JavaScript. If you feel weak in one of those areas, don’t worry, building a custom element actually simplifies many complexities in front-end development.
19-03-2019We are actively destroying the web | Go Make Things
One of the central themes of my talk on The Lean Web is that we as developers repeatedly take all of the great things the web and browsers give us out-of-the-box, break them, and then re-implement them poorly with JavaScript.
19-03-2019ngrok - secure introspectable tunnels to localhost
Public URLs for exposing your local web server.Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall.
29-03-2019Responsible JavaScript: Part I · An A List Apart Article
By the numbers, JavaScript is a performance liability. If the trend persists, the median page will be shipping at least 400 KB of it before too long, and that’s merely what’s transferred. Like other text-based resources, JavaScript is almost always served compressed—but that might be the only thing we’re getting consistently right in its delivery.
01-04-2019Accenture sued over website redesign so bad it Hertz: Car hire biz demands $32m+ for 'defective' cyber-revamp • The Register
Rental firm fuming after consultancy 'never delivered a functional site or mobile app'
24-04-2019Adopt a Design System inside your Web Components with Constructable Stylesheets
As someone who makes stuff on the web, there are two things that I’ve been seeing quite a bit lately: Web Component discussion and CSS debates. I think that Web Components, or more specifically the Shadow DOM, is poised to solve some long-standing CSS problems. I’m a big fan of Web Components. In fact, I’m just wrapping up a book with Manning Publications now, called Web Components in Action.
07-06-2019Sustainable Web Manifesto
“If the Internet was a country, it would be the 6th largest polluter” 1
02-07-2019WebComponents.dev
Reusable Web Components and Design Systems are hardBuilding, Maintaining and Sharing reusable Web Components or Design Systems are expensive tasks. The build setup is a PhD project, the tooling is straigth out of FisherPrice® and packaging everything together requires knowledge that goes way beyond useful front-end development skills.We believe there is a better way...WebComponents Studio is on a mission to streamline and empower the creation of Web Components and Design Systems. Reusable components are about productivity and agility. Let's forget about the unnecessary complexity and slowdown of the underlying plumbing and let's focus on coding beautiful components with built-in quality, accessibility, user-experience and developer-experience.Join the discuss on Slack
12-07-2019Web Font Optimization | Web Fundamentals | Google Developers
This article contains contributions from Monica Dinculescu, Rob Dodson, and Jeff Posnick.Typography is fundamental to good design, branding, readability, and accessibility. Webfonts enable all of the above and more: the text is selectable, searchable, zoomable, and high-DPI friendly, providing consistent and sharp text rendering regardless of the screen size and resolution. Webfonts are critical to good design, UX, and performance.
11-09-2019WebReflection/wicked-elements: Components for the DOM as you've never seen before
Components for the DOM as you've never seen before
11-11-2019Metrics
User-centric performance metrics are a critical tool in understanding and improving the experience of your site in a way that benefits real users.
31-01-2020(4) Why Web Browsers Are FREE - YouTube
Why Web Browsers Are FREE
09-02-2020necolas/react-native-web: React Native for Web
"React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM.
11-08-2020
31-12-2020Innovation in the web without sacrificing Accessibility – INNOQ
Ready Player Me - Personal 3D Avatars for Games and VR.
Level up your virtual experience with selfie-based avatars that people love and emotionally connect with.
20-01-2021GitHub - goldbergyoni/nodebestpractices: The Node.js best practices list (January 2021)
this repository is a summary and curation of the top-ranked content on Node.js best practices, as well as content written here by collaborators
21-01-2021How to Play and Pause CSS Animations with CSS Custom Properties | CSS-Tricks
Let’s have a look CSS @keyframes animations, and specifically about how you can pause and otherwise control them. There is a CSS property specifically for it, that can be controlled with JavaScript, but there is plenty of nuance to get into in the details. We’ll also look at my preferred way of setting this up which gives lots of control. Hint: it involves CSS custom properties.
22-01-2021Lightning-Fast Web Performance: an online lecture series from Scott Jehl
An online lecture course by Scott Jehl Learn to analyze site performance, fix issues, monitor for regressions, and deliver fast, responsive designs from the start.
28-07-2021Smooth and simple page transitions with the shared element transition API - Chrome Developers
When you navigate around apps on your phone, there's usually some sort of transition, from a simple fade or slide from one screen to another, to more complex transitions that move different elements independently:
30-08-2021
15-09-2021The Time Travel Debugger for Web Development
Screaming Frog SEO Spider Website Crawler
The Screaming Frog SEO Spider is a website crawler that helps you improve onsite SEO, by extracting data & auditing for common SEO issues. Download & crawl 500 URLs for free, or buy a licence to remove the limit & access advanced features.
22-02-2022Phoenix Framework
Build rich, interactive web applications quickly, with less code and fewer moving parts. Join our growing community of developers using Phoenix to craft APIs, HTML5 apps and more, for fun or at scale.
23-06-2022
24-06-2022SEO and Web Performance