https://pinboard.in/u:lenards/public/ recent bookmarks from lenards 2025-03-29T20:15:27+00:00 https://cloudfour.com/thinks/a-content-list-with-bulk-actions-using-ancient-html-and-modern-css/ lenardswebdev web dev examples resources ux css design webdesign html https://pinboard.in/ https://pinboard.in/u:lenards/b:c108fda79ce2/ 2025-01-18T19:22:30+00:00 https://designfordevelopersbook.com/ lenardsDesign fundamentals for web developers]]> web dev webdev resources books design webdesign https://pinboard.in/u:lenards/b:ad5f95746600/ 2024-07-29T00:59:59+00:00 https://ishadeed.com/article/css-grid-area/ lenardsA fresh look at the CSS grid template areas and how to take advantage of its full potential today.]]> css layout tutorial design reference css-grid grid css_grid cssgrid https://pinboard.in/u:lenards/b:563f9176fbe1/ 2024-03-23T22:49:26+00:00 https://www.youtube.com/watch?v=O-XrRQf7BPM lenardsdesign physical-tools tools manual graphic art https://pinboard.in/u:lenards/b:01fa4f5e83d8/ 2023-12-27T19:36:11+00:00 https://calibreapp.com/blog/perceived-performance lenardsIs it possible to define human perception with a handful of metrics? Learn how people comprehend time, and use this knowledge to make even longer waits feel less frustrating.]]> web design webdesign psychology psychology-of-speed https://pinboard.in/u:lenards/b:52c4c47af58f/ 2023-12-27T19:35:00+00:00 https://www.joshwcomeau.com/css/interactive-guide-to-grid/ lenardsCSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.]]> css-grid tutorials design css webdesign layout resources webdev web development https://pinboard.in/u:lenards/b:4a7d3a49465b/ 2023-11-04T18:01:48+00:00 https://lea.verou.me/blog/2023/minimalist-affordances/ lenardscss design tradeoffs minimalism ui ux github https://pinboard.in/u:lenards/b:7eceaea67b2f/ 2023-07-08T18:23:33+00:00 https://archives.design/ lenardsgraphic design books resources materials inspiration archive reference archive.org https://pinboard.in/u:lenards/b:9b9f18a24af5/ 2023-01-14T17:22:16+00:00 https://dev.to/olus2000/designing-an-elm-component-1meb lenardsIn my previous article I have told you a lot of theory about Elm, but to make you see why I like it... Tagged with elm, webdev, design, showdev.]]> elm design components functionalprogramming functional-programming functional-thinking https://pinboard.in/u:lenards/b:2aa7da79c047/ 2023-01-14T17:21:20+00:00 https://discourse.elm-lang.org/t/blog-post-understanding-the-design-of-elm-url/8645 lenardsHey everyone. I’ve written a post to explain how parsers work in elm/url. Here’s a link to the blog post: Understanding the Design of elm/url: Part 1 As stated in the README of elm/url, “The API in Url.Parser is quit…]]> elm programming design functionalprogramming functional-thinking functional-programming https://pinboard.in/u:lenards/b:80300947ac28/ 2023-01-14T17:04:39+00:00 https://iamkate.com/code/tree-views/ lenardsHow to create a tree view (collapsible list) using only HTML and CSS]]> css web design html webdev trees tree-viz a11y https://pinboard.in/u:lenards/b:fd79a2109c0a/ 2023-01-14T17:02:28+00:00 https://www.ripleys.com/weird-news/grenade-football/ lenardsThe grenade football was the same weight and shape as regular footballs. The Army hoped their soldier's familiarity with the game would give them an edge.]]> seemed-like-a-good-idea fail failure design https://pinboard.in/u:lenards/b:d564b2ecafcd/ 2022-10-30T01:51:31+00:00 https://htdp.org/ lenardsprogramming books design free computer-science resources racket scheme dev drscheme drratchet https://pinboard.in/u:lenards/b:bc93cff50444/ 2022-09-17T00:20:44+00:00 https://uxdesign.cc/figma-is-making-you-a-bad-designer-54db4dc995ff lenardsI was a bit panicked about getting a job out of school. After 2 awesome years of learning about HCI and doing engaging student projects I had totally fallen head over heels in love with design (and…]]> design ux fat-marker creativity figma-sucks design-process https://pinboard.in/u:lenards/b:26d0c14912ab/ 2022-06-19T18:01:56+00:00 https://griddy.io/ lenardscss grid css-grid learning design webdesign webdev https://pinboard.in/u:lenards/b:943e1ed3073f/ 2022-05-30T16:33:03+00:00 https://boingboing.net/2022/05/30/why-the-sheffield-stand-is-the-best-bike-rack.html lenardsdesign bike-rack https://pinboard.in/u:lenards/b:07b3bff38631/ 2022-05-28T16:50:08+00:00 https://korban.net/elm/elm-ui-patterns/ lenardselm elm-ui ui ux patterns patternLibrary web design webdesign webdev elm-lang https://pinboard.in/u:lenards/b:0e51c2176d8e/ 2022-04-23T20:01:20+00:00 http://nostyle.herokuapp.com/ lenardsdesign-system form forms a11y design style-guides styleguide adam-silver patterns https://pinboard.in/u:lenards/b:088e10430a0d/ 2022-03-09T01:32:05+00:00 https://a11y.coffee/ lenardsThe introduction on web accessibility that I want to give every single web developer.]]> a11y webdev reference web design accessibility best-practices cssbasics https://pinboard.in/u:lenards/b:b3c2498825d8/ 2021-06-23T00:00:00+00:00 https://tylerxhobbs.com/fidenza lenardsgenerative-art design code art https://pinboard.in/u:lenards/b:7872170f2b12/ 2021-02-06T20:57:30+00:00 http://bada55.io/ lenardsLooking for a BADA55 hex color words for your css code? Come here now!]]> colors hex-codes web webdev css design hex https://pinboard.in/u:lenards/b:a9de19f79d6e/ 2021-01-22T15:35:42+00:00 https://jenniferdaniel.substack.com/p/im-so-proud-of-you- lenardsA simple smile with a tear offers us a gentle alternative when emotions run high]]> design emoji emojis icons glyphs web https://pinboard.in/u:lenards/b:7c31468273c0/ 2020-12-20T20:47:19+00:00 https://www.ilm.com/visual_development/star-wars-the-rise-of-skywalker-developing-a-heart-of-darkness/ lenardsstarwars art design concept-art background https://pinboard.in/u:lenards/b:29893726e529/ 2020-12-16T19:54:48+00:00 https://denali.design/ lenardsdesign-system web design webdesign webdev design-systems https://pinboard.in/u:lenards/b:eae529f3feee/ 2020-11-11T19:05:12+00:00 https://briefs.video/#pilot lenardsaria web video a11y accessibility webdesign design https://pinboard.in/u:lenards/b:53df4d61084e/ 2020-11-07T18:36:47+00:00 https://www.taniarascia.com/basic-authentication-for-an-express-node-app-htpasswd/ lenardsA lightweight commenting system using GitHub issues.]]> web design webdesign webdev inspiration https://pinboard.in/u:lenards/b:4e57c581ef37/ 2020-11-02T20:27:42+00:00 https://zenhabits.net/resting/ lenardsweb design inspiration webdesign themes https://pinboard.in/u:lenards/b:263f0fb9712a/ 2020-10-07T17:44:07+00:00 https://www.goodweb.design/ lenardswebdesign resources examples web webdev design landing-pages https://pinboard.in/u:lenards/b:dea8559dbad0/ 2020-09-30T16:41:58+00:00 https://a11yresources.webflow.io/ lenardsA growing list of accessibility tools and resources]]> a11y web design web-design webdev web-dev resources accessibility https://pinboard.in/u:lenards/b:d72cb1a962b0/ 2020-07-09T23:59:13+00:00 https://web.dev/one-line-layouts/ lenardscss layout tips cssgrid webdev web design https://pinboard.in/u:lenards/b:c20b1114fd32/ 2020-06-01T20:40:53+00:00 https://codepen.io/pizza3/pen/bGVPZvo lenardsInspired from https://github.com/Ramotion/folding-cell...]]> html html5 css ticket design web webdesign https://pinboard.in/u:lenards/b:4c72122ba12d/ 2020-05-14T16:16:48+00:00 https://nationalparktypeface.com/ lenardsfonts opensource font type typography typeface design webdesign https://pinboard.in/u:lenards/b:5249fac06104/ 2020-05-13T16:49:42+00:00 https://webonastick.com/fonts/routed-gothic/ lenardsfonts opensource font type typography typeface design aircraft https://pinboard.in/u:lenards/b:c0640ddcefac/ 2020-05-06T18:12:21+00:00 https://makewordart.com/ lenardsCreate your own nostalgic Microsoft WordArt and party like it's 1995. Make your own custom word art easily.]]> windows95 windows98 retro wordart art design 90s-world microsoft https://pinboard.in/u:lenards/b:e9594a262b80/ 2020-04-29T15:50:55+00:00 https://jdan.github.io/98.css/ lenardscss design design-systems web webdev windows windows98 windows95 retro ui https://pinboard.in/u:lenards/b:06eb5bb0d1cc/ 2020-04-01T17:20:25+00:00 https://github.com/alyssaxuu/animockup lenardsCreate animated mockups in the browser 🔥. Contribute to alyssaxuu/animockup development by creating an account on GitHub.]]> mockups tools animation web design editor https://pinboard.in/u:lenards/b:d72c19acda38/ 2020-03-18T16:38:49+00:00 https://websitesetup.org/web-accessibility-checklist/ lenardsaccessibility a11y checklist design rsources https://pinboard.in/u:lenards/b:60574eac6229/ 2020-03-04T18:08:24+00:00 https://github.com/refactoringui/heroicons lenardsA set of free MIT-licensed high-quality SVG icons for UI development. - refactoringui/heroicons]]> ui design icons web webdev svg resources opensource open-source https://pinboard.in/u:lenards/b:5be8ed7d55e4/ 2020-02-28T17:32:52+00:00 https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ lenardsAbout digital and technology projects in government.]]> design accessibility a11y html web webdev https://pinboard.in/u:lenards/b:f0637da2e1c8/ 2020-01-23T00:14:45+00:00 https://hankchizljaw.com/wrote/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/ lenardscss css-layout css-grid responsive-design responsive web design webdev https://pinboard.in/u:lenards/b:e220c1bd6784/ 2020-01-21T22:35:14+00:00 https://css-tricks.com/the-great-divide/ lenardsfront-end divide skills design web webdev html css javascript https://pinboard.in/u:lenards/b:030ff89f910f/ 2020-01-10T15:30:21+00:00 https://github.com/sdras/design-for-developers/blob/master/slides-pdf/Des4Dev2.pdf lenardsdesign web webdev https://pinboard.in/u:lenards/b:dd3a02ee1cce/ 2019-12-18T20:42:09+00:00 https://augmented-ui.com/ lenardsui framework css programming augmented cyberpunk web design webdev retro https://pinboard.in/u:lenards/b:88aaa45a3964/ 2019-12-04T22:00:18+00:00 https://24ways.org/2019/making-a-better-custom-select-element/ lenardshtml web design webdev a11y css accessibility ARIA js javascript select https://pinboard.in/u:lenards/b:1fda9e6a6668/ 2019-12-04T21:18:34+00:00 https://refactoringui.com/previews/labels-are-a-last-resort/ lenardsdesign tips ui ux dothis-notthat labels https://pinboard.in/u:lenards/b:7b682092e637/ 2019-12-04T19:38:58+00:00 https://www.happyhues.co/ lenardsSee color palette inspiration on a real example website. As you click on different palettes every color on this site updates to give you context of how that color could be used for your design or illustration projects.]]> colors design webdesign web webdev tools color-picker color-theory https://pinboard.in/u:lenards/b:f659f2418f79/ 2019-11-11T21:56:43+00:00 https://www.atlassian.design/guidelines/product/overview lenardsatlassian design guidelines design-systems design-system https://pinboard.in/u:lenards/b:9013af47483a/ 2019-11-06T18:00:10+00:00 https://www.smashingmagazine.com/2019/11/css-things-cant-yet-do/ lenardscss web design layout articles caniuse capabilities webdev https://pinboard.in/u:lenards/b:f22dd90c0017/ 2019-10-23T21:55:51+00:00 https://uglyduck.ca/responsive-tables/ lenardsweb layout css css-layout tables webdev responsive design https://pinboard.in/u:lenards/b:122712201b2d/ 2019-10-09T15:26:13+00:00 https://www.designsystems.com/space-grids-and-layouts/ lenardsLearn how to define baseline grids, column grids, spacing and layouts. ]]> css layout design design-systems design-patterns spacing https://pinboard.in/u:lenards/b:a9d8b6bd69b5/ 2019-09-17T17:16:49+00:00 https://css-tricks.com/the-priority-navigation-pattern/ lenardsThe idea is: show as many navigation items as will fit horizontally with a UI toggle to show the rest. I like the idea. Why hide everything behind a]]> css ui pattern webdesign web design responsive navigation https://pinboard.in/u:lenards/b:7520bdd9e10b/ 2019-09-10T22:41:44+00:00 https://leerob.io/blog/style-guides-component-libraries-design-systems/ lenardsA deep-dive on everything I've learned in the past year building style guides, design systems, component libraries, and their best practices.]]> css design design-systems style-guides https://pinboard.in/u:lenards/b:bab2798e0823/ 2019-08-29T17:09:30+00:00 https://vimeo.com/70018634 lenardsAaron is one of the first speakers that was at beyond tellerrand for the second time already. This year he has chosen to talk about a much more untechnical talk…]]> design empathy https://pinboard.in/u:lenards/b:2502506ce04e/ 2019-08-28T21:44:59+00:00 https://medium.muz.li/color-tools-for-designers-2019-6ebd77a94ab lenardsDesigners are increasingly taking risks and using single bold colors to communicate their web design. No matter what color you need to work with to create a good color scheme, there are best…]]> colors design tools web webdev https://pinboard.in/u:lenards/b:8e94dc6b0994/ 2019-08-28T21:32:15+00:00 https://www.supremo.co.uk/typeterms/ lenardsThe animated typographic cheat sheet.]]> typography font typeface typefaces terminology terms design https://pinboard.in/u:lenards/b:a08a7458422c/ 2019-08-26T21:27:27+00:00 https://www.c82.net/blog/?id=79 lenardscss math design geometry euclid mathematics typography visualization https://pinboard.in/u:lenards/b:2371154e2b0e/ 2019-08-23T21:31:54+00:00 https://playbook.uie.com/blog/5-strategies-for-increasing-ux-design-literacy lenardsIn this two-day workshop Jared Spool will guide you through dozens of UX strategy plays to identify the perfect combination for your organization.]]> UX literacy design skills fluency https://pinboard.in/u:lenards/b:11f6395d4875/ 2019-08-21T19:14:40+00:00 https://thomasjockin.github.io/lexend/ lenardsLexend is a variable font empirically shown to significantly improve reading-proficiency.]]> typography font design readability education typefaces web webfonts webdesign webdev https://pinboard.in/u:lenards/b:72f0cf72184c/ 2019-08-09T18:45:16+00:00 https://2019.stateofcss.com/ lenardsDiscover the most popular CSS features & technologies of the year.]]> css data survey design web webdev webdesign https://pinboard.in/u:lenards/b:53067a6550f1/ 2019-08-07T18:04:14+00:00 https://meowni.ca/font-style-matcher/ lenardscss fonts tools typography webfonts design webdesign FOUT FOUC https://pinboard.in/u:lenards/b:6c83cc355058/ 2019-08-01T21:55:28+00:00 https://basecamp.com/shapeup lenardsStop Running in Circles and Ship Work that Matters]]> product design process books visual-language visual-learning sketching https://pinboard.in/u:lenards/b:918b8b6bdd04/ 2019-07-31T23:20:09+00:00 http://blog.capwatkins.com/the-boring-designer lenards design ux article boring web webdev webdesign https://pinboard.in/u:lenards/b:0feccd85726b/ 2019-07-31T23:19:38+00:00 https://adamsilver.io/articles/form-design-from-zero-to-hero-all-in-one-blog-post/ lenards90% of the problems found in forms solved in a few hundred precious words.]]> design forms ux ui web webdev webdesign a11y css best-practices accessibility https://pinboard.in/u:lenards/b:eb63c75f1167/ 2019-07-24T20:34:37+00:00 https://dev.to/perborgen/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-29h lenardsIn this article, I’ll teach you how to use CSS Grid to create a super cool image grid.]]> css css-grid web webdev responsive-design design webdesign https://pinboard.in/u:lenards/b:db6ee7f0c63f/ 2019-07-24T17:25:05+00:00 https://github.com/edent/SuperTinyIcons/ lenardsUnder 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos - edent/SuperTinyIcons]]> web dev webdesign icons design https://pinboard.in/u:lenards/b:c07d15e1ade9/ 2019-07-12T16:49:14+00:00 https://codewords.recurse.com/issues/two/git-from-the-inside-out lenardsgit internals architecture programming design https://pinboard.in/u:lenards/b:77811cb320ff/ 2019-07-03T20:38:52+00:00 https://beautifulwebtype.com/ lenardsDiscover the best free fonts from Google and across the web. See beautiful examples, recommended pairings, OpenType features, and more.]]> open-source typography resources fonts design font web webdev typefaces https://pinboard.in/u:lenards/b:b5dbc4258522/ 2019-05-29T18:11:07+00:00 https://materialdesignicons.com/ lenardsicons material design css materialdesign resources svg webdesign https://pinboard.in/u:lenards/b:277e45a40259/ 2019-05-22T17:08:00+00:00 https://react-designer.github.io/react-designer/ lenardsEasy to configure, lightweight, editable vector graphics in your react components. ]]> react viz design webdesign web webdev https://pinboard.in/u:lenards/b:15a23f523833/ 2019-05-22T16:58:41+00:00 https://roughjs.com/ lenardsRough.js is a light weight javascript library that lets you draw graphics with a hand-drawn, sketchy, appearance.]]> svg drawing library viz visualization javascript js web webdev style design webdesign https://pinboard.in/u:lenards/b:80ebdf66ed69/