Code so edgy it’s a damn hexagon 🛑
I’ve been building an interactive tooltip today that displays a box of text when someone interacts with an ( i ) button 👇
The problem here, is if the button is too close to the edge of the browser window and the tooltip (and it’s content) gets cut off 🤭
Thankfully JS is my friend, so I detect the width and height of the window, as well as the width and height of the tooltip and calculated a “safe zone”. If the tooltip is detected within the safe zone, it snaps to the edge and doesn’t flow over, otherwise is appears centered above the ( i ) button. Nice 😏
What have you been working on today?
Day 65▪️ Couch Potatoes 🥔 .
Yesterday was a semi-productive day. Mostly operations and finance stuff but I did get a chance to get some client coding in before heading to a meeting at the end of the day 👨🏽💻🐶👩🏽💻
Staying home tonight to spend some time with the pup before we are away for half the week so I’ll be catching up on some JS stuff (per usual). ✌🏼
Tag your coding squad in this post! 👯♀️👯♂️ #100daysofcode
🎉 Covering cards this week!
👊 Cards have flexible application and there is lot to learn dimension wise. The absolute key with cards is spacing. Avoid overcrowding these and define your architecture.
🦴🦴🦴 Cards typically are reputable components. If you are using cards across a grid always stick to the component architecture.
🔑 Cards can be basic info cards or link. I’ve been doing some fun interactions on webflow recently so hope to drop these in this week
🙌 As ever, appreciate your support and we are progressing nicely through series. Any question just message or drop them in the comments. I respond to everything!! Let’s do it 👍
[Day 13 of 100] 👨🏻💻
Happy coding on the weekend 📅📚💻
Went over: CSS Basic Layouts / CSS Designs
✔️ Floats / Clearing floats
✔️ Lists properties
Learned about how floats is an important property for working on your layouts of your page. Being able to position an element (e.g image) on the left or right side of the container. Altho since it tends to collapse other elements in the page, it's nice to know that I can apply an overflow property to prevent that from happening. A good enough solution for small projects 😅. There's a clearfix for bigger projects but the course didnt go too much into it now, so maybe sooner on that 😅👍🏼.
Regarding list properties, I learned the list-style-type property that you can use for ul and ol elements so you don't get to be stuck with their default bullet and numbered values. Other e.g. values are square or decimal values.
Lastly, regarding designs, I learned about textshadows and boxshadows. The new thing that I learned is that you can do an inner shadow for box shadow property by adding "inset" before the property. And that you can apply mutiple values to the property to make some sort of 3D effect. Check 2nd image, credit to Mark Otto 😅👍🏼
For the rest of tom
🔜 More basic css design, concepts , and finally working on the Unit 2 project. There's only 3-4 hours more worth of video course material so I'm hoping I can finish this by tomorrow. So I can start next week with a new Unit 🔥
I hope that everyone had a productive Saturday coding or not 🙌🏻.