TechGuy

web developer and Sharing my journey
#100DaysOfCode #js #code #webdev

[TechGuy @TechGuy108]

my attempt at making a Minesweeper game with JavaScript
https://t.co/A1LjQSxqGi

I would love to hear your thoughts on it
Thanks

#100DaysOfCode #javascript #CSS #JavaScriptProject #coding #WebDevelopment

[jhey ʕ•ᴥ•ʔ @jh3yy]

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! 👇

[Ania Kubów #JavaScriptGames @ania_kubow]

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

[• nanou • @NanouuSymeon]

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

[TechGuy @TechGuy108]

This pizza just got a taste of the power of css flexbox 😋

#codinghumor #codinglife #webdevelopment #css3 #html5 #100DaysOfCode

[TechGuy @TechGuy108]

@codewithvoid Not necessarily but copy-paste might be 😂

[Csaba Kissi @csaba_kissi]

Learn Coding For Free 🧵

📁 HTML
https://t.co/ZLcsu4PTGN

📁 CSS
https://t.co/74l9jT6W6E

📁 JavaScript
https://t.co/VgYjXaOTR5

📁 Git/GitHub
https://t.co/FosTEaz48y

more 👇👇

[Pratham @Prathkum]

Learn CSS for free:

1. Basic concepts
https://t.co/cUy98V9Btu

2. CSS Grid
https://t.co/d4luUkkMMv

3. Flexbox
https://t.co/mIN64ABeBd

4. CSS Animations
https://t.co/prhyVUGuzB

5. CSS Selectors
https://t.co/HjjnafDUM1

6. CSS Positioning
https://t.co/TBc1mZ1XVZ

[Atharva ☄️ @AtharvaDFTBA]

Made this 404 error page just using CSS ✅

Code 👇

[TechGuy @TechGuy108]

@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

[Void⚡ @codewithvoid]

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

[TechGuy @TechGuy108]

@AdemoyeJohn Visual studio

[TechGuy @TechGuy108]

@cwsound While true:
Shout( Hello )

[TechGuy @TechGuy108]

@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

[Chris Staudinger @ChrisStaud]

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

[Pratham @Prathkum]

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!

[TechGuy @TechGuy108]

@suprabhasupi Facebook

[TechGuy @TechGuy108]

@NanouuSymeon VS code does the job for me

[TechGuy @TechGuy108]

@Prathkum @HyperspaceOrg Congrats 🎉😊 and Good luck 👍