Daniel Vickers

Currently web devving' it up at @LayersStudio. Over 7 years of experience finding semi-colons that break websites. Tackling the world of #React and loving it!

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Tip! 🤙

You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨

.glow {
mask-composite: intersect;
mask-clip: padding-box, border-box;
mask:
linear-gradient(#0000, #0000),
conic-gradient(#0000 0deg, #​fff, #0000 45deg);
}

The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect;

In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌

Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆

You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓

let ANGLE = Math.atan2(
event?.y - CARD_CENTER[1],
event?.x - CARD_CENTER[0]
) * 180 / Math.PI
ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE;
CARD.​style.setProperty('--start', ANGLE + 90)

You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️

conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #​fff, #0000 calc(var(--spread) * 1deg));

To get the blur, you apply a blur to the glow container on each card 🤙

.glows {
filter: blur(calc(var(--blur) * 1px);
}

That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶

Couldn't resist making this one 😁

@CodePen link below! 👇

[Wes Bos @wesbos]

If your links have target="_blank", the rel="noopener" is implied and you don't need it anymore.

This has been the case in every browser for 3+ years.

[Daniel Vickers @Daniel__Vickers]

@sphorbio just gone through your edge runtime integration for Next.Js but having some issues now relating to node modules using the require(‘fs’) for example. I believe this is because of running in edge mode, any ideas as don’t want to edit modules to call directly over require?

[Daniel Vickers @Daniel__Vickers]

@hrvydotdev @t3dotgg ThreeJS can’t wait to finish learning this and make something as cool as this

[Daniel Vickers @Daniel__Vickers]

@AaplParody It looks like Ionos 😂

[Layers Studio @LayersStudio]

🔍 Sneak Peek at our Latest Project!

We’re happy to lift the curtains and share a glimpse of our ongoing project in Abu Dhabi 🏙️

We're fusing innovation and design to craft something extraordinary.

🚀 Stay tuned as the best is yet to come!

[Daniel Vickers @Daniel__Vickers]

@_ScottWilkins0n @tomgilroy33 @MarkTwyman11 @piersmorgan Logic would say if the cap is £100M then they know and acknowledge top tier talent will go for the top percentile of the cap and it will downgrade everyone else so Haaland would be 100M but Rice might then go for say 60M it would all adjust not every player would go for 100M

[Daniel Vickers @Daniel__Vickers]

@TheJackForge I was self taught from YouTube going on 7 years ago now, that first got me in to the web development world but you definetly need the right mindset there’s so much to learn and things are constantly changing being stuck in your ways and not an interest to adapt won’t get them far

[Daniel Vickers @Daniel__Vickers]

If you’re looking to get started with web development and are wondering where to start when it comes to preparing for your first job, then give this article a read!

Super happy to share this information with you as it’s very similar to how I got into web dev!

[Layers Studio @LayersStudio]

Daniel Vickers, a member of the Layers development team, shares his advice for those seeking to secure a web developer position in a highly competitive job market.

Join us on our LinkedIn page to dive into the article 👉 by visiting the link below

https://t.co/vvFopbXQSJ

[Daniel Vickers @Daniel__Vickers]

@benkeighran Not a problem I will see you there!, also a really nice write up! very eye opening to the direction the platform intends to take itself in comparison to the previous years so thanks for that

[Daniel Vickers @Daniel__Vickers]

@benkeighran only realised it was you who donated once I got the post stream email, just wanted to reach out and say thanks! Long time no speak, would love to catch up sometime and get the down low on how things are going and changed on the platform :)

[Daniel Vickers @Daniel__Vickers]

@benkeighran Is it still the same email as way back when? Can try and sort a call out this month for a chit chat when ever our diaries line up! I imagine you’re pretty busy nowadays

[Daniel Vickers @Daniel__Vickers]

@github @klintron It would help if all browsers were sanctioned to follow the same support and roll outs for css, the amount of great css that’s available nowadays that lacks support in all kinds of browsers is really quite saddening and frustrating!

[Daniel Vickers @Daniel__Vickers]

Finally an easier way to store custom data for products felt like such a basic feature that was never available out the box…

[Shopify Developers @ShopifyDevs]

Shopify is introducing a game-changing new feature: metaobjects. 🚀

Metaobjects are a flexible way to add and store custom data, such as product features, specifications, size charts, staff profiles, and complex content.

[Layers Studio @LayersStudio]

🚨Layers Unite❤️‍🔥Friday night was epic! Our squad had a blast &amp; let’s just say we definitely brought our A-game🎯! Delicious food, laughter &amp; ''friendly'' competition☠️ filled the evening. Huge props to bonding with the team!🙌 #workvibe #worksocial #teambuilding

[Daniel Vickers @Daniel__Vickers]

@gitlab I’m aware of API connections between GitHub and HubSpot but does GitLab support any kind of version control API/Workflow to support a HubSpot integration?

[Daniel Vickers @Daniel__Vickers]

@trashh_dev As long as jobs keep advertising the need for you to have HTML experience you best believe it’s staying on there 😂

[Daniel Vickers @Daniel__Vickers]

@chakra_ui @reactjs @vite_js Also shout out to @kamijin_fanta and everyone else who's contributed to React Icons, super easy to implement and with Typescript out the box, it made adding a pretty sun/moon dark mode toggle a breeze!

[Daniel Vickers @Daniel__Vickers]

Having fun delving into @chakra_ui and building out a configurable preset file for styling an entire @reactjs #typescript site built out on @vite_js, cant wait to get it fully implemented and move on to building out the components to put some more practice into state &amp; context!

[Lee Robinson @leerob]

Netlify has acquired Gatsby.

https://t.co/t7xmC6EUN7