The latest articles on DEV Community by Jon Snow (@jon_snow789). https://dev.to/jon_snow789 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F920086%2F70840fb9-7bf7-473b-b179-8a06476a867a.png https://dev.to/jon_snow789 en Jon Snow Tue, 31 Dec 2024 07:04:17 +0000 https://dev.to/jon_snow789/best-happy-new-year-animation-using-html-and-css-3aeh https://dev.to/jon_snow789/best-happy-new-year-animation-using-html-and-css-3aeh <h2> 1. Glowing Happy New Year 2025 animation </h2> <p><iframe class="tweet-embed" id="tweet-1873769532747329690-419" src="https://platform.twitter.com/embed/Tweet.html?id=1873769532747329690"> </iframe> // Detect dark theme var iframe = document.getElementById('tweet-1873769532747329690-419'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1873769532747329690&amp;theme=dark" } </p> <h2> 2.Happy New Year SVG animation </h2> <p><iframe class="tweet-embed" id="tweet-1873769537155563560-296" src="https://platform.twitter.com/embed/Tweet.html?id=1873769537155563560"> </iframe> // Detect dark theme var iframe = document.getElementById('tweet-1873769537155563560-296'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1873769537155563560&amp;theme=dark" } </p> <h2> 3. Happy New Year - THREE.js CharactersTexture Particle </h2> <p><iframe class="tweet-embed" id="tweet-1873769541182087266-648" src="https://platform.twitter.com/embed/Tweet.html?id=1873769541182087266"> </iframe> // Detect dark theme var iframe = document.getElementById('tweet-1873769541182087266-648'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1873769541182087266&amp;theme=dark" } </p> <h2> 4. Happy New Year CSS Flippy Loader </h2> <p><iframe class="tweet-embed" id="tweet-1873769545372152061-551" src="https://platform.twitter.com/embed/Tweet.html?id=1873769545372152061"> </iframe> // Detect dark theme var iframe = document.getElementById('tweet-1873769545372152061-551'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1873769545372152061&amp;theme=dark" } </p> html webdev css frontend Jon Snow Fri, 01 Dec 2023 15:23:46 +0000 https://dev.to/jon_snow789/multiple-window-3d-scenes-using-threejs-and-localstorage-hh1 https://dev.to/jon_snow789/multiple-window-3d-scenes-using-threejs-and-localstorage-hh1 <p><strong>Frontend is beyond just UI</strong> 🚀</p> <p>A Programmer Presents a Mind-Blowing Multi-Window Experience 😱</p> <p>Bjorn Staal, an independent Artist, Programmer, and Researcher, recently unveiled a magical-looking setup that allows the "synchronization" of a 3D scene across multiple browser windows. This innovative system, powered by Three.js and localStorage, was specifically made for developers eager to explore advanced web graphics and window management techniques.</p> <h3> Made by <a href="https://twitter.com/_nonfigurativ_" rel="noopener noreferrer">𝕭𝖏ø𝖗𝖓 𝕾𝖙𝖆𝖆𝖑</a> </h3> <h3> Demo </h3> <p><iframe width="710" height="399" src="https://www.youtube.com/embed/4LwHH3r2qNY"> </iframe> </p> <h3> Source Code </h3> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/bgstaal" rel="noopener noreferrer"> bgstaal </a> / <a href="https://github.com/bgstaal/multipleWindow3dScene" rel="noopener noreferrer"> multipleWindow3dScene </a> </h2> <h3> A quick example of how one can "synchronize" a 3d scene across multiple windows using three.js and localStorage </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">Multiple Window 3D Scene using Three.js</h1> </div> <div class="markdown-heading"> <h2 class="heading-element">Introduction</h2> </div> <p>This project demonstrates a unique approach to creating and managing a 3D scene across multiple browser windows using Three.js and localStorage. It's designed for developers interested in advanced web graphics and window management techniques.</p> <div class="markdown-heading"> <h2 class="heading-element">Features</h2> </div> <ul> <li>3D scene creation and rendering with Three.js.</li> <li>Synchronization of 3D scenes across multiple browser windows.</li> <li>Dynamic window management and state synchronization using localStorage.</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Installation</h2> </div> <p>Clone the repository and open <code>index.html</code> in your browser to start exploring the 3D scene.</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto"><pre class="notranslate"><code>git clone https://github.com/bgstaal/multipleWindow3dScene </code></pre></div> <div class="markdown-heading"> <h2 class="heading-element">Usage</h2> </div> <p>The main application logic is contained within <code>main.js</code> and <code>WindowManager.js</code>. The 3D scene is rendered in <code>index.html</code>, which serves as the entry point of the application.</p> <div class="markdown-heading"> <h2 class="heading-element">Structure and Components</h2> </div> <ul> <li> <code>index.html</code>: Entry point that sets up the HTML structure and includes the Three.js library and the main script.</li> <li> <code>WindowManager.js</code>: Core class managing window creation, synchronization, and state management across multiple windows.</li> <li> <code>main.js</code>…</li> </ul> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/bgstaal/multipleWindow3dScene" rel="noopener noreferrer">View on GitHub</a></div> </div> <p>Check my website <a href="https://democoding.in/" rel="noopener noreferrer">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode" rel="noopener noreferrer">Demo code</a></p> webdev javascript programming beginners Jon Snow Thu, 16 Nov 2023 17:10:19 +0000 https://dev.to/jon_snow789/meme-november-day-16-59fc https://dev.to/jon_snow789/meme-november-day-16-59fc <p>Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!</p> <p><a href="https://twitter.com/AlarmsSnooze"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xN244vMM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3di3tqbf7ikuxhcmen3.jpg" alt="How to end a frontend developers career" width="800" height="843"></a></p> <p>Check my website <a href="https://democoding.in/">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode">Demo code</a></p> webdev programming beginners productivity Jon Snow Wed, 15 Nov 2023 02:54:00 +0000 https://dev.to/jon_snow789/meme-november-day-15-3l8k https://dev.to/jon_snow789/meme-november-day-15-3l8k <p>Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!</p> <p><a href="https://twitter.com/AlarmsSnooze"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wpRYxo-S--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xwkaq7lg6pmf6mhub8z.jpg" alt="How to end a frontend developers career" width="800" height="714"></a></p> <p>Check my website <a href="https://democoding.in/">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode">Demo code</a></p> webdev programming beginners productivity Jon Snow Tue, 14 Nov 2023 02:52:00 +0000 https://dev.to/jon_snow789/meme-november-day-14-30fj https://dev.to/jon_snow789/meme-november-day-14-30fj <p>Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!</p> <p><a href="https://twitter.com/AlarmsSnooze"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EenkuSw4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a0kcuxyqvh7jw0tq0r8.jpg" alt="How to end a frontend developers career" width="800" height="945"></a></p> <p>Check my website <a href="https://democoding.in/">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode">Demo code</a></p> webdev programming beginners productivity Jon Snow Mon, 13 Nov 2023 09:50:00 +0000 https://dev.to/jon_snow789/meme-november-day-13-177o https://dev.to/jon_snow789/meme-november-day-13-177o <p>Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!</p> <p><a href="https://twitter.com/AlarmsSnooze"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--F6IkbVUE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgpr6yib2zjiug590jnp.jpg" alt="How to end a frontend developers career" width="800" height="1242"></a></p> <p>Check my website <a href="https://democoding.in/">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode">Demo code</a></p> webdev programming beginners productivity Jon Snow Mon, 13 Nov 2023 06:48:54 +0000 https://dev.to/jon_snow789/meme-november-day-12-3221 https://dev.to/jon_snow789/meme-november-day-12-3221 <p>Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!</p> <p><a href="https://twitter.com/AlarmsSnooze"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6QAdv-E5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcsi7oitzfu3k9749m1h.jpg" alt="How to end a frontend developers career" width="800" height="1314"></a></p> <p>Check my website <a href="https://democoding.in/">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode">Demo code</a></p> webdev programming beginners productivity Jon Snow Sat, 11 Nov 2023 17:00:59 +0000 https://dev.to/jon_snow789/meme-november-day-11-pc9 https://dev.to/jon_snow789/meme-november-day-11-pc9 <p>Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!</p> <p><a href="https://twitter.com/AlarmsSnooze"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vYXj3JEH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pno3yqabweiag1gidti.jpg" alt="How to end a frontend developers career" width="800" height="1128"></a></p> <p>Check my website <a href="https://democoding.in/">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode">Demo code</a></p> webdev programming beginners discuss Jon Snow Fri, 10 Nov 2023 12:56:00 +0000 https://dev.to/jon_snow789/meme-november-day-10-2i48 https://dev.to/jon_snow789/meme-november-day-10-2i48 <p>Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!</p> <p><a href="https://twitter.com/AlarmsSnooze"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Tk96121o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zeqq5r5fep9b3oi8w7f.jpg" alt="How to end a frontend developers career" width="800" height="809"></a></p> <p>Check my website <a href="https://democoding.in/">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode">Demo code</a></p> webdev programming beginners discuss Jon Snow Thu, 09 Nov 2023 08:55:42 +0000 https://dev.to/jon_snow789/meme-november-day-9-1ffm https://dev.to/jon_snow789/meme-november-day-9-1ffm <p>Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!</p> <p><a href="https://twitter.com/AlarmsSnooze"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9tPdSssI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tomkt43jernlpbui2vsb.jpg" alt="How to end a frontend developers career" width="800" height="855"></a></p> <p>Check my website <a href="https://democoding.in/">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode">Demo code</a></p> webdev programming beginners discuss Jon Snow Thu, 09 Nov 2023 08:54:06 +0000 https://dev.to/jon_snow789/meme-november-day-8-3i1h https://dev.to/jon_snow789/meme-november-day-8-3i1h <p>Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!</p> <p><a href="https://twitter.com/AlarmsSnooze" rel="noopener noreferrer"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvueveqabh6hchpdtgpvr.jpg" alt="How to end a frontend developers career"></a></p> <p>Check my website <a href="https://democoding.in/" rel="noopener noreferrer">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode" rel="noopener noreferrer">Demo code</a></p> webdev javascript programming beginners Jon Snow Tue, 07 Nov 2023 06:22:00 +0000 https://dev.to/jon_snow789/meme-november-day-7-1dmk https://dev.to/jon_snow789/meme-november-day-7-1dmk <p>Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!</p> <p><a href="https://twitter.com/AlarmsSnooze"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YVPyGWX5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yz3ma9uoaad06l84ojur.jpg" alt="How to end a frontend developers career" width="800" height="746"></a></p> <p>Check my website <a href="https://democoding.in/">Demo coding</a> for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!</p> <p>Don't forget to subscribe to our channel : <a href="https://www.youtube.com/@democode">Demo code</a></p> webdev programming beginners productivity