Bookmarks tagged with #webdev.
Show all
Show all
Y2Z/monolith
_____ ______________ __________ ___________________ ___ | \ / \ | | | | | | | \_/ __ \_| __ | | ___ ___ |__| | | | | | | | | | | | | | | |\ /| |__| _ |__| |____| | | | | __ | | | \___/ | | \ | | | | | | | |___| |__________| \_____________________| |___| |___| |___| A data hoarder’s dream c
Saved
on: 2024-03-25
Correctly Configure (Pre) Connections – Harry Roberts – Web Performance Con
In the right circumstances, this simple, single line of HTML can make pages hundreds of milliseconds faster! But time and again, I see developers misconfiguring even this most basic of features. Because, as is often the case, there’s much more to this ‘basic feature’ than meets the eye.
Saved
on: 2023-12-10
Pacchetto di CSS: 2023!
Wow! Il 2023 è stato un anno importante per CSS. Da #Interop2023 a tante nuove funzionalità nel campo CSS e UI che offrono agli sviluppatori funzionalità un tempo impensabili sulla piattaforma web.
Saved
on: 2023-12-08
HTML DOM — Phuoc Nguyen
Web development moves at lightning speed. I still remember when I first started using libraries like jQuery, Prototype, script.aculo.us, Zepto, and many more. Even with modern tools like Angular, VueJS, React, Solid and Svelte, we still have to deal with the Document Object Model (DOM).
Tags:
#webdev
Saved
on: 2023-11-06
Accessible Palette: stop using HSL for color systems
Recently, I set out on a mission to reconstruct a color system in Postmark. This project addressed several problems with our design system, involved a lot of research, and even required building a few custom tools.
Saved
on: 2023-08-29
The ideal viewport doesn’t exist
Before you settle on basing design decisions on a handful of strict breakpoints, make sure you consider the vast fragmentation of screen sizes and browser viewports. Here at Set Studio, we conducted a little casual experiment to answer “how fragmented are viewport sizes?”.
Tags:
#webdev
Saved
on: 2023-08-22
htmx ~ Locality of Behaviour (LoB)
Carson Gross “The primary feature for easy maintenance is locality: Locality is that characteristic of source code that enables a programmer to understand that source by looking at only a small portion of it.
Saved
on: 2023-08-16
A Blog Post With Every HTML Element
After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this webs
Tags:
#webdev
Saved
on: 2023-08-13
Patterns
Layout patterns built using modern CSS APIs that help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.
Saved
on: 2023-06-29
Build your own web framework
Have you ever wondered what it takes to build your own web framework that also deploys to edge and serverless infrastructure? What features does a modern framework need to support, and how can we ensure that these features allow us to build a scalable, performant web application?
Saved
on: 2022-07-30
SPA Alternative
The emerging norm for web development is to build a React single-page application, with server rendering. The two key elements of this architecture are something like: This idea has really swept the internet.
Saved
on: 2022-07-20
SPAs: theory versus practice | Read the Tea Leaves
I’ve been thinking a lot recently about Single-Page Apps (SPAs) and Multi-Page Apps (MPAs). I’ve been thinking about how MPAs have improved over the years, and where SPAs still have an edge.
Saved
on: 2022-06-28
Making the world’s fastest website, and other mistakes - DEV Community
I work on Kroger’s ecommerce sites for their regional chains, most of which share a codebase. You’d probably guess the front-end stack: React, Redux, and their usual symptoms of too much JavaScript. React/Redux packages used totaled 44.7 kB before any feature code.
Saved
on: 2022-06-09
Magical SVG Techniques — Smashing Magazine
14 min read SVG, Resources, Round-Ups Share on Twitter, LinkedIn Try monday dev for free! Advanced Design Systems, with Brad Frost Click here to kickstart your project for free in a matter of minutes.
Saved
on: 2022-05-27
IndigoStack
Introducing Indigo — the native macOS app which will revolutionise the way you configure and run local web servers on your Mac. Nginx, Apache, PHP, MySQL, Redis... Indigo comes with everything you’ll need to get your projects running locally in no time.
Saved
on: 2022-05-24
Setting Up CloudFront to Host Your Web App | CSS-Tricks - CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! In my last article, we went over how to set up a web app that serves chunks and bundles of CSS and JavaScript from CloudFront.
Tags:
#webdev
Saved
on: 2022-04-29
Super — Build websites with Notion
Transform your Notion pages into fully customized, professional websites in less than a minute. Enjoy high performance, SEO optimization, and a compelling user experience with great-looking instant page loads. Focus on creating while Super handles the rest.
Saved
on: 2022-04-05
Shoelace: A forward-thinking library of web components.
Add the following code to your page. Now you have access to all of Shoelace’s components! Try adding a button:
Saved
on: 2022-04-04
Web Designer & Developer Toolkit by Addy Codes – Curated tools & resources
Meta Tags is a tool to debug and generate meta tag code for any website. With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!
Saved
on: 2022-03-21
Munter/subfont: Command line tool to optimize your webfont loading. Aggress
A command line tool to statically analyse your page in order to generate the most optimal web font subsets, then inject them into your page. Speed up your time to first meaningful paint by reducing the web font payload and critical path to the font files.
Saved
on: 2022-02-18
A guide to designing accessible, WCAG-conformant focus indicators
Imagine you visit a website and you want to browse it for some content. You want to buy something; or maybe book a flight somewhere. And as you move your cursor onto the page, it suddenly disappears.
Saved
on: 2021-11-07
Developer Tools secrets that shouldn’t be secrets
Update: As this is blowing up on Hackernews I added information to each of the tips in which environment they are supported in parenthesis after each heading. When I state “Chromium browsers”, this refers to all browsers that use the Chromium core and also feature all the Developer Tools.
Tags:
#webdev
Saved
on: 2021-11-02
Best practices for using third-party embeds
An overview of techniques to load popular third-party embeds efficiently. Many sites use third-party embeds to create an engaging user experience by delegating some sections of a web page to another content provider.
Tags:
#webdev
Saved
on: 2021-10-18
Increment: Frontend
This issue surveys the breadth and depth of frontend development, from its principles, tools, and frameworks to its shifting scope and far-reaching fringes. Visit the Increment Store to purchase print issues.
Saved
on: 2021-10-05
Web Vitals patterns
This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. Use the code in these examples to help ensure your projects stay on the right track.
Saved
on: 2021-09-17
A Complete Guide To Accessibility Tooling — Smashing Magazine
19 min read Accessibility, Tools Share on Twitter, LinkedIn Try monday dev for free! The Power of Storytelling, with Chiara Aliotta Building Modern HTML Emails, with Rémi Parmentier SmashingConf New York 2024 Try monday dev for free! Smart Interface Design Patterns, 10h video + UX training 11 Habit
Saved
on: 2021-06-17
wickedblocks
Over 120 fully responsive component and blocks you can copy paste into your Tailwind projects. Use it in as many projects you want to and as many times you need too. A beautiful collection of premium block components for Shadcn UI & Tailwind. Try the free blocks.
Saved
on: 2021-05-25
Lightning-Fast Web Performance: an online lecture series from Scott Jehl
Lightning-Fast Web Performance has a new home! Updated for 2022, the course remains free to view on the WebPageTest site thanks to Catchpoint.
Saved
on: 2021-05-20
DOM Events
DOM Events Learn about the DOM Event system through exploration Legend An event is a message that is dispatched to event target's. There are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.
Tags:
#webdev
Saved
on: 2021-05-19
HTML Tips
In this article, I will share with you some very useful HTML tips. Enjoy! Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.
Tags:
#webdev
Saved
on: 2021-05-06
Getting my blog ready for Core Web Vitals & Page Experience - Paul Bakaus'
Saved
on: 2021-04-24
Tiptap - Dev Toolkit Editor Suite
Tiptap is a headless editor framework with an open source core. Integrate over 100+ extensions like collaboration and AI agents and create the UX you want. Tiptap's extension-based architecture lets you pick and choose the features you need.
Saved
on: 2021-04-23
Deep dive in CORS: History, how it works, and best practices
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy.
Tags:
#webdev
Saved
on: 2021-04-14
permission.site
HTTP HTTPS Async Clipboard API Notes: Augmented Reality (AR) Implemented behind the experimental flag chrome://flags/#enable-experimental-web-platform-features. Encrypted Media (EME) May succeed without permission depending on the implementation. Attempts to use known key systems.
Tags:
#webdev
Saved
on: 2021-03-26
HTTPWTF
HTTP is fundamental to modern development, from frontend to backend to mobile. But like any widespread mature standard, it's got some funky skeletons in the closet.
Tags:
#webdev
Saved
on: 2021-03-04
The great SameSite confusion
In this post, I dissect a common misconception about the SameSite cookie attribute and I explore its potential impact on Web security. You undoubtedly have heard of the SameSite cookie attribute.
Saved
on: 2021-02-05
7 bite-sized tips for reliable web automation and scraping selectors
If you’re like most developers, you’ve probably encountered Cascading Style Sheet (CSS) selectors for styling webpages. We can mix-and-match CSS selectors to describe any subset of elements on a page.
Tags:
#webdev
Saved
on: 2021-02-02
Sign-in form best practices
Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
Tags:
#webdev
Saved
on: 2021-01-25
React Authentication: How to Store JWT in a Cookie | by Ryan Chenkie | Medi
If that’s the case, there’s a decent chance that your API is secured somehow. Maybe you’re making authentication and authorization happen with JSON Web Tokens. If so, there’s also a decent chance you’re keeping your JWTs in local storage.
Saved
on: 2021-01-22
How We Improved SmashingMag Performance — Smashing Magazine
Vitaly Friedman 33 min read Smashing, Optimization, Performance, Case Studies, Core Web Vitals Share on Twitter, LinkedIn In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the
Saved
on: 2021-01-22
Maximally optimizing image loading for the web in 2021
Sara Soueidan said: Maximally optimizing image loading for the web in 2021 by @cramforce Loads of great #performance tips in there, some I didn’t know of before (like the `decoding` attribute 😯) Thread Sebastien Lorber 🇫🇷 said: TIL there's a "decoding" attr in html image in this post fro
Saved
on: 2021-01-20
You want overflow: auto, not overflow: scroll | Kilian Valkhof
Every now and then a web developer using a Mac discovers that their beautiful design is littered with scroll bars on other platforms. Either because someone points it out to them or because they attach a mouse to their mac which makes scroll bars appear.
Saved
on: 2021-01-07
How to Favicon in 2021: Six files that fit most needs — Martian Chronicles,
It’s time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Frontend developers currently have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen.
Tags:
#webdev
Saved
on: 2020-12-23
Polypane, the perfect browser for web developers and designers
For developers, designers, QA and marketers looking to improve their workflow. Fix stability issues and update the rendering engine to Chromium 128.
Saved
on: 2020-11-12
Stupid solutions: Live server push without JS
Underjord is a tiny, wholesome team doing Elixir consulting and contract work. If you like the writing you should really try the code. See our services for more information. So in my post Is this evil? I covered a way of tracking users with CSS.
Saved
on: 2020-09-29
Workers Durable Objects Beta: A New Approach to Stateful Serverless
We launched Cloudflare Workers® in 2017 with a radical vision: code running at the network edge could not only improve performance, but also be easier to deploy and cheaper to run than code running in a single datacenter.
Saved
on: 2020-09-29
The Ultimate Guide to Web Performance 🚀
There's so many ways to speed up your site. Don't you wish every web performance tip was in one place? That's what I thought too, so I put them all in one place: this post. Use this guide as a reference.
Saved
on: 2020-09-25
The failed promise of Web Components – Lea Verou
Web Components had so much potential to empower HTML to do more, and make web development more accessible to non-programmers and easier for programmers.
Saved
on: 2020-09-25
How I Redesigned My Laravel Blog (Again) - Christoph Rumpel
In 2018, I moved my blog from Jekyll to Laravel, and I took the opportunity to redesign it as well. The site was based on Sebastian De Deyne's blog, a Laravel application working with markdown files for posts.
Saved
on: 2020-09-17
Tailwind CSS Resources you wish you had.
This week I decided to take a look at Tailwind CSS and create a simple e-commerce website. The first thing I noticed is how well the documentation was written. Even if Tailwind is your first CSS framework, you will easily be able to navigate through different sections😉.
Saved
on: 2020-09-16
State of Self-Serve Website Building in 2020
While building our simple new website, we evaluated many website builder options, and realized how much the landscape has changed for self-serve business website design and hosting.
Tags:
#webdev
Saved
on: 2020-09-11
A high-performance blog template for 11ty
Awais said: ✍️ Well, this is fantastic. A free high-performance 11ty Blog template by Google mostly @cramforce, @mathias, and of course @zachleat. Lots of interesting web perf practices in the code — that's all FOSS (Free & Open Source Software). Have at it.
Saved
on: 2020-09-07
Blade UI Kit
With 27 different components, we probably have something for you. Blade UI Kit was designed to work smoothly with these technologies.
Saved
on: 2020-09-03
Legacy to Laravel: How to Modernize an Aging PHP Application | Tighten
Here at Tighten, we love Laravel and get excited about staying up to date with the latest and greatest features our framework of choice has to offer.
Saved
on: 2020-09-02
Caching is hard, draw me a picture | APIs You Won't Hate - A community that
Another guest post from our friend Darrel Miller. This is my attempt to make the HTTPbis caching rules more accessible and hopefully shine a light on how powerful HTTP caching can be.
Tags:
#webdev
Saved
on: 2020-09-01
How to Use AVIF: The New Next-Gen Image Compression Format — Lightspeed
November 2, 2021 Update: Firefox 93 now supports the AVIF format without feature flag. August 26, 2020 Update: Chrome 85 now supports the AVIF format and the link to the preview build of the Squoosh.app has been updated as it now fully supports AVIF.
Tags:
#webdev
Saved
on: 2020-08-24
Learn Playwright & Puppeteer
Tips, tricks, and in-depth guides from the trenches. Learn how to use the popular open-source browser automation frameworks, Playwright and Puppeteer. This guide provides detailed information and examples how you can write high-quality scripts for testing and synthetic monitoring.
Tags:
#webdev
Saved
on: 2020-08-19
What's next for Chrome Music Lab?
Chrome Music Lab is a website that makes learning music more accessible through fun, hands-on experiments. Many teachers have been using Chrome Music Lab as a tool in their classrooms to explore music and its connections to science, math, art, and more.
Saved
on: 2020-08-05
Pagination and Scroll Restoration with Turbolinks · Gray Matter
This solution has issues we try to fix in part two. Still a useful read for context, though.
Tags:
#webdev
Saved
on: 2020-07-23
Things I wish I’d known about CSS
I learned how to build websites the old fashioned way: looking at website source code and trying to replicate the things I saw. I threw in the odd book for the stuff I couldn’t see (like PHP/MySQL), and I was on my way.
Saved
on: 2020-07-17
How OAuth 2.0 Works
The modern human likely has profiles on dozens of applications. Whether it’s social media applications, music/video streaming, or workspace resources, each of us must manage accounts that contain personal information. Over time, these siloed applications have become increasingly connected.
Saved
on: 2020-07-16
Nodesign.dev | Design less develop more.
The ultimate collections of illustrations, art, pictures, fonts, images, icons, css frameworks, favicon generators, color palettes, backgound generators, ui inspirations and many more nodesign tools.
Tags:
#webdev
Saved
on: 2020-06-08
Throttling and Debouncing. Avoiding unnecessary API calls. - DEV Community
There are sometimes that we need to perform actions on certain events controlled by the user. This can be the case of events like click, onPress, mouseMove, etc.
Saved
on: 2020-04-08
HTML DOM - Common tasks of managing HTML DOM with vanilla JavaScript
MEGA HOKI - adalah sebuah jalanhoki megawin 188 & big hoki terbesar di dalam permainan demo mahjong ways 1, 2 di provider pg soft dengan menggunakan metode situs slot pulsa tanpa potongan serta deposit qris di situs slot gampang menang ratehoki88 dan 88 mega 188.
Saved
on: 2020-04-02
Pavithra Kodmad su Twitter: "Hey twitter friends, can you link me to articl
Tags:
#webdev
Saved
on: 2020-01-23
Developers: Get Ready for New SameSite=None; Secure Cookie Settings
When a resource on a web page accesses a cookie that matches the site the user is visiting, this is same-site or “first party” context.
Saved
on: 2019-10-24
A simple guide to HTML <head> elements
Valid <head> elements include meta, link, title, style, script, noscript, and base. These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.
Tags:
#webdev
Saved
on: 2019-10-01
Menus with "Dynamic Hit Areas" | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you’re in tricky territory. For one, they should work with clicks and taps, too.
Saved
on: 2019-09-24
Why is modern web development so complicated? A long yet hasty explanation:
Modern frontend web development is a polarizing experience: many love it, others despise it. It is a LOT to explain!
Tags:
#webdev
Saved
on: 2019-08-08
The CSS background-image property as an anti-pattern
The CSS background-image property allowed us to do some amazing things, but in most cases, it's time to leave it behind.
Saved
on: 2019-07-28
Going serverless with Hugo and Netlify - Freek Van der Herten's blog on PHP
Our team releases a lot of open source packages. All of our packages are well documented. For the smaller packages, we use a simple readme on GitHub. The bigger packages, like medialibrary and event projector get documented on our documentation site.
Saved
on: 2019-07-18
The Evolution of Spotify Home Architecture
Samuels: Imagine putting on your headphones and listening to your favorite song or discovering a new artist whose songs you just can't live without, or hearing an album that just dropped by an artist that you already know and love and adding those songs into your rotation.
Saved
on: 2019-06-19
How to Section Your HTML | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>.
Saved
on: 2019-06-19
Extract critical CSS | web.dev
Important: This guide describes an advanced performance technique that can improve performance, but can also lead to bugs if not implemented properly. Most sites should be able to achieve all of our recommended performance targets without implementing this technique.
Saved
on: 2019-06-05
This page is a truly naked, brutalist html quine.
This page is a truly naked, brutalist html quine. One of my favorite things is to misuse technology in creative ways. Breaking the rules without breaking the rules.
Saved
on: 2019-06-05
Building a stateless API proxy
Web APIs are lots of fun. However, things can get tricky when it comes to granting other applications access to your data on a specific service. I ran into this trickiness with the GitHub API. In Google Cloud we have client libraries for about 40 products across 8 programming languages.
Saved
on: 2019-05-30
The Sass Ampersand | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The & is an extremely useful feature in Sass (and Less). It’s used when nesting.
Saved
on: 2019-05-28
HTTP headers for the responsible developer - Twilio
This article is a written version of the talk “HTTP headers for the responsible developer”. You can check the slides or the recording. Being online is the default state for many people these days.
Saved
on: 2019-05-08
Uppy 1.0: Your best friend in file uploading — Uppy
Today, after three years of development, we are launching version 1.0 of Uppy, our file uploader for web browsers. Three years ago, Transloadit was ready to replace their jQuery-based file uploading & processing plugin for browsers with something more modern.
Saved
on: 2019-04-29
Block or report ds160
Contact GitHub support about this user’s behavior. Learn more about reporting abuse. Provides a convenient way to run a Monero full node using your own copy of the blockchain. It gives you complete control over your Monero node.
Saved
on: 2019-04-22
TwirPHP: A modern RPC framework for PHP
In the last couple years RPC started to become popular again as a communication mechanism for web-based APIs. It’s not a new concept at all, but it changed a lot over the years: the technology evolved, new IDLs and frameworks (like protobuf and gRPC) appeared.
Saved
on: 2019-04-20
How to properly set up ESLint with Prettier for Vue or Nuxt in VSCode
Writing tech tutorials is hard because certain configurations might stop working after several months. As I’m also working on other things I don’t always have time to check if this is still working.
Tags:
#webdev
Saved
on: 2019-04-15
NoCoffee – Vision Simulator for Chrome
Vision problems are more pervasive than most of us realize. Upwards of 285 million people worldwide are visually impaired. Many more have low or moderate visual difficulties. The number in the U.S. is expected to double by 2020, due to the aging of the baby boomer generation.
Saved
on: 2019-04-12
Solve accessibility issues before they reach your customers.
Easy for developers to address most common accessibility errors in under 5 minutes. Assess your websites for WCAG 2.1 AA coverage.
Saved
on: 2019-04-12
dequelabs/axe-core
Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It's fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.
Saved
on: 2019-04-12
AddyOsmani.com - Native image lazy-loading for the web!
In this post, we'll look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web!. For the curious, here's a sneak preview of it in action: We are hoping to ship support for loading in ~Chrome 75 and are working on a deep-dive of the feature we'll publish soon.
Tags:
#webdev
Saved
on: 2019-04-08
Rich text / HTML editors and frameworks
Mobiledoc - github.com/bustle/mobiledoc-kit - framework to build editors with a standardized JSON structure ShareDB - github.com/share/sharedb - framework to sync any JSON document using operational transforms, add real-time collaborative editing to anything else Bangle.dev - github.
Saved
on: 2019-04-03
delight-im/PHP-I18N: Internationalization and localization for PHP
Provide your application in multiple languages, to users in various countries, with different formats and conventions. Note: On Windows, you may have to use the non-thread-safe (NTS) version of PHP.
Saved
on: 2019-03-29
Color Picker — A handy design tool from Color Supply
Get simple actionable web design tips in your inbox every Tuesday.
Tags:
#webdev
Saved
on: 2019-03-21
Use Cases For Flexbox — Smashing Magazine
10 min read CSS Grid, CSS, Flexbox Share on Twitter, LinkedIn Building Modern HTML Emails, with Rémi Parmentier Try monday dev for free! Try monday dev for free! Figma Workflow Masterclass, with Christine Vallaure Advanced Design Systems, with Brad Frost Click here to kickstart your project for fre
Saved
on: 2019-03-05
Cache-Control for Civilians – CSS Wizardry – CSS Architecture, Web Performa
The best request is the one that never happens: in the fight for fast websites, avoiding the network is far better than hitting the network at all. To this end, having a solid caching strategy can make all the difference for your visitors.
Tags:
#webdev
Saved
on: 2019-03-04
Make your site’s pages instant in 1 minute
Amazon and others found that removing 100 milliseconds of latency improves sales by 1%. But latency on the web is hard to overcome. Amazon (PowerPoint, slide #15): 100 ms of latency resulted in 1% less sales.
Saved
on: 2019-02-09
How to Report Errors in Forms: 10 Design Guidelines
Forms are necessary components of many applications and websites. We use them to log in, purchase items, send feedback, and enter our personal information.
Saved
on: 2019-02-08