Álvaro Trigo 🐦🔥
@IMAC2
Followers
20,301
Following
329
Media
778
Statuses
12,372
Tweeting about Web Development tips, tricks and things I learn. I quit my job to work on fullPage.js .
Cambridge, UK
Joined June 2009
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
THE OVER
• 1165154 Tweets
LINGORM MACAU FANMEET
• 444697 Tweets
#FeedYAwards2024
• 235296 Tweets
ロッキン
• 109481 Tweets
能登半島
• 57921 Tweets
ENCOURAGE TO THE SIGN
• 25551 Tweets
FORTPEAT x FEEDY2024
• 19576 Tweets
ながのーず
• 19019 Tweets
NEW x FEED Y AW24
• 18262 Tweets
#FinalMGChaiNat25xENGLOT
• 18211 Tweets
花火大会
• 13159 Tweets
#HOPCHIANGMAIxNuNew
• 12390 Tweets
West Ham
• 10569 Tweets
Nkunku
• 10294 Tweets
Pinned Tweet
Years ago I made my first JavaScript plugin. With no experience and as an experiment to improve my skills.
3 years later I earned enough with it to quit my job.
A few days ago the library got the record of 21K npm downloads in one week.
Don't wait to be a mater, start now!
84
226
2K
Wow! I had no idea you could use the property "document.designMode" to make your whole document editable! ✍️
Great to test different texts!! ✨
100
2K
6K
HTML is all-powerful! 💪💪
Plain HTML autocomplete input.
Compatible with ALL modern browsers!
51
936
5K
There are CSS properties I never heard of before!
Hello `caret-color` 👋
53
641
4K
😱 OK, I have no idea <meter> was a thing!!
Not a single line of CSS / JavaScript!
Pure HTML! 💪
81
667
3K
Autofill inputs using security codes sent by SMS! 😍
No JavaScript! Plane HTML!
Working on iOS!
44
794
3K
Javascript tip: use guard clauses:
- Prevents nesting hell
- Improves readability
- Adds "natural flow"
59
412
2K
Today I discovered "inputmode"! 🥳
Now we can "hint" the browser what virtual keyboard we want to show on mobile devices without forcing the browser to change the visuals of the input. (unlike with input="number" for example)
27
641
2K
Debug JavaScript like a pro!
Get to know the 22 methods.
Explanations inside 🧵👇
34
566
2K
Wooo!! 😱😱
HTML is getting pretty interesting!!
Compatible in all browsers except IE & Edge!
Getting there!
46
530
2K
I couldn't find a CSS generator to create gradient shadows.
So, I created one! 👇
47
311
2K
The HTML links are much more powerful nowadays than years ago! 👇
28
416
2K
Create beautiful texts now with CSS `background-clip property` 👇
Choose a background and apply it your text.
Working on all modern browsers!
25
290
2K
Uh wow 😲, I had no idea we could use:
> window.matchMedia
In order to trigger JavaScript events based on the viewport size!
Sweeeeeet! 😊
29
397
1K
Use this clean way of assigning default values in JavaScript 👇
26
212
1K
Display different images in dark mode using HTML media queries! 😱😱
6
260
1K
OMG!!!!🤯🤯
I've been using Chrome for EVER and I had idea about the "Create Live Expression" option!
✨ Great to stop flooding the console with 1000000 console.logs!
12
393
1K
Make your JavaScript code more readable by using:
- map
- filter
- reduce
41
209
1K
No need for CSS to hide stuff!
HTML replacement for "display:none" !
41
172
1K
JavaScript refactoring tip! 👇
Replacing switch statements for object literals.
- They admit functions
- We can pass them as object params
- We can stringily them
- Easier to debug
- ...
39
263
1K
Just a quick JavaScript reminder 👇
- Consider it when comparing a variable multiple times.
- Reduce IF conditions.
- Easier to edit.
- More flexible (dynamic arrays, map, reduce...)
- Easier to debug.
28
211
1K
- I don't know CSS grid. I never used SaaS.
- I don't know React.
- I don't know Webpack or Grunt.
I keep on learning every day.
You don't need to know everything to provide value and make interesting things. ✨
34
118
1K
Want to force the download of a file?
Now it's easy with just HTML ! 💪
25
229
1K
😱 We can actually trigger the device's camera to capture an image directly from it!
A simple HTML input is enough: 👇
<input type="file" accept="image/*" capture="user">
17
205
1K
Need to toggle CSS classes often?
🚫 Don't do it manually on the DOM.
Use Chrome or Firefox Dev tools! 🥳🥳
22
224
1K
I've coded HUNDREDS OF THOUSANDS of lines of JavaScript.
I've made web apps, mobile apps, JavaScript libraries, games, Chrome extensions, plugins for jQuery and things you wouldn't even believe... 😎
And I can tell you one thing:
"console.log" is totally useful.
39
110
1K
Whaaaat? Awesome stuff !!
A single CSS property and watch the magic happen! ✨
Smooth scroll made easy!
23
200
1K
This is awesome! 😱
I didn't know about the CSS `round` or `space` property for backgrounds!
Ideal if you want to avoid cropping the image!
12
206
993
The other day I discovered the HTML <output> tag! 🤯
Did you know about it? 👇
17
144
926
Don't obsess with frameworks / the latest trends.
Focus on providing value.
- remoteok .io
Makes 65K/month with 1 index.php file
- photopea .com
Makes 1M/year using vanilla JavaScript to make a Photoshop "clone"
- hostifi .com
Made $500K with 2 files and few thousand lines 👇
17
172
929
7 years ago I published my first open source project on Github.
10 things I learned since then and you can learn too 🧵👇
12
152
899
Bringing your CSS shadows to the next level!
Just separate them by commas and enjoy! 👇
18
119
865
5 front-end debug techniques that will save you hours debugging your pages: 🧵👇
15
195
842
I'm not telling you to stop learning a JS framework.
I'm telling you to at least learn HTML and CSS before jumping to it.
48
69
814
Whaaaaaat? 😱😱
I had no idea we could do this with videos!
Working in Chrome and Safari at the moment!
21
168
780
Yeeey! 👏👏👏
No more `display:none;` to debug!
Toggle visibility of any DOM element by pressing "H"!
Working in Chrome, Firefox and Safari!! 👍
10
257
772
4 years ago I created this split-screen plugin for JavaScript but it never saw the light. 🙃
Would you be interested on it?
65
76
758
My top resources for web developing:
- codepen.io (html, css, js)
- regex101.com (regular expressions)
- codesandbox.io (vue, react, angular...)
- unsplash.com (photos)
- fontawesome.com (font icons)
- fontello.com (pick specific icons)
- fonts.google.com (fonts)
Yours?
32
149
750
New style to add on your reset stylesheet!
You'll never forget another ALT attribute on any image! 😎
Just a single line of CSS! 👇
23
150
742
- I don't know CSS grid.
- I never used Tailwind.
- I don't know Webpack.
- I haven't tried Gastby.
I keep on learning every day.
You don't need to know everything to provide value and make interesting things. ✨
23
69
710
<wbr>, nice to meet you! 👋
Word Break Separator.
Tell me me you have ever used HTML tag <wbr> and I'll declare you my hero for ever!
26
125
716
There are two kinds of developers:
- The ones who like to make things sound as complicated as possible so they can look smarter than the rest and feel better with themselves.
- The ones who try to simplify things to make them as easy as possible for others.
19
118
695
You don't have to be a master to build useful stuff.
Check out the landing pages of big techs.
- Apple
- Microsoft
- Uber Eats
- Deliveroo...
They are SO simple that any person with 2 to 3 weeks of experience in HTML and CSS can replicate most of them.
34
90
640
Need to detect user speed to base your page on it?
No problem! JavaScript has you covered! 👇
11
113
618
Have you heard about "i18n"?
😱 Ever wondered where does it come from? I did!
26
141
605
Displaying an empty message with CSS 😍
Saving some JS / Back-end conditions and keeping code a bit more simple :)
18
91
584
Ever had to deal with currencies on JavaScript?👇
Heard about the ES6 way of doing it with`Intl.NumberFormat`?
Cool uh? 🙃
13
119
586
This is nice!! 😍
CSS media queries based on pointer accuracy!
A big screen doesn't always mean they are not using at touch screen! (low accuracy pointer)
9
96
531
😱 I just discovered what happens when you hit "." in any GitHub repo!!
Am I too late for the party?
29
85
536
HTML power to the rescue! 💪
Use lazy loading by just adding the attribute loading="lazy".
The distance threshold varies depending on:
- Image type
- Effective connection type
- Whether Lite mode is enabled on Chrome for Android
14
109
520
Terms cheatsheet for web devs:
CTA→ Call To Action
SPA→ Single Page App
PWA→ Progressive Web Application
AMP→ Accelerated Mobile Pages
CMS→ Content Management System
SEO→ Search Engine Optimisation
UX→ User Experience
UI→ User Interface
GDPR→U don't wanna know🙃
9
119
520
Many arguments on a JavaScript function?
Use a single object instead:👇
◾️ Improves readability.
◾️ Order won't matter (params & arguments).
◾️Allows to easily pass optional parameters.
19
97
516
Imagine you start developing a side project in your free time.
Imagine you publish it on GitHub and people show interest.
Imagine that, suddenly, it becomes your full-time job.
Now, stop imagining.
This is what is happening nowadays! 💪
11
56
487
Software I use on my every day as a web developer:
- Chrome + Chrome Dev Tools
- Visual Studio Code
- SourceTree (Git GUI)
- Beyond Compare (compare code)
- Photoshop
- Slack
- GitHub
- Todoist
- Spotify
What about you?
Any recommendation? 🙃 (I use Mac)
75
45
478
Developers abuse React in the same way they abused jQuery.
History repeats itself.
Using React for everything is just wrong.
27
51
454
I created a Chrome extension in JavaScript to help me find a house in the leading real state platform in Spain.
Now I can:
- Rate from 0 to 5
- Get the distance & time to the city center by subway
- Mark as "contacted"
- Sort by rating, price, contacted
- Mark as "discarded"
19
59
468
📈 My top tips to improve websites loading performance:
- Use async to load non blocking JS
- Defer all you can
- Reduce HTTP requests
- Inline critical CSS/JS
- Use DNS prefetch
- Use SSL + HTTP2
- Use a CDN
9
76
446
Coding is just part of what web developers do.
Mastering these and you'll become a much better developer 👇
▪️ Browser dev tools
▪️ Code editor
▪️ Deployment workflows
▪️ NPM
▪️ GIT
▪️ Module packers
▪️ Server management
▪️ Soft Skills
What would you add?
41
89
441
Quick JavaScript tip:
> Make impossible states impossible
Helps preventing bugs and saves you some variables on the way too! 🙃
13
56
433
😱 And now I learn about this!!
JavaScript making it easier for humans to read long numbers!
17
80
411
Refactoring JavaScript tip: ✨
Write self explanatory code and enjoy:👇
- Easy understanding
- More flexibility (reuse, negate, quick modify...)
- Easy debug
- Preventing mistakes
11
62
401
5 things you can do to improve as a web developer:
1⃣Contribute to open-source projects.
2⃣Read others' code.
3⃣Ask for code reviews from others.
4⃣Write short functions/methods.
5⃣Have side projects.
12
60
397
🚫 You don't know to know EVERYTHING.
- Learn HTML
- Learn CSS
- Learn a bit of JavaScript
- Learn a bit of PHP (or other back-end language)
CONGRATULATIONS!
Now you'll be able to make 80% of the websites out there.
15
57
379
Simple tip! 👇
Do not add unnecessary context to your code.
Keep it clean and simple.
9
41
369
Did you know this? 👇
You can press H on Chrome, Safari and Firefox dev tools to hide/show elements!
No need to manually add "display: none" anymore! 🥳
15
97
374
CSS property flex-direction and it's logic.
This used to drive me crazy!
26
57
362
Have you tried this CSS pseudo-class? 😍
:placeholder-shown
It applies when the placeholder is visible and the user didn't type anything yet.
4
67
359
Hoho!! Did you know about the `details` HTML tag? I didn't!
It also adds the attribute `open` to define the open state!
Compatible in all browsers except IE & Edge.
17
88
330
Case-insensitive selector! 😍
Just add an `i` at the end of the value!
Compatible with all modern browsers.
👇👇👇
3
70
331
Functions do one thing.
- Avoid mysterious params that you won't understand unless you read the function arguments.
- Functions should do what they say they do.
9
50
324
Yeeey! 🙃
I just learned about Chrome screenshots today! 💪
Really come on handy sometimes!
12
90
318
i18n.
Weird name uh?
Ever wondered where it came from?
I did! 👇
13
46
298
I can't believe I coded without using Emmet and these 2 extensions for Visual Code Studio:
- htmltagwrap
- Auto Close Tag
Look at this beauty! 😍😍
13
36
294
🔥 I've created a new slider effect! 🔥
I finally named it "Cards"!
Thanks to all of you for your suggestions! Hope you like it!
Check it out! here!
→
15
45
292
🥳🥳 Today I became CEO! 🥳🥳
Since I was a kid I always joked with creating my own company.
Now those jokes became real!
I guess it is true when they say "There's a grain of truth in every joke". 🤔
37
19
287
JavaScript tip:
Keep your event listeners clean and centralised! 👇
9
45
285
6 mistakes people do when publishing a new Github project: 👇
1- Don't market it.
2- Don't add demos.
3- Don't publish it to npm.
4- Don't add a LICENSE file.
5- Don't add a proper README.
6- Don't create releases with changelog info.
🔝Make it as easier as possible for others.
7
48
276
Things I made in 2020:
🏗️ 1 company created
🖥️ 1,722 GitHub contributions
♻️ 1 fullPage.js release
🎮 3 side projects (2 launched SAAS)
🗣️ 1 tech talk
🎙️ 1 podcast interview
✍️ 1 written interview
🌎 2 countries visited
⌨️ 1 mechanical keyboard purchased
15
5
264
Things I made in 2018:
😱 fullPage.js v3
🎁 fullpage wrappers: Vue / React / Angular
🧪 fullPage unit tests
🇨🇳 Chinese & 🇰🇷Korean FP docs
🌎 New fullPage site | 5 languages
✨ New multiScroll.js extension
🔊 2 podcast interviews
🖥️ 977 GitHub contributions
😎 Became CEO
11
19
256
Case-insensitive selector! 😍
Just add an `i` at the end of the value!
Compatible with most modern browsers.
👇👇👇
3
72
258
🔥 I've created a game with CSS transitions and Javascript!! 🔥
No canvas!
My score is 40.140! ⭐️
Can you beat me?
🖥️ Available in Codepen →
👥 Open sourced
📜Blog post with the "Making of"
22
65
233