 |
 |
|
Welcome to Collective #798 |
We have a bit of an AI fiesta today (because who wouldn't want to welcome our machine overlords?). Ever thought about wrapping your head around LLMs? Just a wild thought for job security... just kidding. But seriously, diving into it might make those future tech updates way more meaningful for us devs. Ready to take the plunge into the impending robot apocalypse? Let's do this!
But no worries, we've got some other interesting frontend and design links to offer—a little breather from the AI madness!
Have a great week ahead and happy exploring!
|
|
|
Choose Cloud, Dedicated, or vServer at budget-friendly rates for your gaming server. Design your laaS to match your project's needs with full root access.
Find out more 👉
|
|
|
| | Nolan Lawson guides readers through the process of building a modern JavaScript framework, focusing on implementing reactivity and DOM rendering using foundational ideas common to post-React frameworks. |
|
|
|
|
|
|
|
|
|
| This bi-lingual article by Kenichi Yoneda explores the use of Signed Distance Functions (SDF) in designing 3D worlds, focusing on Boolean operations and smoothened versions for organic shapes, with practical code examples and demonstrations. |
|
|
|
|
|
|
|
|
|
| Xor creates shaders and does so exceptionally well! Additionally, they share mini tutorials on crafting shaders. It's a fantastic resource for learning shaders in bite-sized portions! |
|
|
|
|
|
|
|
|
|
| Another article by Kenichi Yoneda where he explains 3D rendering with ray marching, demonstrating how to shoot rays for each pixel, determine intersections with objects using signed distance functions, calculate lighting, and more. |
|
|
|
|
|
|
|
|
|
| Last week, Anderson Mancini released a fantastic holographic material for R3F and now it’s also available for direct use in Three.js. |
|
|
|
|
|
|
|
|
|
| This article emphasizes the importance of considering users, maintainers, operations, and business perspectives in software development, highlighting potential dysfunctions and ethical concerns within the industry. |
|
|
|
|
|
|
|
|
|
| This tutorial explains how to build a card flipping animation, inspired by the Jest homepage, using React and mostly CSS transforms, covering component setup, styling, and animation techniques. |
|
|
|
|
|
|
|
|
|
| Marker is a high-performance tool that converts PDF, EPUB, and MOBI files to markdown, boasting a speed ten times faster than nougat, enhanced accuracy, and minimal hallucination risk, with support for various PDF documents, equation conversion to LaTeX, code block formatting, and multi-language support. |
|
|
|
|
|
|
|
|
|
| A beginner-friendly step-by-step guide for getting into LLMs with curated resources. By Maxime Labonne. |
|
|
|
|
|
|
|
|
|
| A very detailed visual guide on how LLMs work, with examples for various GPTs. |
|
|
|
|
|
|
|
|
|
| OpenAI introduces a new feature called assistants, allowing users to index their websites and query ChatGPT for information specific to their site by scraping the documentation sitemap, extracting information, creating a new assistant, and building a frontend interface. |
|
|
|
|
|
|
|
|
|
| The article discusses Alexander Smirnov’s experiment in fine-tuning the ChatGPT model on their personal Telegram messages to mimic their writing style, exploring the challenges and approaches, including the use of LoRA (Limited Resource Adaptation) for training and evaluating the results. |
|
|
|
|
|
|
|
|
|
| Mozilla has introduced llamafile, an open-source project allowing conversion of large language model weights into executables, enabling easy distribution and consistent performance across various operating systems. |
|
|
|
|
|
|
|
|
|
|
|
Behind the Pixel 🔎 |
 |
In this section, Manoela examines small design and animation details and takes a peek under the hood to see how they are accomplished. |
This week, I found this little trick for creating an interesting menu background animation using “slices”. How is this accomplished? When we look at the markup and CSS, we can see that a clip-path animation is employed to cut off each slice, which is a span in the HTML. When you toggle the clip-path property, you will see the slice retracting/expanding visually. |
 |
It's great that this is CSS-driven; only classes are applied to trigger the transition of the clip-path property. Individual delays are set in nth-child rules. Although this effect can be achieved by scaling down the elements or by translating them out of view (both of which are better performance-wise), using clip-path is a clever technique, especially when considering other shapes!
|
|
Video Vault |
|
|
 | | This beautiful shot shows Ivan Gorbunov’s work for client Predictive Monitor. The presentation shows some nice animation details on a fantastic design. |
|
|
|
|
|
|
|
|
|
|
Demo Corner |
|
|
From our blog |
| | Last week, we kicked off our journey through the standout moments of 2023. If you haven't already, catch up on the highlights of Day 1, Day 2, Day 3, and the latest, Day 4. |
|
|
|
|
|
|
|
|
|
| | (sponsored) Explore five key strategies for developers to distinguish themselves and attract clients, from joining vibrant communities like Merge to utilizing continuous learning platforms and more. |
|
|
|
|
|
|
|
|
|
|
❓Did you know that… |
…the concept of the "hamburger icon," a common symbol used in user interfaces to represent a menu, originated in the early 1980s? Norm Cox, a graphic designer, is credited with creating this iconic symbol while working on the user interface for the Xerox Star, one of the earliest personal computers with a graphical user interface. Here’s a nice article about it. |
|
|
|
|
|
And that’s all! Thank you for reading the Collective! If you have something you would like us to feature in the next edition, simply reply to this email! |
|
|
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future. |
|
|
|
