Sabitlenmiş Tweet
Danny
4.4K posts

Danny
@TheDannyDon
Tweeting about the journey of self-learning HTML, CSS and JavaScript in my free time. And Tailwind, browser extensions, WordPress, Git. DMs open.
United Kingdom Katılım Nisan 2020
664 Takip Edilen1.6K Takipçiler

@devadam88 Too cold for that! 5am club should be a fair weather thing 😂
English

@TheDannyDon I am indeed. It’s a 5am wake up most days. Bring back the 5AM club
English

CSS Tip! 📜
You can use scroll-driven animations to progressively enhance collapsing a floating call to action 🤏
.cta {
animation: shrink;
animation-timeline: scroll();
animation-range: 0 100px;
}
@keyframes shrink {
to { width: 48px; }
}
That's the gist of it. Use the body scroll position with animation-timeline: scroll(). Define the animation-range as when you have scrolled 100px.
There's a little more though 🤓
That would "scrub" the width animation. Ideally, you want to trigger that animation. You could animate a custom property with steps() timing and use that to define the width ✨
@property --scrub {
syntax: '';
inherits: true;
initial-value: 0;
}
body {
animation: scrub both steps(1, end);
animation-timeline: scroll();
animation-range: 0 100px;
}
Then transition the --scrub property on the CTA and use it for the width 🤙
.cta {
transition: --scrub 0.2s;
width: calc(48px + (120px * (1 - (var(--scrub) / 100))));
}
Other animations are a matter of preference and timing. For example, you could then make the hand wave, scale down the size, and then slide a gradient across 😉
They have the same structure and technique as the original concept. Waving the hand? 👋 Run it twice, offset the transform-origin.
.hand {
animation: wave both linear 2;
animation-timeline: scroll();
animation-range: 30vh 50vh;
transform-origin: 65% 75%;
}
@keyframes wave {
50% { rotate: 20deg; }
}
How's it progressively enhanced? Wrap everything in a @supports query and a @media query. If there isn't support, users still get a good experience. It's a floating action button that's circular and already collapsed 🤙
@supports(animation-timeline: scroll()) {
@media(prefers-reduced-motion: no-preference) {...}
}
Definitely have a play with the code. Amazing what we're going to be able to do with CSS alone! 🔥
@CodePen link below! 👇
English

@luke_netti Your posts are always full of useful info and straight to the point! Great stuff!
English

5 powerful ways to transform a website with a redesign.
See how I transformed this brand with a website redesign. 👇
The old design (on the left):
→ No place to find phone number or hours
→ Unclear call to actions
→ Confusing messaging
→ Bad user experience
→ Lack of social proof
New design (on the right):
→ New color scheme
→ Better use of images
→ User experience that is clear
→ Easily locate all important information
→ Google Reviews embedded right on the website
This website uses all the same copy except for some header text.
I think you would agree that a website redesign can make a massive difference.
See the link in the comments!
---
PS…I help your ideal customers see you as the only choice—with a strategy driven website.


English

@natmiletic Literally just finished your WordPress course a week or 2 ago 😂
Can confirm its still a great intro for beginners even if the specific website building bit has changed since there's still a lot of features, settings, foundations you need to know about that Nat walks you through
English

My WordPress course is really outdated at this point.
This is no longer how we make WordPress websites and with FSE I have to update it.
This is why I have discounted my premium WordPress course to $0.99 (I can't make it $0 because video courses have to have a cost on Gumroad).
This way of building will still work, and it's a great intro for beginners, so I still recommend checking it out: nmiletic.gumroad.com/l/kSrqD
English

@devadam88 YEEAAHHHH!!! 🥳
Finally!
You're probably the most capable coder I've come across on here who didn't have a coding job.
Glad to see you finally decided to pull your finger out and get one... 😂
Congratulations and best of luck in your new job! 🥳
English

I got my Christmas present early...
In the form of a job...🎉
Yesterday I accepted an offer for a Jnr Software Engineer role.
I don't want to divulge fine details or anything too personal at the moment, but...
I will be employed full time for a very well-established startup in Central London who focus on building native mobile apps for eCommerce businesses.
My specialism isn't mobile app development, but I will be working on a CMS platform built internally that enables customers to update and edit their apps.
This is all with a tech stack very familiar to me - mostly Front end work, with Next.js, TypeScript, Tailwind and a host of other tools or tech.
I am really pleased about this role and very thankful to the people that made it happen!!
English

@TheDannyDon @tefl_on Ah yeah I mentioned it was resolved by using Cloudflare's DDoS protection + Nginx deny rules. No damage done apart from the downtime.
English

Dealt with a DDoS attack yesterday on one of my client's websites.
I thought I'd outline what I did to mitigate the attack and respond:
- I use Nginx Amplify, which sends alerts to my email when status codes in the range 5.x.x or 4.x.x are detected. I woke up to numerous 5.0.2 status code alerts, implying the site was inaccessible.
- Logged onto the VPS provider (I won't name for obscurity) and observed the host VPS resources - CPU was at 100% for several hours overnight - server resources being hammered hard!
- Logged onto the Ubuntu VPS terminal and ran htop - yes, 100% processing all being used by mysql. This was a WordPress website, and the admin login was being hammered with thousands of login queries to the database.
- Checked the Nginx and PHP-FPM logs - the access attempts sourced from a handful of IP addresses of far Eastern European origin. I instantiated a .403 status on all request from that origin.
- Hopped onto Cloudflare and set 'Under attack mode' on which is basically for DDoS protection. It adds a JavaScript challenge for all visitors when accessing the site.
- Server resources return to normal at this point, and the site is accessible again. I leave Cloudflare protection on highest for over 10 hours and change the admin url for the site.
Has anything like this happened to you?
See comments for a list of the resources used and mentioned above...

English

@tefl_on @devadam88 That's crazy!
Did you manage to fix it? Did the client have to pay?
English

@TheDannyDon @devadam88 I used to manage a web site for a diamond jeweler.
They'd kill the site for an hour, turn it back on, then send an extortion letter demanding money if he wanted to stay in business
English

@devadam88 Wait... so this casual account has a display picture of you wearing a suit, but your serious, professional account doesn't?
Followed your new account because I enjoy your tech content!
English

@devadam88 😂
Can it make your head bigger without turning it into a cartoon?
English

@CK1london BT plans to replace 10,000 jobs with AI within the next 7 years.
So I guess we should all be training to become plumbers? Which will be fine until too many people lose their job and become plumbers too, which will increase competition, which will lower rates.
Sounds
English

@devadam88 Congratulations, Adam! 🥳
Wait... devadam88? In a suit?! Something strange is going on...
English

I just hit 5000 Followers 👀🥳
And I did that without...
- Paying for a swipe file or joining weird underground engagement pods. (You know who you are people!).
- Astroturfing
- Posting every day about how I need 'X' number of followers with wishes to 'connect'.
- Buying engagement from follower farms.
How did I do it?
- "Personality"
- The right kind of "content"
- Stimulating and engaging in discussion.
- Asking questions people want to talk about.
Here's a real achievement by the way, me graduating from a red brick university. 👇


English

@eloffd You need to start practising AoE2 for the big showdown with @csturner88 !
English

@BjorklundVictor @flydotio Wow serverless sounds like a great idea. Is it difficult to set up or is it as simple as just selecting it as an option while signing up?
English







