freeCodeCamp dev quiz - Graphics - GIF stands for Graphics Interchange Format. - JPEG stands for Joint Photographic Experts Group. - PNG stands for Portable Network Graphics. [Blender 16yo winner of UK young animator of the year | Hacker News](https://news.ycombinator.com/item?id=38282166) [Young Animator of the Year UK](https://younganimator.uk/winner/1699875910225x437970782709919500) - the barrier to entry for amazing animation is now gone! ## background gradients Make sure to see the Color Gradients section to generate gradients ```css background-image: linear-gradient( 120deg, hsl(200 50% 90%) 0%, hsl(200 100% 90%) 100% ); ``` ## blender DIFFICULT BUT AWESOME: Blender is this for 3D design. Completely unintuitive and follows none of the layout, keystroke or workflow conventions of other 3D design software; the most enthusiastic proponents will agree the learning curve is vertical. Anyone who masters it will swear by it, and always come back to use it even if they own commercial software suites. The interface and the ability to customize your UI lets a user get fairly close to an Autodesk layout. ## guides [The computer graphics industry got started at the university of Utah | Hacker News](https://news.ycombinator.com/item?id=36264744) [How the Computer Graphics Industry Got Started at the University of Utah - IEEE Spectrum](https://spectrum.ieee.org/history-of-computer-graphics-industry) ## icon fonts NOTE: icon fonts have been deprecated - use inline SVG icons instead ## tailwind breakpoints TAILWIND BREAKPOINTS - sm: 640px - md: 768px - lg: 1024px - xl: 1280px - 2xl: 1536px ## web css freeCodeCamp dev quiz - Web Dev - CSS - CSS media queries work with various types of media - Input devices, but MOSTLY output devices (printer, screen, speech, etc). - A breakpoint is a key to determine when to change the layout and adapt the new rules inside the media queries. - Relative units in CSS include rem, em, vh, and vw - Absolute include inches, pixels, centimeters, etc. - what are the common breakpoint dimensions - 320px - 480px: Mobile devices - 481px - 768px: iPads, Tablets - 769px - 1024px: Small screens, laptops - 1025px - 1200px: Desktops, large screens - 1201px and more - Extra large screens, TV ## 2d graphics - skia [WebKit switching to Skia for 2d graphics rendering | Hacker News](https://news.ycombinator.com/item?id=39438908) [WebKitGTK and WPEWebKit Switching to Skia for 2D Graphics Rendering | Carlos Garcia Campos](https://blogs.igalia.com/carlosgc/2024/02/19/webkit-switching-to-skia-for-2d-graphics-rendering/) ## 2d rendering [2D Rigid Body Collision Resolution | Hacker News](https://news.ycombinator.com/item?id=40463764) [What is a collision? — On Error Resume Next](https://www.sassnow.ski/rigid-body-collisions/1) ## 2d rendering - stippling [GitHub - pshihn/stippled-image: Custom element to show the stippled version of image](https://github.com/pshihn/stippled-image) ## 3d - CSS [3D in CSS | Hacker News](https://news.ycombinator.com/item?id=34315380) [3D in CSS](https://garden.bradwoods.io/notes/css/3d) [Beautiful CSS 3D Transform Perspective Examples in 2022 | Polypane, The browser for ambitious developers](https://polypane.app/css-3d-transform-examples) ## 3d modeling - c [Making a 3D modeler in C in a week | Hacker News](https://news.ycombinator.com/item?id=40239164) [Making a 3D Modeler, in C, in a Week ・ Daniel Hooper](https://danielchasehooper.com/posts/shapeup/) ## 3d modeling - coded graphics [Coding the anime "woosh" screen on Amiga | Hacker News](https://news.ycombinator.com/item?id=39494227) [Coding the anime "woosh" screen on Amiga - @dansalvato](https://dansalva.to/coding-the-anime-woosh-screen-on-amiga/) [Nightdrive | Hacker News](https://news.ycombinator.com/item?id=32947303) [James Stanley - Nightdrive](https://incoherency.co.uk/blog/stories/nightdrive.html) [Rendering my (billiard) balls in a fragment shader | Hacker News](https://news.ycombinator.com/item?id=32797057) [Rendering my balls in a fragment shader](https://www.getlazarus.org/pool/balls/) ## 3d modeling [John Walker, founder of Autodesk, has died | Hacker News](https://news.ycombinator.com/item?id=39297185) [John Walker (1949 - 2024) - The Happening World - Scanalyst](https://scanalyst.fourmilab.ch/t/john-walker-1949-2024/4305) [Show HN: I 3D scanned the interior of the Great Pyramid at Giza | Hacker News](https://news.ycombinator.com/item?id=33357197) [Go Inside the Great Pyramid of Giza in 3D | Digital Giza](https://giza.mused.org/en/guided/266/inside-the-great-pyramid) [Maverik - GNU Project - Free Software Foundation🆓](https://www.gnu.org/software/maverik/) [A Dutch graphic artist reconstructed Tenochtitlan in 3D | Hacker News](https://news.ycombinator.com/item?id=37973229) [A Portrait of Tenochtitlan • 3D reconstruction of the capital of the Aztec empire.](https://tenochtitlan.thomaskole.nl/index.html) [Show HN: I've spent nearly 5y on a web app that creates 3D apartments | Hacker News](https://news.ycombinator.com/item?id=41180504) [Roometron - Floor plans visualization](https://roometron.com/) ## 3d modeling - perspective [Horizon Line Perspective by MitchLeeuwe](https://twitter.com/MitchLeeuwe/status/1484687435724464129) Free - Tweet by https://twitter.com/MitchLeeuwe [Horizon Line Perspective by Amalas Rosa](https://twitter.com/AmalasRosa/status/1484887768589348867) Free - Tweet by https://twitter.com/AmalasRosa [Thomas Romain's Tips for Keeping Perspective](https://imgur.com/gallery/V5Prm) Free - In-depth guides for easy to complicated perspective. [simodasketch Tweet](https://twitter.com/simodasketch/status/1499695670223327232) Free - Rough perspective based on camera angle ## 3d rendering - Blender [I accidentally Blender VSE | Hacker News](https://news.ycombinator.com/item?id=39305994) [I accidentally Blender VSE · Aras' website](https://aras-p.info/blog/2024/02/06/I-accidentally-Blender-VSE/) [Swallowing the elephant into Blender | Hacker News](https://news.ycombinator.com/item?id=32177091) [Swallowing the elephant into Blender · Aras' website](https://aras-p.info/blog/2022/07/20/Swallowing-the-elephant-into-Blender/) [Blender and the Rabbids | Hacker News](https://news.ycombinator.com/item?id=27729331) [Blender and the Rabbids - blender.org](https://www.blender.org/user-stories/blender-and-the-rabbids/) [Blender: Wayland Support on Linux | Hacker News](https://news.ycombinator.com/item?id=33161572) [Wayland Support on Linux - Developer Blog](https://code.blender.org/2022/10/wayland-support-on-linux/) [Blender 3.1 | Hacker News](https://news.ycombinator.com/item?id=30617723) [3.1 - blender.org](https://www.blender.org/download/releases/3-1/) [The Grove 8 - Growing Trees in Blender | Hacker News](https://news.ycombinator.com/item?id=21306597) [The Grove release 8 - The Grove](https://www.thegrove3d.com/releases/the-grove-release-8/) ## 3d rendering - CGI [The beauty of CGI and simple design | Hacker News](https://news.ycombinator.com/item?id=34286622) [Rubenerd](https://rubenerd.com/the-beauty-of-cgi-and-simple-design-by-hales/) ## 3d rendering [Visual effects for the Indian blockbuster "RRR" | Hacker News](https://news.ycombinator.com/item?id=32790428) [Visual Effects for the Indian blockbuster "RRR" - blender.org](https://www.blender.org/user-stories/visual-effects-for-the-indian-blockbuster-rrr/) [The computers used to do 3D animation for Final Fantasy VII in 1996 | Hacker News](https://news.ycombinator.com/item?id=30947153) [The computers used to do 3D animation for Final Fantasy VII... in 1996.](https://lunduke.substack.com/p/the-computers-used-to-do-3d-animation) [My Room in 3D | Hacker News](https://news.ycombinator.com/item?id=28496650) [My Room in 3D](https://my-room-in-3d.vercel.app/) ## 3d rendering - spheres [Sphere Rendering: Flat Planets | Hacker News](https://news.ycombinator.com/item?id=40571727) [Sphere Rendering](https://emildziewanowski.com/flat-planets/) ## 3d rendering - threejs [3D Map of Shinjuku Station in Three.js | Hacker News](https://news.ycombinator.com/item?id=38786581) [Shinjuku Station Indoor](https://satoshi7190.github.io/Shinjuku-indoor-threejs-demo/) [Show HN: Browse HN Together in Three.js | Hacker News](https://news.ycombinator.com/item?id=32598062) ## animations - maps [Show HN: Ubähnchen - Animated subway map of Berlin | Hacker News](https://news.ycombinator.com/item?id=32647227) [Ubähnchen](https://xn--ubhnchen-1za.vercel.app/en) ## animations - visualizations [Fantasy Jodorowsky Tron visualisations | Hacker News](https://news.ycombinator.com/item?id=33752684) [Fantasy Jodorowsky Tron visualisations by Johnny Darrell | DJ Food](https://www.djfood.org/fantasy-jodorowsky-tron-visualisations-by-johnny-darrell/) ## art community [ArtProf](https://artprof.org/) Free - Online art community for a variety of different subjects, all free. Runs on donations and founded by former RISD professor. [ToonBoom Tutorials Channel](https://www.youtube.com/ZEBIRDBRAIN) Free - YouTube Channel dedicated to ToonBoom Tutorials by a Toonboom Staff. By https://twitter.com/Zebirdbrain [Toniko Pantoja's Animation Channel](https://www.youtube.com/channel/UCRTRqkhrehrY9hJJcLVUeRQ) Free - Tons of in-depth videos that get into the nitty-gritty of animating. For beginners and experts alike. [Open Animation](https://twitter.com/openanimation_) Free - Community-Run education center for all things animation! Join their discord for more info. [Creative Block](https://www.youtube.com/c/CreativeBlock/videos) Hosts Gene Goldstein and Violaine "Vee" Briat doodle and chat with artists about their creative journey, lives, and how they break through their creative block. [The Ink and Paint Folk](https://inkandpaintfolk.podbean.com/) Where we celebrate women and non-binary folk working in animation, and explore representation behind the scenes and on the screen. [Artsy — Discover, Buy, and Sell Fine Art](https://www.artsy.net/) [jconfrey Art](https://jackconfrey.com/work) [Google's Art & Culture experiments](https://experiments.withgoogle.com/collection/arts-culture) [Artsy](https://github.com/artsy/eigen) The art world in your pocket [GitHub - artsy/eigen: The Art World in Your Pocket or Your Trendy Tech Company's Tote, Artsy's mobile app.](https://github.com/artsy/eigen) [Web Graphic Experiments](https://experiments.p5aholic.me/) ## ascii ui [Show HN: Building terminal dashboards using ASCII/ANSI art and JavaScript | Hacker News](https://news.ycombinator.com/item?id=8888089) [GitHub - yaronn/blessed-contrib: Build terminal dashboards using ascii/ansi art and javascript](https://github.com/yaronn/blessed-contrib) [The Elegance of the ASCII Table | Hacker News](https://news.ycombinator.com/item?id=41040543) [The Elegance of the ASCII Table – Dan Q](https://danq.me/2024/07/21/ascii/) ## background design [BG Design Excersizes](https://ko-fi.com/britneythoreson/shop) Free - Excersizes for BG Design including design prompts and painting exersizes. By https://twitter.com/britneythoreson ## box shadows [So you think you know box shadows? | Hacker News](https://news.ycombinator.com/item?id=41024664) [How not to use box shadows](https://dgerrells.com/blog/how-not-to-use-box-shadows) [Box Shadows | Components AI](https://components.ai/box-shadow/fNa69Nol11prVPy0KlWd) ## canvas-based rendering [Google Docs will now use canvas based rendering | Hacker News](https://news.ycombinator.com/item?id=27129858) [Google Workspace Updates: Google Docs will now use canvas based rendering: this may impact some Chrome extensions](https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html) ## color - 12-bit [The 12-bit rainbow palette | Hacker News](https://news.ycombinator.com/item?id=33651724) [The 12-bit rainbow palette](https://iamkate.com/data/12-bit-rainbow/) ## color - 8-bit [Living Worlds: 8 Bit art animated with palette cycling (2012) | Hacker News](https://news.ycombinator.com/item?id=31402436) [Living Worlds in HTML5](http://www.effectgames.com/demos/worlds/) ## color - grayscale [Grayscale on 1-bit LCDs (2022) | Hacker News](https://news.ycombinator.com/item?id=34354213) [Grayscale on 1-bit LCDs - Wenting's Web Page](https://www.zephray.me/post/grayscale_lcd/) ## creative coders [yiwenl/Sketches](https://github.com/yiwenl/Sketches) [Yi-Wen Lin - Creative Coder](https://yiwenl.github.io/) [School for Poetic Computation](https://sfpc.study/) [Home - Gray Area](https://grayarea.org/) ## creative coding [GitHub - fluuuid/codedoodl.es: A curated showcase of creative coding sketches](https://github.com/fluuuid/codedoodl.es) [GitHub - tofuness/eex: Web experiments. Lots of Canvas stuff. View demos on project site (Chrome recommended):](https://github.com/tofuness/eex) [GitHub - project-codeology/codeology: Codeology brings to life the art and science of code. https://codeology.braintreepayments.com/](https://github.com/project-codeology/codeology) ## creative coding - python [GitHub - neozhaoliang/pywonderland: A tour in the wonderland of math with python.](https://github.com/neozhaoliang/pywonderland) ## creative coding - visual programming [GitHub - ivanreese/visual-programming-codex: Waypoints to the past and future of visual programming.](https://github.com/ivanreese/visual-programming-codex) ## css [How to change background-image opacity in CSS without affecting text | HTML/CSS - Coder Coder](https://coder-coder.com/background-image-opacity/) [Simple CSS Hack to Reduce Page Load Time | by Mayank Gupta | JavaScript in Plain English](https://javascript.plainenglish.io/simple-css-hack-to-reduce-page-load-time-366f7aaaa3be) [CSS's !important was added because of laws about font size for some text | Hacker News](https://news.ycombinator.com/item?id=30757259) [Steven Pemberton @stevenpemberton@mastodon.social on X: "CSS co-designer here. !important was added for one reason only: laws in the US that require certain text to be in a given font-size. !important stops the cascade from changing it. Anything else is probably misuse, and a sign you may not understand the cascade properly." / X](https://twitter.com/stevenpemberton/status/1505839184287870981) [An interactive mechanical contraption in pure CSS | Hacker News](https://news.ycombinator.com/item?id=32123804) [cohost! - post from @blackle](https://cohost.org/blackle/post/42994-contraption) [Is CSS an underrated skill? : webdev](https://old.reddit.com/r/webdev/comments/ww04cc/is_css_an_underrated_skill) [The Importance of Learning CSS | Hacker News](https://news.ycombinator.com/item?id=26346141) [The Importance of Learning CSS](https://www.joshwcomeau.com/css/the-importance-of-learning-css/) [Things I wish I'd known about CSS | Hacker News](https://news.ycombinator.com/item?id=23868355) [Things I wish I'd known about CSS | Dave Smyth](https://davesmyth.com/things-i-wish-id-known-about-css) [State of CSS | Hacker News](https://news.ycombinator.com/item?id=33287471) [State of CSS 2022 | Blog | web.dev](https://web.dev/blog/state-of-css-2022) [I've been learning the truth about CSS : r/ProgrammerHumor](https://www.reddit.com/r/ProgrammerHumor/comments/13ieiqi/ive_been_learning_the_truth_about_css/) [Solve most of IE's bugs](https://code.tutsplus.com/tutorials/9-most-common-ie-bugs-and-how-to-fix-them--net-7764) [awesome-css-group/awesome-css: A curated contents of amazing CSS :)](https://github.com/awesome-css-group/awesome-css) [CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets.](https://css-tricks.com/) Free CSS tricks and some unique ideas for beginners and advanced ## css animations [Pokemon Card Animation | Hacker News](https://news.ycombinator.com/item?id=33363331) [Pokémon Cards CSS Holographic Effect](https://web.archive.org/web/20240114124211/https://deck-24abcd.netlify.app/) ## css art [How I make CSS Art](https://yosracodes.hashnode.dev/how-i-make-css-art) ## css blending [Blending Modes in CSS - Ahmad Shadeed](https://ishadeed.com/article/blending-modes-css) [Blending Modes | Hacker News](https://news.ycombinator.com/item?id=33292199) [Blending Modes | Dan Hollick](https://typefully.com/DanHollick/blending-modes-KrBa0JP) ## css frameworks - tailwind [Tailwind is an Anti-Pattern. Stop using it. | JavaScript in Plain English](https://javascript.plainenglish.io/tailwind-is-an-anti-pattern-ed3f64f565f0) ## css grid [Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout | Hacker News](https://news.ycombinator.com/item?id=40130148) [Help us invent CSS Grid Level 3, aka "Masonry" layout | WebKit](https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/) [Grid for layout, Flexbox for components](https://ishadeed.com/article/grid-layout-flexbox-components/) [Printing Music with CSS Grid | Hacker News](https://news.ycombinator.com/item?id=40216057) [Printing music with CSS Grid - Blog - Cruncher - web development agency in Lausanne](https://cruncher.ch/blog/printing-music-with-css-grid/) [How I made Google's data grid scroll faster with a line of CSS | Hacker News](https://news.ycombinator.com/item?id=29018804) [How I made Google's data grid scroll 10x faster with one line of CSS | by Johan Isaksson | Medium](https://medium.com/@johan.isaksson/how-i-made-googles-data-grid-scroll-10x-faster-with-one-line-of-css-78cb1e8d9cb1) [Swipey image grids.](https://www.cassie.codes/posts/swipey-image-grids) [CSS Grid Areas | Hacker News](https://news.ycombinator.com/item?id=41262691) [CSS Grid Areas](https://ishadeed.com/article/css-grid-area/) ## css methodologies [OOCSS](http://oocss.org/) oOCSS concepts help us write components that are flexible, modular and interchangeable. [Atomic CSS](https://acss.io/) Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. [BEM](http://getbem.com/) Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. [SMACSS](http://smacss.com/) SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. ## css shadows [Designing Beautiful Shadows in CSS | Hacker News](https://news.ycombinator.com/item?id=28533458) [Designing Beautiful Shadows in CSS](https://www.joshwcomeau.com/css/designing-shadows/) ## css specific elements [The Ken Burns Effect Using CSS Animations](https://www.kirupa.com/html5/ken_burns_effect_css.htm) [5 CSS pseudo-elements you never knew existed - LogRocket Blog](https://blog.logrocket.com/5-css-pseudo-elements-you-never-knew-existed) [6 Useful Snippets - Naming Things](https://blog.bruce-hill.com/6-useful-snippets) [In Praise of the Unambiguous Click Menu | CSS-Tricks - CSS-Tricks](https://css-tricks.com/in-praise-of-the-unambiguous-click-menu) [Add scroll margin to all elements which can be targeted - Piccalilli](https://piccalil.li/quick-tip/add-scroll-margin-to-all-elements-which-can-be-targeted) [Buttons that Spark Joy - Frontend Horse](https://frontend.horse/articles/buttons-that-spark-joy) [Hover Effect for Headers](https://codepen.io/oliviale/pen/YgzNzK) [IPhone Notification Microinteraction](https://codepen.io/sdras/pen/LYELqPX) [CSS Perspective Text Hover](https://codepen.io/jamc92/details/KaMLvY) [Building split text animations](https://web.dev/building-split-text-animations) [Animating with Clip-Path | CSS-Tricks - CSS-Tricks](https://css-tricks.com/animating-with-clip-path) [Flexible Captioned Slanted Images ◆ 24 ways](https://24ways.org/2019/flexible-captioned-slanted-images) [Josh W. Comeau on Twitter](https://twitter.com/JoshWComeau/status/1401926170589863946) [Josh W. Comeau on Twitter](https://twitter.com/JoshWComeau/status/1170358024319492097?s=20) [Useful Pens for Everyday Front End Development - a Collection by Sarah Drasner on CodePen](https://codepen.io/collection/nMgKxJ?cursor=ZD0xJm89MCZwPTEmdj0yNjc5NTQ1) [swyx on Twitter](https://twitter.com/swyx/status/982786353216843776?s=20) [Minko Gechev on Twitter](https://twitter.com/mgechev/status/1354300680807329793?s=20) [CSS Gradient Text](https://codepen.io/argyleink/pen/OJMEpGp) [Adam Argyle on Twitter: "make focus a little more engaging ```css @media (prefers-reduced-motion: no-preference) { :focus { transition: outline-offset .25s ease; outline-offset: 5px; } } ``` try it https://t.co/ljXP5OiTlq https://t.co/b9d9D0kUDj"/Twitter](https://twitter.com/argyleink/status/1387072095159406596) [Adam Argyle on Twitter](https://twitter.com/argyleink/status/1282889809782927360) [Glassmorphism Creative Cloud App Redesign](https://codepen.io/TurkAysenur/pen/ZEpxeYm) [Backdrop Filters](https://codepen.io/a-trost/pen/dypQzwq) [Card Surge](https://card.surge.sh) [CSS scroll shadows](https://css-scroll-shadows.vercel.app/?bgColor=dd46d1&pxSize=15&shadowColor=222222) [Neumorphism/Soft UI CSS shadow generator](https://neumorphism.io/#f3d2c3) [Neumorphism.io](https://neumorphism.io/#55b9f3) Denerate Soft-UI CSS shadow code [CSS Arrow Please - By Simon Hoejberg - @shojberg](https://cssarrowplease.com/) Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. [Calc Generator](https://fpece.com/calc-generator) Tool for easily creating precise Calc() CSS functions [CSS custom property Hover Effects](https://codepen.io/m4r1vs/pen/qVReQz) [CSS Text Effects - Five Minimal Examples | Let's Build UI](https://letsbuildui.dev/articles/css-text-effects-five-minimal-examples) [Jen Simmons Labs](https://labs.jensimmons.com/) [Web Design Experiments by Jen Simmons](https://labs.jensimmons.com/#shapes) [Don't attach tooltips to document.body - Atif Afzal](https://atfzl.com/don-t-attach-tooltips-to-document-body) [todo: implement theme-color · Issue #19 · sw-yx/swyxkit · GitHub](https://github.com/sw-yx/swyxkit/issues/19) [92 Beautiful CSS buttons examples - CSS Scan](https://getcssscan.com/css-buttons-examples) [93 Beautiful CSS box-shadow examples - CSS Scan](https://getcssscan.com/css-box-shadow-examples) [CSS Scan The fastest and easiest way to check, copy and edit CSS](https://getcssscan.com/) [hnldesign - btn-deluxe, Boostrap integration of Josh Comeau's 3D Button](https://code.hnldesign.nl/btn-deluxe) [BonBon - Sweet CSS3 Buttons](https://simurai.com/archive/buttons) [Buttons Generator - Marko Denic - Web Developer](https://markodenic.com/tools/buttons-generator) [After Dark Screensavers in CSS | Hacker News](https://news.ycombinator.com/item?id=35031545) [After Dark Screensavers in CSS](https://www.bryanbraun.com/after-dark-css/) [Design v18 | CSS-Tricks - CSS-Tricks](https://css-tricks.com/design-v18) [Sam Selikoff on Twitter](https://twitter.com/samselikoff/status/1204412222593568769?s=20) [andrew levine on Twitter: "These 2 lines ending up being responsible for the massive 30s+ style recalculation breaking the app: code[class*='language-'], pre[class*='language-'] { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; }"/Twitter](https://twitter.com/drewml/status/1115339490179072000?s=20) [Font-size: An Unexpectedly Complex CSS Property - In Pursuit of Laziness](https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property) [Creating custom easing effects in CSS animations using the linear() function | MDN Blog](https://developer.mozilla.org/en-US/blog/custom-easing-in-css-with-linear/) [CSS Tips | Hacker News](https://news.ycombinator.com/item?id=26945263) [CSS Tips - Marko Denic - Web Developer](https://markodenic.com/css-tips/) [Shader-like holographic effects with CSS | Hacker News](https://news.ycombinator.com/item?id=32016391) [Holograms, light-leaks and how to build CSS-only shaders - Robb Owen](https://robbowen.digital/wrote-about/css-blend-mode-shaders/) [CSS Gradients that avoid the "gray dead zone" | Hacker News](https://news.ycombinator.com/item?id=29894608) [Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient.](https://www.joshwcomeau.com/css/make-beautiful-gradients/) [The Gooey Effect | CSS-Tricks - CSS-Tricks](https://css-tricks.com/gooey-effect) [Meng To on Twitter](https://twitter.com/MengTo/status/1311029761490198528?s=20) [CSS filter learning • REPL • Svelte](https://svelte.dev/repl/defc901c5f434ed4a76161605cf1db76?version=3.29.0) [Duotone using CSS blend modes - José M. Pérez](https://jmperezperez.com/blog/duotone-using-css-blend-modes) [CSS only Variable font demo using Decovar Regular](https://codepen.io/mandymichael/details/dJZQaz) [Details with Backgrounds when Open](https://codepen.io/chriscoyier/pen/wvJmqjY) [Learn About CSS Custom Properties Through Clever Uses of Them - DEV Community](https://dev.to/chriscoyier/learn-about-css-custom-properties-through-clever-uses-of-them-2fjo) [How the Z-index Property Works - Stacking Order of Elements in CSS](https://www.freecodecamp.org/news/z-index-property-and-stacking-order-css) [Goodbye, CSS-Tricks | Hacker News](https://news.ycombinator.com/item?id=34864701) [Goodbye, CSS-Tricks! - Geoff Graham](https://geoffgraham.me/goodbye-css-tricks/) [Spinning Diagrams with CSS | Hacker News](https://news.ycombinator.com/item?id=35646199) [Spinning Diagrams with CSS](https://x.st/spinning-diagrams-with-css/) [Bubble sort in pure CSS | Hacker News](https://news.ycombinator.com/item?id=38145625) [Bubble Sort...in PURE CSS? [No JS] 😱 - DEV Community](https://dev.to/grahamthedev/bubble-sortin-pure-css-no-js-3bb1) [Hover effects](http://codepen.io/honglio/pen/FKyxG) [Effekts](http://h5bp.github.io/Effeckt.css/) [Box](http://desandro.github.io/3dtransforms/examples/box-02-show-sides.html) [Advanced animations](https://codersblock.com/blog/the-surprising-things-that-css-can-animate/) [10 Amazing Examples of CSS, SVG & Canvas Masks In Action](https://speckyboy.com/css-svg-canvas-masks) ## css specificity [Calculating CSS Specificity](https://css-tricks.com/specifics-on-css-specificity/) ## directx [Building the DirectX shader compiler better than Microsoft? | Hacker News](https://news.ycombinator.com/item?id=39324800) [Building the DirectX shader compiler better than Microsoft? | Hexops' devlog](https://devlog.hexops.com/2024/building-the-directx-shader-compiler-better-than-microsoft/) ## emoji [Which emoji scissors close (2020) | Hacker News](https://news.ycombinator.com/item?id=33360171) [Which emoji scissors close](https://wh0.github.io/2020/01/02/scissors.html) ## gaussian splat [Show HN: Real-Time 3D Gaussian Splatting in WebGL | Hacker News](https://news.ycombinator.com/item?id=37470611) [WebGL Gaussian Splat Viewer](https://antimatter15.com/splat/) ## glitches [The Glitch Gallery](https://glitchgallery.org/) ## gui - components - hamburger menus [Using hamburger menus? Try sausage links (2019) | Hacker News](https://news.ycombinator.com/item?id=30697719) [No no no. Hamburger menus are terrible[0] for navigation, and this is worse. The... | Hacker News](https://news.ycombinator.com/item?id=30712599) [GitHub - mantinedev/mantine: React components library with native dark theme support](https://github.com/mantinedev/mantine) [Mantine](https://mantine.dev) ## gui - js [Content-aware image resizing in JavaScript | Trekhleb](https://trekhleb.dev/blog/2021/content-aware-image-resizing-in-javascript) ## gui - rust [Advice for the next dozen Rust GUIs | Hacker News](https://news.ycombinator.com/item?id=32112846) [Advice for the next dozen Rust GUIs | Raph Levien's blog](https://raphlinus.github.io/rust/gui/2022/07/15/next-dozen-guis.html) [Rust 2021: GUI | Hacker News](https://news.ycombinator.com/item?id=24631611) [Rust 2021: GUI | Raph Levien's blog](https://raphlinus.github.io/rust/druid/2020/09/28/rust-2021.html) [Building a Slack/Discord alternative with Tauri/Rust | Hacker News](https://news.ycombinator.com/item?id=36408633) [Building a Slack/Discord alternative with Tauri/Rust linen #blog](https://www.linen.dev/s/linen/t/12647025/building-a-slack-discord-alternative-with-tauri-rust) ## html+css [HTML and CSS techniques to reduce your JavaScript | Hacker News](https://news.ycombinator.com/item?id=27388691) [Web Performance Calendar - HTML and CSS techniques to reduce your JavaScript](https://calendar.perfplanet.com/2020/html-and-css-techniques-to-reduce-your-javascript/) ## icon fonts [Icon Fonts are Awesome](https://css-tricks.com/examples/IconFont/) [Stop Using Icon Fonts by Michael Irigoyen](https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/) ## illustrations [Ask HN: What's your favorite illustration in computer science? | Hacker News](https://news.ycombinator.com/item?id=34322303) ## image dithering [Ditherpunk: The article I wish I had about monochrome image dithering | Hacker News](https://news.ycombinator.com/item?id=25633483) [Ditherpunk — The article I wish I had about monochrome image dithering — surma.dev](https://surma.dev/things/ditherpunk/) ## js d3 [10 Years of Open-Source Visualization: Did I learn anything from D3.js? | Hacker News](https://news.ycombinator.com/item?id=26240339) [10 Years of Open-Source Visualization / Mike Bostock | Observable](https://observablehq.com/@mbostock/10-years-of-open-source-visualization) [Show HN: A gallery of graphs built with React and D3.js | Hacker News](https://news.ycombinator.com/item?id=36447871) ## js flutter [Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop | Hacker News](https://news.ycombinator.com/item?id=19853247) [Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop - Google for Developers](https://developers.googleblog.com/2019/05/Flutter-io19.html) [What is Flutter and Why You Should Learn it in 2020](https://www.freecodecamp.org/news/what-is-flutter-and-why-you-should-learn-it-in-2020) [Flutter 2 | Hacker News](https://news.ycombinator.com/item?id=26332944) [Announcing Flutter 2 - Google for Developers](https://developers.googleblog.com/2021/03/announcing-flutter-2.html) [Flutter 3 | Hacker News](https://news.ycombinator.com/item?id=31344863) [What's new | Flutter](https://docs.flutter.dev/release/whats-new#may-11-2022-google-io-edition-flutter-3-release) ## js react [Things you forgot (or never knew) because of React | Hacker News](https://news.ycombinator.com/item?id=37131802) [Things you forgot (or never knew) because of React - Josh Collinsworth blog](https://joshcollinsworth.com/blog/antiquated-react) [Introducing react.dev | Hacker News](https://news.ycombinator.com/item?id=35186812) [Introducing react.dev - React](https://react.dev/blog/2023/03/16/introducing-react-dev) [reactjs/react.dev: The React documentation website](https://github.com/reactjs/react.dev) [React v18.0 | Hacker News](https://news.ycombinator.com/item?id=30844414) [React v18.0 - React](https://react.dev/blog/2022/03/29/react-v18) [React Developer Tools - React](https://react.dev/learn/react-developer-tools) React debugging tools to the Chrome Developer Tools. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. [The new wave of React state management | Hacker News](https://news.ycombinator.com/item?id=31959289) [The new wave of React state management](https://frontendmastery.com/posts/the-new-wave-of-react-state-management/) [React I love you, but you're bringing me down | Hacker News](https://news.ycombinator.com/item?id=32911492) [React I Love You, But You're Bringing Me Down](https://marmelab.com/blog/2022/09/20/react-i-love-you.html) [React Native for Windows and Mac | Hacker News](https://news.ycombinator.com/item?id=23160075) [React Native for Windows + macOS · Build native Windows & macOS apps with Javascript and React](https://microsoft.github.io/react-native-windows/) [Show HN: A portfolio website simulating macOS's GUI using React | Hacker News](https://news.ycombinator.com/item?id=27084995) [Xiaohan Zou's Portfolio](https://portfolio.zxh.io/) [What's New in React 18 Alpha? Concurrency, Batching, the Transition API and More](https://www.freecodecamp.org/news/whats-new-in-react-18) [React is holding me hostage | Hacker News](https://news.ycombinator.com/item?id=35061672) [React Is Holding Me Hostage](https://emnudge.dev/blog/react-hostage) [Building apps in minutes, not months | Hacker News](https://news.ycombinator.com/item?id=28566843) [LN 001: Composing application interfaces](https://alexanderobenauer.com/labnotes/001/) ## js react - nextjs [Next.js 12 | Hacker News](https://news.ycombinator.com/item?id=29001721) [Next.js 12 | Next.js](https://nextjs.org/blog/next-12) [Next.js 10 | Hacker News](https://news.ycombinator.com/item?id=24908729) [Next.js 10 | Next.js](https://nextjs.org/blog/next-10) [How to Optimize Next.js Web Apps for Better Performance](https://www.freecodecamp.org/news/optimize-nextjs-web-apps-for-better-performance/) ## life drawing [PaintingDemos: Life Drawing Techniques](https://paintingdemos.com/life-drawing-techniques-and-methods/) Free - Life Drawing techniques article on PaintingDemos. [Registering Materials in CSP](https://twitter.com/explodikid/status/1391478594891776001) Free - Thread by https://twitter.com/explodikid [Skintone Mixing advice by KupaDraws](https://twitter.com/Kupadraws/status/1370468134214369281) Free - Advice on getting richer skintone rendering. By https://twitter.com/Kupadraws [Griz and Norm's Tuesday Tips](https://grizandnorm.tumblr.com/tagged/100tuesdaytips) Free - Great bite-sized tips on everything for drawing and painting. ## linear interpolation [Lerp | Hacker News](https://news.ycombinator.com/item?id=35467043) [Lerp](https://rachsmith.com/lerp/) ## moire [Moiré No More | Hacker News](https://news.ycombinator.com/item?id=28663719) [Moiré no more | Revue](https://web.archive.org/web/20210901065110/https://www.getrevue.co/profile/shift-happens/issues/moire-no-more-688319) No algorithms or fighting to be seen in a news feed, just your writing in front of your subscribers, without the guesswork. ## OpenUSD [Pixar, Adobe, Apple, Autodesk, and Nvidia form alliance for OpenUSD | Hacker News](https://news.ycombinator.com/item?id=36960625) [Pixar, Adobe, Apple, Autodesk, and NVIDIA form Alliance for OpenUSD - Apple](https://www.apple.com/newsroom/2023/08/pixar-adobe-apple-autodesk-and-nvidia-form-alliance-for-openusd/) [GitHub - vfxpro99/usd-resources: A curated list of USD projects and resources](https://github.com/vfxpro99/usd-resources) ## parallax [Keith Clark](http://keithclark.co.uk/articles/pure-css-parallax-websites/) (2014) Pure CSS Parallax Websites ## photo editors - Inkscape [Inkscape is hiring: Accelerating the GTK4 migration | Hacker News](https://news.ycombinator.com/item?id=35650663) [Inkscape is hiring: Accelerating the GTK4 migration | Inkscape](https://inkscape.org/news/2023/04/17/inkscape-hiring-accelerating-gtk4-migration/) ## photo editors - krita [Krita AI Diffusion | Hacker News](https://news.ycombinator.com/item?id=38342670) [GitHub - Acly/krita-ai-diffusion: Streamlined interface for generating images with AI in Krita. Inpaint and outpaint with optional text prompt, no tweaking required.](https://github.com/Acly/krita-ai-diffusion) ## photo editors - photoshop [Adobe Photoshop Source Code (2013) | Hacker News](https://news.ycombinator.com/item?id=40368016) [Adobe Photoshop Source Code - CHM](https://computerhistory.org/blog/adobe-photoshop-source-code/) ## photo editors - specific edits [Will Gallego](https://codeascraft.com/2017/05/30/reducing-image-file-size-at-etsy/) (2017) Reducing Image File Size at Etsy ## photo files - GIF [Animated GIF uses over 35GB RAM in Acorn on M1 Mac, likely due to memory leak | Hacker News](https://news.ycombinator.com/item?id=27230427) [Gus Mueller on Twitter: "Well this is interesting. I've got an animated gif that I can open up in Acorn on x86, and it uses about 360MB of memory. I open the same image on Apple Silicon, and it takes up 35.51 GIGABYTES. Methinks there's a memory leak in CG* somewhere."](https://web.archive.org/web/20210520060828/https://twitter.com/ccgus/status/1395145361136644098) [The fastest GIF does not exist | Hacker News](https://news.ycombinator.com/item?id=30405815) [The Fastest GIF Does Not Exist](https://www.biphelps.com/blog/The-Fastest-GIF-Does-Not-Exist) ## photo files - JPEG [Jpegli: A new JPEG coding library | Hacker News](https://news.ycombinator.com/item?id=39920644) [Introducing Jpegli: A New JPEG Coding Library | Google Open Source Blog](https://opensource.googleblog.com/2024/04/introducing-jpegli-new-jpeg-coding-library.html) [Malloc broke Serenity's JPGLoader, or: how to win the lottery (2021) | Hacker News](https://news.ycombinator.com/item?id=40896102) [How malloc broke Serenity's JPGLoader, or: how to win the lottery - sin-ack's writings](https://sin-ack.github.io/posts/jpg-loader-bork/) [JPEG XL: How it started, how it's going | Hacker News](https://news.ycombinator.com/item?id=36801448) [Rise of JPEG XL: Apple's Support and Image Compression Insights](https://cloudinary.com/blog/jpeg-xl-how-it-started-how-its-going) [JPEG XL and the Pareto Front | Hacker News](https://news.ycombinator.com/item?id=39559281) [JPEG XL and the Pareto Front](https://cloudinary.com/blog/jpeg-xl-and-the-pareto-front) ## photo files - PNG [The smallest 256x256 single-color PNG file, and where you've seen it (2015) | Hacker News](https://news.ycombinator.com/item?id=31115857) [The smallest 256x256 single-color PNG file, and where you've seen it](https://www.mjt.me.uk/posts/smallest-png/) [PNG Parser Differential | Hacker News](https://news.ycombinator.com/item?id=29573792) [PNG Parser Differential](https://www.da.vidbuchanan.co.uk/widgets/pngdiff/) ## photostudy [Photostudy Approach Process by PingaPenguins](https://twitter.com/pingapenguins/status/1370011223513731072) Free - In-depth photostudy tutorial, 5 tweet thread. By https://twitter.com/pingapenguins ## pixel art [Blake Reynolds](http://www.dinofarmgames.com/a-pixel-artist-renounces-pixel-art/) (2015) A Pixel Artist Renounces Pixel Art [Pixel Joint](http://pixeljoint.com/pixels/new_icons.asp) Highest Rated Pixel Art Pixel Joint is all about the pixel art community. The site was started in September 2004 [Pixelation](https://pixelation.org) A standalone forum dedicated which hosts lots of studies and deeper discussions of pixel art. [Retronator Magazine](https://medium.com/retronator-magazine) Pixel Art, Gaming & Saturated Colors [Matej ‘Retro’ Jan](https://medium.com/retronator-magazine/artistsontwitter-ad68bce76e24) (2017) #artistsontwitter by Retronator [Pixel Art: Common Mistakes (2020) | Hacker News](https://news.ycombinator.com/item?id=31617921) [PIXEL ART: COMMON MISTAKES](https://derekyu.com/makegames/pixelart2.html) [Four-Byte Burger [video] | Hacker News](https://news.ycombinator.com/item?id=35654621) [Four-Byte Burger - YouTube](https://www.youtube.com/watch?v=i4EFkspO5p4) [Isometric Pixel Art | Hacker News](https://news.ycombinator.com/item?id=33814573) [Pixelblog - 41 - Isometric Pixel art - SLYNYRD](https://www.slynyrd.com/blog/2022/11/28/pixelblog-41-isometric-pixel-art) ## pose references [Walking Guide by Kris Wimberly](https://twitter.com/swaggletoof/status/1060263675028598786) Free - Tweet about walking pose reminder. By https://twitter.com/swaggletoof ## production renderer [Cycles X | Hacker News](https://news.ycombinator.com/item?id=26916196) [Cycles X - Developer Blog](https://code.blender.org/2021/04/cycles-x/) ## raycasting [City in a Bottle – A 256 Byte Raycasting System | Hacker News](https://news.ycombinator.com/item?id=40416109) [City In A Bottle – A 256 Byte Raycasting System | Killed By A Pixel](https://frankforce.com/city-in-a-bottle-a-256-byte-raycasting-system/) ## ray marching [Ray Marching and Signed Distance Functions](https://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/) ## ray tracing [Spectral Ray Tracing | Hacker News](https://news.ycombinator.com/item?id=40035552) [Spectral Ray Tracing](https://larswander.com/writing/spectral-ray-tracing/) [POV-Ray – The Persistence of Vision Raytracer (2021) | Hacker News](https://news.ycombinator.com/item?id=40643207) [POV-Ray - The Persistence of Vision Raytracer](https://www.povray.org/) [Photorealistic Path Tracer | Hacker News](https://news.ycombinator.com/item?id=20489570) [Yūbinkyoku 🏣 - Tristan Hume](https://thume.ca/ray-tracer-site/) [Ray tracing in notepad.exe at 30 FPS | Hacker News](https://news.ycombinator.com/item?id=23246221) [Ray Tracing in Notepad.exe at 30 FPS (2020) | Hacker News](https://news.ycombinator.com/item?id=33151402) [Kyle Halladay - Ray Tracing In Notepad.exe At 30 FPS](https://kylehalladay.com/blog/2020/05/20/Rendering-With-Notepad.html) ## rendering - exponential smoothing [My favourite animation trick: exponential smoothing (2023) | Hacker News](https://news.ycombinator.com/item?id=39637487) [My favourite animation trick: exponential smoothing | lisyarus blog](https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html) ## rendering history [Black Triangles (2014) | Hacker News](https://news.ycombinator.com/item?id=38769850) [Black Triangles](https://rampantgames.com/blog/?p=7745) ## rendering - OpenGL [Drawing Lines is Hard](https://mattdesl.svbtle.com/drawing-lines-is-hard) ## rendering - terrain [Voxel Space: Comanche's terrain rendering in less than 20 lines of code (2020) | Hacker News](https://news.ycombinator.com/item?id=26631995) [GitHub - s-macke/VoxelSpace: Terrain rendering algorithm in less than 20 lines of code](https://github.com/s-macke/VoxelSpace) [Voxel Space project demonstration](https://s-macke.github.io/VoxelSpace/VoxelSpace.html) ## rotations [Rotation with three shears | Hacker News](https://news.ycombinator.com/item?id=34485871) [cohost!](https://cohost.org/tomforsyth/post/891823-rotation-with-three) ## screenshots - cli [xBlog: How to Take Screenshots of Webpages from the Command Line Boolean World](https://www.booleanworld.com/take-screenshots-webpages-command-line) ## screenshots - macos [macOS screenshot tricks to impress your co-workers | Hacker News](https://news.ycombinator.com/item?id=31769683) [4 macOS Screenshot Tricks To Impress Your Co-Workers](https://sal.dev/macos/macos-screenshotting-tips-and-tricks/) ## shaders [Human Shader | Hacker News](https://news.ycombinator.com/item?id=36779855) [Human Shader](https://humanshader.com/) [Write shaders for the (sim) Vegas sphere | Hacker News](https://news.ycombinator.com/item?id=38463832) [The Sphere](https://whenistheweekend.com/theSphere.html) ## simulating reality [Simulating fluids, fire, and smoke in real-time | Hacker News](https://news.ycombinator.com/item?id=38698907) [Simulating Fluids, Fire, and Smoke in Real-Time](https://andrewkchan.dev/posts/fire.html) ## slideshows and presentation creators - storyboarding [Drawing and Composition for Visual Storytelling](http://www.floobynooby.com/comp1.html#anchor) Free - Goldmine for storyboarding and storytelling tips and tricks. Very large article with sequences, videos, etc. [Dwoo Minute Tips](https://www.youtube.com/c/dwooman_art) Free - My FAVORITE free storyboard resource. Bite-sized tips for all things storyboarding. By https://twitter.com/Dwooman_art [Ben Juwono's General Boarding Tips & Tricks](https://twitter.com/i/events/986035683251769344) Free - Storyboard tweets by Storyboard Artist and Director Ben Juwono https://twitter.com/e1n [Storyboard Revisions Guide for TV Animation](https://twitter.com/Hug_bees/status/1171958903459864578) Free - Tweet thread about Storyboard Revisions by https://twitter.com/Hug_bees. One of the few resources for revisionists. [Storyboard Artist Tips, Tricks, and Tutorials](https://twitter.com/i/events/1110339067240038400) Free - Collection of short storyboard artist tweets by https://twitter.com/batshaped [Bridget Underwood | Perspective is a *crucial* skill for any story artist to have. I wanted to break down some of my personal approach and thoughts! This is… | Instagram](https://www.instagram.com/p/CDKYLefDoZl/) Free - Strong background perspective in storyboards. By https://www.instagram.com/bridgitiri/ [Lighting Tip for Storyboards](https://www.instagram.com/p/CDaev83D8VR/) Free - Lighting tips in storyboarding. By https://www.instagram.com/mikejmoloney/ [Mike Moloney | Storyboard | Lens flair tip for storyboard pro. I made this Tuesday night but have been so busy haven’t had time to post. I like making lens flairs… | Instagram](https://www.instagram.com/p/CDsBJDrDmby/) Free - Lens Flare tip By https://www.instagram.com/mikejmoloney/ [Regular Show Storyboarding](https://spinadoodles.tumblr.com/post/146711635001/if-youve-ever-been-curious-about-what-its-like) Free - Another comic by Sam Spina [Storyboarding Top Tips](https://www.brownbagfilms.com/labs/entry/storyboarding-top-tips-with-irene-martini-tutorial) Free - An excellent, easy-to-follow boarding guide by Irene Martini. [Hookups in Storyboaring](https://twitter.com/enenkay/status/1133537159741288448?s=20) Free - Thread about hooking up drawings betweenshots. [Tip for Early Storyboard Artists](https://twitter.com/swaggletoof/status/1114303477130203136?s=20) Free - Something to remember while you're boarding. By https://twitter.com/swaggletoof [Flooby Nooby: The Cinematography of "The Incredibles" Part 1](https://floobynooby.blogspot.com/2013/12/the-cinematography-of-incredibles-part-1.html) Free - In-depth look [Common Staging Mistake](https://twitter.com/Lowtwait/status/1166406509309227009?s=20) Free - Commong staging mistake in boards and a few solutions. Tweet thread by https://twitter.com/Lowtwait [What I've Learned from TLoK: Storyboards](https://twitter.com/MathiasZamecki/status/1380912605762629635?s=20) Free - Tweet Thread outlining takeaway from looking at boards from Legend of Korra. By https://twitter.com/MathiasZamecki [Legend of Korra (Bk5 Ep5)](https://vimeo.com/146140739) Artist: Steve Ahn https://twitter.com/steveahn82 [Legend of Korra (Bk4 Ep2)](https://vimeo.com/145811082) Artist: Steve Ahn https://twitter.com/steveahn82 ## textures [Cobble_stone - The texture of your childhood (2021) | Hacker News](https://news.ycombinator.com/item?id=35086866) [cobble_stone (The Texture of Your Childhood) · Render96/Render96Wiki Wiki · GitHub](https://github.com/Render96/Render96Wiki/wiki/cobble_stone-%28The-Texture-of-Your-Childhood%29) [Ash's Bite Size Board Zine](https://onihat.gumroad.com/l/ASH_SB-SC01_A) Free - Mini digital zine with storyboarding and character acting tips. By https://twitter.com/oni_hat ## tui [TTE: Terminal Text Effects | Hacker News](https://news.ycombinator.com/item?id=40503202) [Effects Showroom - TerminalTextEffects Docs](https://chrisbuilds.github.io/terminaltexteffects/showroom/) ## vector graphics and SVG icons [Accessible SVG Icons | CSS-Tricks - CSS-Tricks](https://css-tricks.com/accessible-svg-icons) ## vector graphics and SVG [Draw SVG rope using JavaScript | Hacker News](https://news.ycombinator.com/item?id=34197379) [Draw SVG rope using JavaScript · Muffin Man](https://muffinman.io/blog/draw-svg-rope-using-javascript/) [Experimenting a new syntax to write SVG | Hacker News](https://news.ycombinator.com/item?id=32990177) [Experimenting A New Syntax To Write SVG](https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg) [Magical SVG Techniques | Hacker News](https://news.ycombinator.com/item?id=31502186) [Magical SVG Techniques - Smashing Magazine](https://www.smashingmagazine.com/2022/05/magical-svg-techniques/) [Cassie Evans on Twitter: "Yo! SVG fam! I'm demo hoarding. Have you seen any examples of SVG being used in interesting ways in the wild wild web? I'm NOT looking for illustrations. Stuff like filters, UI accents, background patterns and masks. Hit me with your best stuff!"/Twitter](https://twitter.com/cassiecodes/status/1383432725059674112?s=20) [Making noisy SVGs | Hacker News](https://news.ycombinator.com/item?id=38559607) [Making noisy SVGs - Daniel Immke](https://daniel.do/article/making-noisy-svgs/) [TinyVG: A challenger to the throne of vector graphics | Hacker News](https://news.ycombinator.com/item?id=29629792) [A challenger to the throne of vector graphics. SVG is dead, long live TinyVG! - Zig NEWS](https://zig.news/xq/a-challenger-to-the-throne-of-vector-graphics-svg-is-dead-long-live-tinyvg-4on8) [hp2xx - GNU Project - Free Software Foundation (FSF)🆓](https://www.gnu.org/software/hp2xx/) [A Trick That Makes Drawing SVG Lines Way Easier | CSS-Tricks - CSS-Tricks](https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier) [SVG Triangle of Compromise | Hacker News](https://news.ycombinator.com/item?id=41070709) [SVG triangle of compromise](https://me.micahrl.com/blog/svg-triangle-of-compromise/) ## Video Quality And Types Of Releases [guides/video_quality_and_types_of_releases - Piracy](https://old.reddit.com/r/Piracy/wiki/guides/video_quality_and_types_of_releases) ### On Bitrate and Codecs Just a note before we go into codecs: a 'container' is the name for the small wrapper that contains video data and codec data. It can be identified by its file extension. MP4, MKV, AVI, FLV, and WEBM are examples. Extra note: An MKV can hold any kind of video, audio, and subtitles, including all the ones listed below. Codecs: A 'codec' is a specification on how to convert from raw data to images on a screen. When a video file is stored, there is a specific codec that converts that data into what you see. Video files that use a specific codec are said to be 'encoded' using that codec. Some codecs are better than others in the sense that they can get more quality using fewer bits (smaller filesizes) than others. We describe these codecs as 'more efficient'. Here is a small list of popular codecs: Xvid Xvid isn't actually a codec, it's a program that encodes videos. The name for the codec it uses is MPEG-4 ASP, but that never stuck. Quality-wise, it was OK for it's time (2001!), but doesn't hold a candle to modern codecs. Usually contained in AVI containers. H.264 Also called MPEG-4 AVC, this codec is used everywhere, basically. Usually contained in MP4, if not MKV. VP9 Developed by Google and used in YouTube and WEBM, this codec usually beats out H.264 by a small margin. Since no media standard uses it (Blu-Rays use H.264 or H.265), you won't see this one very often. Usually contained in WEBM H.265 Also called HEVC. It is the successor to H264 and it aims to reduce filesizes by up to 50% compared to H264, though this number is not a blanket figure to be applied to every single scenario. H265 is more effective at higher resolutions, so the 50% figure might be applicable to 4K, though the savings can still be considerable at 1080p and 720p. Many people choose to download small-sized H265 content that would otherwise be too blurry on H264. Though H264 still reigns supreme at higher bitrates, as x265 (the encoding tool used to create H265 video) is still not as mature as x264, which is why many quality-oriented private trackers still maintain a higher focus on x264-encoded content. Some 1080p Blu-Rays and all 4K Blu-Rays use this one. Usually contained in MP4, if not MKV. ### Resolution Resolution refers to the number of pixels in an image or a single frame of a video file. It is usually expressed in the form WxH, where W is the width of the frame and H is the height. Most televisions are 'Full HD', which means 1920x1080. 'UHD', on the other hand, is twice the width and height to make 3840x2160. Most individuals and companies call this specific resolution '4K'. (Historically, the term '4K' referred to a slightly wider 4096x2160, but for the sake of simplicity, this article takes the most commonplace definition.) Additionally, resolution can be expressed as the height of the image followed by a 'p'. 1920x1080 becomes 1080p, 3840x2160 (4K) becomes 2160p. This can be a very loose definition, however, as movies that are produced at a wider aspect ratio will be called 1080p, yet will have a resolution 1920x800. ### Why do Movie/TV-Show torrents vary so wildly in file size? A: Different compression settings, resulting in different bitrates. The term 'bitrate' refers to the number of bits (ones and zeros) per second for a video or audio file. This number directly affects both quality and filesize. A video file with a high bitrate will result in a larger filesize than one with a low bitrate (assuming equal runtime), and will be more detailed. How much of this detail you see will be dependent upon you and your set up (ie. the size of your screen, how far you sit from it). Most people will settle at a bitrate of 4000 kbps (4 Mbps) at 720p (Which would give you a 2GiB file a 1-hour movie, or 4GiB for a 2-hour movie). When watching on a small screen (like a phone), the requirements will go even lower (down to 1 Mbps or maybe even lower). For a more visual description, consider the image comparisons linked below. Video runtime: 2 hr 50 min. [Image 1](https://i.ibb.co/SwzV8NX/bomi-snapshot-2020-01-08-00-55-05.png) (AVC/1080p/24.2 Mbps/31 GiB). Cropped [Image.](https://files.catbox.moe/dywl65.png) [Image 2](https://i.ibb.co/8YC5fXq/bomi-snapshot-2019-12-25-20-08-04.png) (x264/1080p/10.7 Mbps/15 GiB). [Image 3](https://i.ibb.co/fQYr3F1/bomi-snapshot-2020-01-08-02-01-49.png) (x264/720p/5.85 Mbps/9 GiB). [Image 4](https://i.ibb.co/XLQCncc/bomi-snapshot-2019-12-25-20-07-39.png) (x264/1080p/0.15 Mbps/example shot). As you can see, the last image has been aggressively compressed and is completely bitstarved. This is why resolution is not an indicator of quality, but rather an indicator of maximum quality. The better indicator of quality is bitrate. A higher bitrate yields better quality at the cost of filesize. Conversely, a lower bitrate takes up less space, but hurts image quality. Dual-layer Blu-Ray discs hold 50 GiB. If you see a movie release that's 1.4 GiB, don't be surprised if it's not up to par. Bitrate is usually measured in megabits per second, abbreviated to Mbps (note the lowercase 'b'). One byte is 8 bits, so one megabyte is 8 megabits. You can calculate bitrate by finding the file's size in megabits, and then dividing by the length of the file in seconds. You don't have to take out a calculator every time though, as you can install [Mediainfo](https://mediaarea.net/en/MediaInfo), which allows you to right click on a video file and it will display all relevant data, including bitrate of all of its individual tracks. ### Converting from MKV to MP4 Oftentimes people will ask how to convert an mkv file to mp4 for the purpose of playing it on their TV. Many TVs in fact do not support mkv file formats, which is a newer container than mp4 is. This doesn't mean that the container is the only culprit. Check your TV's manual online and look for a list of supported formats and codecs, because it may be that your TV does support MKV but your specific MKV file contains certain streams encoded in a particular format that is not supported by your TV. You can use [mediainfo](https://mediaarea.net/en/MediaInfo) to check the different tracks inside your video file to check which codec they are encoded as, and compare them to your TV's list of supported specs to see what the culprit is. If in fact, your TV does not support the MKV container, converting to MP4 is simple. Many users recommend using handbrake to do this -ignore them. Handbrake will always transcode the video stream, and if it turns out that you only need to transcode the audio track, or simply do a complete remux, you'll be introducing unnecessary quality loss. Not to mention that transcoding video is very tough on the CPU and can take hours to complete. As a first resort, do a remux (a direct copy of the streams in a container into another, no quality is lost). This is a very quick process and will only take a few minutes. You can use [ffmpeg](https://www.ffmpeg.org/), a commandline utility, to remux a video [\(How to install ffmpeg\)](https://www.youtube.com/watch?v=UDIMVp4jWXo). Afterwards, navigate to the folder containing your MKV file, then follow [these instructions](https://streamable.com/uhshg). [HowToBurnSubtitlesIntoVideo-FFmpeg](https://trac.ffmpeg.org/wiki/HowToBurnSubtitlesIntoVideo) Essentially, you'll run the command `ffmpeg -i "infile.mkv" -c copy "outfile.mp4"`. This will remux your mkv file into an mp4 file. However, mkv supports a lot of codecs that mp4 doesn't, so in case the audio file is incompatible with either the mp4 format or your TV, you'll need to transcode the audio as well: `ffmpeg -i "infile.mkv" -c:v copy -c:a ac3 "outfile.mp4"` Alternatively, in case you want to transcode the audio to AAC: `ffmpeg -i "infile.mkv" -c:v copy -c:a aac "outfile.mp4"` Sometimes, multi-channel AAC tracks can produce playback issues, so lowering the number of channels to stereo might solve them: `ffmpeg -i "infile.mkv" -c:v copy -c:a aac -ac 2 "outfile.mp4"` If the video track is encoded in a format not supported by your TV, find another download, as transcoding the video track will take entirely too long to be worth a bother. ### Breakdown of the different parts of a Warez release name (Title.Of.The.Movie.YEAR.Source.Codec-GROUP) There are many different acronyms that exist in release names, but they all follow a similar format. In the example of a movie, it would be Title.Of.The.Movie.YEAR.Source.Codec-GROUP Group The name of the group who created/distributed the release. Codec Will indicate what the codec is of the main stream of each type. Eg. `Title.Of.The.Movie.2001.BluRay.DD5.1.x264-GROUP`, indicates that the audio track (or main audio track, if it has multiple) is encoded in Dolby Digital (AC3) with 5.1 channels, and the video has been encoded with the x264 encoder to H264/AVC. Source Will vary depending on the medium it was sourced from (BluRay, DVD, WEB). It will also vary depending on how the media was ripped (BRRip, WEBRip, HDRip, HDcam) There are a few variations of WEB releases, mainly WEB-DL and WEBRip. Scene groups will not specify the type of WEB release their content is and will simply use WEB instead of specifiying WEB-DL or WEBRip. P2P groups will tend to specify between WEB-DL and WEBRip. WEB-DL This is a direct download of the video provided by the streaming service. It is unadulterated and simply remuxed (repackaged) into a popular video format (ie. mkv). Paid streaming services such as Netflix utilize [Widevine DRM](https://en.wikipedia.org/wiki/Widevine) to prevent downloading of the video stream. If somehow, you are able to, it will be encrypted. Only a handful of underground groups around the world (namely, The Scene) has access to tools to decrypt Widevine-protected content. WEB This is the Scene's tag for WEB-DLs. [Scene rules.](https://scenerules.org/t.html?id=wdx264v1.0-ecb63c67.nfo) WEBRip This can be a vague term, in that it can mean that a web stream was screen captured or that it has been encoded down from a higher resolution WEB-DL (typically a 4k WEB-DL, encoded down to 1080p or 720p), which in many cases results in a higher quality video compared to the actual 720p or 1080p WEB-DL. WEB releases can also have extra qualifiers which will indicate which streaming service is was sourced from. The scene doesn't provide this type of indication, so only p2p groups will indicate which streaming service it was sourced from. An example of these are: NF Netflix AMZN Amazon prime video IT iTunes DSNP Disney Plus There are other qualifiers that indicate other attributes regarding the release, though these apply to Bluray releases as well: SDR Standard Dynamic range. If it's a 4k release, it's a given that it is an HDR/HDR10 release, unless otherwise specified as `SDR` DV Dolby Vision. Only a handful of movies/shows (approximately 100 total, at the time of writing) have made their way onto the wild with DV metadata included. These releases are uploaded in the `.mp4` format since mkv does not have support for DV metadata. Remux Remuxing is the process of "repackaging" the streams inside a video container into another video container. However, in regards to Warez releases, `REMUX` is only used for Bluray releases, indicating that the main video stream from a Bluray has been remuxed into a single video file. The full bluray contains a number of different directories and video containers, each containing different different types of videos depending on the bluray, including extras such as cast Q&A, director interviews, deleted scenes, etc. Remuxes and full blurays can be many tens of GiB, averaging out at around 60 GiB per 4k remux. Video containers are file formats such as mp4, mkv, avi, VOB (used by DVDs, example of a [raw DVD dump](https://i.imgur.com/mCYYOKI.jpg)), m2ts (used by Blurays), etc. They contain varying quantities of streams of different types (video, audio, subtitle streams, chapter information and other metadata, such as the video's FPS, the codepage the subtitle stream is encoded in -typically UTF-8 if it is a text stream) and more. They will even contain the HDR/DV metadata included as a separate track. Full Bluray This is not indicated anywhere in the filename, however it can be easily perceived by paying attention to the video codec, as it can specify whether the video is an encode or if it is unadulterated. If the release title contains `AVC` or `HEVC`, then it means it is the unadulterated video (not encoded). Following that, if it contains `REMUX` in the title, then it is a single video file (an mkv file), otherwise it is the full bluray, shared as an `.iso` file or its contents dumped into a folder [example of a bluray dump's file tree](https://i.imgur.com/FVAJh2j.jpg). The explanation for this is as follows: `H264` and `AVC` are the exact same things, they are video codecs. The same is true of `H265` and `HEVC`. They are, however, different from `x264` and `x265`, which are both encoders, utilized to encode video into the aforementioned codecs, respectively. That is why you'll see some videos include `x264` while others will use `H264` or `AVC`, assuming they are named correctly. In regards to Bluray releases, if it says `x264` or `x265`, then it has been encoded from the original bluray. If it says `AVC` or `HEVC`, then it means the video is unadulterated from the original bluray. Bluray releases are be indicated by BluRay, BDRip, or BRRip BDRip Encoded from the remux BluRay Vague terminology, can be used for either a full bluray, remux or encoded release BRRip Means it has been re-encoded from an existing bluray encode, which results in further quality loss compared to a regular bluray encode (which itself is encoded from the full bluray/remux) ## video synthesizer [Gijs's Personal Home-Page « Gieskes.nl](https://gieskes.nl/) ## voxel rendering [Voxel Displacement Renderer – Modernizing the Retro 3D Aesthetic | Hacker News](https://news.ycombinator.com/item?id=40464558) [Voxel Displacement Renderer — Modernizing the Retro 3D Aesthetic – Daniel has a blog now](https://blog.danielschroeder.me/2024/05/voxel-displacement-modernizing-retro-3d/) ## web - favicons [Show HN: Favicons for HN | Hacker News](https://news.ycombinator.com/item?id=31095046) [Favicons for HN · GitHub](https://gist.github.com/frabert/48b12088441f6195ea9292c2a5a77e3a) [We analyzed 425k favicons | Hacker News](https://news.ycombinator.com/item?id=28933391) [We Analyzed 425,909 Favicons • iconmap.io](https://iconmap.io/blog) [OMG, SVG Favicons FTW!](https://austingil.com/svg-favicons) [Supercookie: Browser Fingerprinting via Favicon | Hacker News](https://news.ycombinator.com/item?id=26051370) [GitHub - jonasstrehle/supercookie: Browser fingerprinting via favicon!](https://github.com/jonasstrehle/supercookie) [supercookie • welcome](https://supercookie.me/) [SVG, Favicons, and All the Fun Things We Can Do With Them | CSS-Tricks - CSS-Tricks](https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them) [How I Put the Scroll Percentage in the Browser Title Bar | CSS-Tricks - CSS-Tricks](https://css-tricks.com/how-i-put-the-scroll-percentage-in-the-browser-title-bar) ## WebGL [Summer Afternoon - A WebGL Experiment | Hacker News](https://news.ycombinator.com/item?id=34461808) [Summer Afternoon](https://summer-afternoon.vlucendo.com/) [Show HN: Mountain Peaks in WebGL | Hacker News](https://news.ycombinator.com/item?id=25537377) [Peaks of Austria](https://felixpalmer.github.io/peaks-of-austria/) [Show HN: Unknown Pleasures, a tiny web experiment with WebGL | Hacker News](https://news.ycombinator.com/item?id=35419771) [UNKNOWN PLEASURES | An Audio Visualizer with WebGL](https://pouria.dev/unknown-pleasures) ## web - icons [Tell HN: The "Y" logo in the top-left corner has been upgraded to SVG | Hacker News](https://news.ycombinator.com/item?id=35894326) [news.ycombinator.com/y18.svg](https://news.ycombinator.com/y18.svg)