TechGuy @TechGuy108

web developer and Sharing my journey #100DaysOfCode #js #code #webdev Grand Casablanca, Morocco Joined January 2017

Tweets

160
Followers

473
Following

380
Likes

688

TechGuy @TechGuy108

6 months ago

my attempt at making a Minesweeper game with JavaScript codepen.io/techGuy08/full… I would love to hear your thoughts on it Thanks #100DaysOfCode #javascript #CSS #javascriptProject #coding #WebDevelopment

1 0 3 46 0

View Details

CSS Tip! 🚥 You can create these trending expanding scroll indicators with scroll-driven animations and flex 🤙 .indicator { animation: grow; animation-range: contain calc(50% - var(--size)...; animation-timeline: var(--card); } @keyframes grow { 50% { flex: 3; }} What's the trick? Put the indicators in a container using flex layout and set a width larger than the number of indicators 😉 .indicators { aspect-ratio: 7 / 1; display: flex; } Importantly, set no gap 🤏 To mimic the gap set a transparent border on each indicator and set the background using padding-box .indicator { background: linear-gradient(#fff, #fff) padding-box; border-radius: 50px; border: 4px solid transparent; } Now for the animation. You want to create a view-timeline for each card that moves across 🤙 li:nth-of-type(1) { view-timeline: --one inline; } li:nth-of-type(2) { view-timeline: --two inline; } Make sure they use the inline axis too! The trick is hoisting these view-timeline so the indicators can use them with timeline-scope 👀 .track { timeline-scope: --one, --two, ...; } All that's left is for you to create the animation piece using some calc with the card size ⚡️ .indicator { --size: calc(var(--card-width) * 0.9); animation: grow both linear; animation-range: contain calc(50% - var(--size)) contain calc(50% + var(--size)); } .indicator:nth-of-type(1) { animation-timeline: --one; } .indicator:nth-of-type(2) { animation-timeline: --two; } @keyframes grow { 50% { flex: 3; }} And there you have it, responsive scroll indicators using CSS scroll-driven animations 😎 Sprinkle a little JavaScript to make them clickable and scroll the the right card ✨ const shift = (event) => { if (event.target.tagName === "BUTTON") { const index = [...event.target.parentNode.children].indexOf(event.target); const item = document.querySelector(`li:nth-of-type(${index + 1})`); item.scrollIntoView({ behavior: "smooth", inline: "center" }); } }; As always, any questions or suggestions, let me know. I've put a JavaScript fallback in to use GSAP in browsers that don't have scroll-driven animations 🫶 @CodePen link below! 👇

35 404 4K 575K 4K

View Details

Naveen Srinivasan @Naveen_Srini_

3 years ago

222 2K 19K 2.1M 528

View Details

Ania Kubów #JavaScriptGames @ania_kubow

3 years ago

Stay organized while coding by using good naming conventions and comment lines. This will help keep your code readable in the future. #CodingAdvice

9 10 89 8K 2

View Details

• nanou • @NanouuSymeon

3 years ago

Best advice I got for today: Find a way to make money while you sleep 🤌

12 6 62 5K 0

View Details

TechGuy @TechGuy108

3 years ago

This pizza just got a taste of the power of css flexbox 😋 #codinghumor #codinglife #webdevelopment #css3 #html5 #100DaysOfCode

0 0 3 80 0

View Details

TechGuy @TechGuy108

3 years ago

@codewithvoid Not necessarily but copy-paste might be 😂

0 0 0 5 0

View Details

Csaba Kissi @csaba_kissi

3 years ago

Learn Coding For Free 🧵 📁 HTML w3schools.com/html/ 📁 CSS freecodecamp.org/learn/ 📁 JavaScript javascript.info 📁 Git/GitHub learngitbranching.js.org more 👇👇

51 390 1K 176K 588

View Details

Pratham @Prathkum

3 years ago

Learn CSS for free: 1. Basic concepts CSSReference.io 2. CSS Grid LearnCSSGrid.com 3. Flexbox FlexBoxFroggy.com 4. CSS Animations CSSAnimation.rocks 5. CSS Selectors Flukeout.github.io 6. CSS Positioning LearnLayout.com/position.html

69 616 2K 225K 1K

View Details

Atharva ☄️ @AtharvaDFTBA

3 years ago

Made this 404 error page just using CSS ✅ Code 👇

59 240 2K 191K 543

View Details

TechGuy @TechGuy108

3 years ago

@codewithvoid You can only reach 100% if you start building projects and figuring things out as you go Though you can't really make it to 100% because you'll always have something new to learn But it's not a waste to keep at it because overtime you'll always find yourself to get better

0 0 0 39 0

View Details

Void⚡ @codewithvoid

3 years ago

How do you respond to - "I need to know 100% of JavaScript before building projects"?

280 68 925 255K 125

View Details

TechGuy @TechGuy108

3 years ago

@AdemoyeJohn Visual studio

0 0 0 21 0

View Details

TechGuy @TechGuy108

3 years ago

@cwsound While true: Shout( Hello )

0 0 2 70 0

View Details

TechGuy @TechGuy108

3 years ago

@patloeber 2017: visual basic 2019: javaScript 2020: php 2021: c#, java 2022: python 2023: python But the one I have worked with the most is JavaScrip

0 1 0 91 0

View Details

Chris Staudinger @ChrisStaud

3 years ago

Give me 5 minutes and I'll teach you everything about object-oriented programming:

125 964 4K 559K 2K

View Details

Pratham @Prathkum

3 years ago

ChatGPT is a free university: • You can learn to code • You can learn copywriting • You can learn marketing • You can learn finance • You can learn anything Learn for free and make money in 2023. Get started today with your laptop!