davidbisset.social

frontend

  • Debunking native in-browser spell-jacking. "For input fields that handle sensitive information, such as passwords, personal details, or proprietary data, ensure the spellcheck attribute is set to false." (TLDR: Being on the safe side) https://medium.com/doctolib/debunking-native-in-browser-spell-jacking-0fccdc06373b #frontend #webdev

  • How to do transparent inner border for images in #CSS https://css-tip.com/inner-border/ Cut a border from the inside of an image using the mask property and two gradients. #frontend

  • How to get those nice "super crispy" #SVG icons. https://persevering.substack.com/p/super-crispy-svg-icons #frontend #webdev

  • Styling Counters in #CSS https://css-tricks.com/styling-counters-in-css/ #frontend #webdev

  • Nice tool for #frontend developers and others. "Special #HTML Symbols" Copy a wide range of HTML symbols (arrows but lots of other ones, some of which I'm reminded exist. https://symbl.revend.group #webdev #webtools

  • Styling an #HTML dialog modal to take the full height of the viewport https://til.simonwillison.net/css/dialog-full-height #frontend

  • Trig-Animations.css "Predefined and configurable #CSS scroll animations that drop straight into your projects HTML." https://idev-games.github.io/Trig-JS/animations.html #frontend

  • On the #HTML front: "With the command and commandfor attributes, buttons can now perform actions on other elements declaratively." https://developer.chrome.com/blog/command-and-commandfor See: https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-command #webdev #frontend

  • Interesting: Image comparison slider in 6 lines of #JavaScript https://muffinman.io/blog/image-comparison-slider/ @codepen.io – https://codepen.io/stanko/pen/myddXKm #CSS #webdev #frontend

  • Agreed. "Knowing #CSS is mastery to Frontend Development." https://helloanselm.com/writings/knowing-css-is-mastery-to-frontend-development via https://mastodon.social/@helloanselm "You won’t be a master at frontend development if you don’t understand underlying mechanisms of a language." #webdev #frontend

  • Untitled post 60408

    “We saved money by giving a generic prompt and blindly trusting #AI to do the UI of our app.” 🤔 #memes #frontend

  • A Content List With Bulk Actions Using Ancient #HTML and Modern #CSS https://cloudfour.com/thinks/a-content-list-with-bulk-actions-using-ancient-html-and-modern-css/ #webdev #frontend

  • 100+ Open Source #SVG Spinners https://magecdn.com/tools/svg-loaders?ref=web-design-weekly.com #webdev #frontend #CSS

  • Building a QR Code #HTML Web Component via https://mstdn.social/@scottjehl https://scottjehl.com/posts/q-r #WebComponent #QR #frontend

  • "Build for the Web, Build on the Web, Build with the Web" From @csswizardry https://csswizardry.com/2025/01/build-for-the-web-build-on-the-web-build-with-the-web/ "Web as a platform = a safe bet…Opt into features incrementally…Embrace progressive enhancement…Write code that leans into browser, not away from it." #webdev #frontend #css

  • https://open-props-ui.netlify.app allows you to use components (like a menu, button, badge, or form elements) that you can copy and paste to your project. #opensource: https://github.com/felix-bohlin/ui #frontend #webdev #CSS

  • "Top 25 Website Fonts for 2025" https://bestwebdesigntools.com/blog/designers-favorite-top-25-website-fonts-for-2025 i'm not a big font person, but sometimes I do like to change things up. I'm a rebel. #free #frontend #webdev #fonts

  • Picyard is a tool for making your code snippets look nice with various themes and languages supported. I've seen apps (paid and free) do this, but if you need a free online solution work a look. https://www.picyard.in/code #frontend #CSS #webdev #JavaScript #PHP

  • If you wanted a little philosophy and self reflection with your #CSS then this might hit the spot. I’ve never personally identified with z-index until today. https://dev.to/eioluseyi/z-index-and-the-hierarchy-of-needs-1n #frontend #css #webdev

  • A “no-nonsense guide” to frontend for backend developers. https://hojimat.com/frontend-intro/. #webdev #frontend

  • rtx-on.js is an experimental #JavaScript library that enhances web pages by simulating in real time realistic lights and shadows using ray tracing. https://rtx-on.steren.fr/ #frontend

  • Usually not a fan of "top x" sites especially with light bait titles but… "Top 100 most creative and unique #portfolio websites of 2024" Bookmarking because there might be some inspiration gazing here. https://muz.li/blog/top-100-most-creative-and-unique-portfolio-websites-of-2024/ #frontend #design #webdev

  • Why I 🧡 the web. Someone built a site where you can scroll through all 16,777,216 hex colors in one grid. (If you ask "why" then i'm guessing you haven't had much experience with your own mad side projects). #frontend #webDev https://www.everyhex.codes/

  • Tooltip Best Practices https://css-tricks.com/tooltip-best-practices/ #UX #UI #Frontend #CSS #Webdev

  • Untitled post 59944

    A "popular" Devtools extension for #Tailwind #CSS developers. https://gimli.app/tailwind #webdev #frontend

  • How to Create an Organic Text Distortion Effect with Infinite Scrolling https://tympanus.net/codrops/2024/11/06/how-to-create-an-organic-text-distortion-effect-with-infinite-scrolling/?ref=web-design-weekly.com "Learn how to create an organic distortion effect for text using #JavaScript and #CSS for a unique, fluid animation." #frontend

  • "Successful Web Development Is Boring Web Development" https://meiert.com/en/blog/boring-web-development/ "We celebrate… new HTML/CSS and JavaScript frameworks… when instead we should celebrate using vanilla HTML/CSS and #JavaScript, and maximizing use of existing frameworks." #webdev #frontend

  • #HTML Form Validation is heavily underused https://expressionstatement.com/html-form-validation-is-heavily-underused – Using specific type attribute values, such as "email", "number", or "url"– Using other input attributes that create constraints, such as "pattern" or "maxlength"– Using the setCustomValidity DOM method of the input #webdev #frontend

  • The State of Frontend 2024: Results from a survey completed by over 6,000 #developers. #frontend #webdev #css https://tsh.io/state-of-frontend/

  • Untitled post 59697

    WhoCanUse – A #webdev tool that brings attention to how color contrast can affect people with different visual impairments. #a11y #frontend https://www.whocanuse.com