Shripal Soni
@codewithshripal
Followers
9,132
Following
240
Media
1,167
Statuses
9,215
• Freelance web developer with 13+ years of experience • Sharing practical web dev tips regularly • Get 200+ well-illustrated frontend tips at
Joined January 2016
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Taylor
• 382867 Tweets
#TENxFireworkMeetandGreet
• 215189 Tweets
TEN X MAYBELLINE EVENT
• 202689 Tweets
Yankees
• 96501 Tweets
期日前投票
• 45229 Tweets
APT NUMBER ONE
• 26131 Tweets
ML IN SINGAPORE
• 23162 Tweets
#ガルアワ2024AW
• 18593 Tweets
TIM MCGRAW
• 14443 Tweets
#NOAHnoHAKOBUNE
• 13296 Tweets
#SarfarazKhan
• 10660 Tweets
HTML Tip 💡
Improve UX for input controls using <datalist> element ✨
A thread 🧵 ↓
52
273
2K
HTML Tip 💡
You may not know about this HTML element 👇
37
279
1K
HTML Tip 💡
Don't use input type="number" for critical numeric fields such as credit card, postal code etc.
Learn more about inputmode in this little thread 🧵 ↓
30
193
949
CSS Tip 💡
Easily create gradient border using CSS ✨
22
169
908
CSS Tip 💡
Easily fill text with any background using CSS 🤩
15
126
766
CSS Tip 💡
Do you know we can define rotation using `turn` unit in CSS? 🤩
14
128
729
CSS Tip 🤩
Create beautiful gradient rounded border with ease using CSS🔥
29
127
728
5 awesome CSS Shape Generators, you should definitely check ✨
🧵↓
25
173
692
CSS Tip 💡
Easily create gradient rounded border using CSS 🔥
13
122
714
CSS Tip 💡
Easily implement sticky table header 🤩👇
14
142
656
HTML Tip 💡
Do not use input type="number" for critical numeric fields such as credit card, postal code etc. ⚠️
Learn about the reason and the alternative 👇
17
132
686
CSS Tip 💡
Easily implement scroll snapping using CSS 🤩👇
8
140
632
Javascript Tip 💡
You may not know about this easiest way to timeout fetch request 🤩👇
6
93
645
CSS Tip 💡
One CSS rule to show an asterisk (*) for all the required field labels 🤩 👇
7
140
626
CSS Tip 💡
Simplify large CSS selectors using :where() pseudo-class function ⚡️
25
104
582
HTML Tip 💡
Do you know we can easily create an accordion without using javascript ✨?
How 🤔?
By Just using <details> and <summary> elements 🤩
26
130
575
5 awesome CSS generators to make your website look polished ✨
28
145
548
SEO Tip 💡
For faster indexing of a new website, which doesn't have any backlinks, add a sitemap to that website 🚀
12
19
143
7 very useful VS Code extensions that you should definitely install ⚡
A️ thread 🧵 ↓
39
180
506
CSS Cheatsheet 🔥
7 ways to hide an element using CSS 🤩
16
103
514
HTML Tip 💡
You may not know about these 2 attributes of the ordered list in HTML ✨
10
80
511
CSS Tip 💡
Fill text with any background by using just 3 lines of CSS code!
25
106
507
HTML Tip 💡
Two little-known attributes of the ordered list in HTML 🤩
23
89
489
HTML Tip 💡
⚠️ Caution: Are you using input type="number" for important numeric fields such as credit card, postal code etc.?
Here's why you should switch to using inputmode="numeric" instead 👇
15
85
484
6 awesome CSS shape generators to help you create amazing shapes with ease! 🤩
A thread 🧵↓
26
138
470
HTML Tip 💡
Easily create modal dialog without using any third-party library 🤩
16
99
465
CSS Tip 💡
Easily enhance list style using ::marker pseudo-element ✨
A thread 🧵 ↓
26
99
436
5 things about HTML lists, you may not know ⚡️
A thread 🧵↓
30
126
430
Chrome Dev Tools 💡
You may not know that we can override response headers in Chrome Dev Tools 🤩
This can be very handy for handling CORS errors locally until they get fixed from the API server ✅👇
6
83
440
7 very useful VS Code extensions that you should definitely install ⚡
A️ thread 🧵 ↓
23
117
419
CSS Tip 🤩
Simplify large CSS selectors with ease, using :where() function 🔥
22
71
419
CSS Tip 💡
Easily simplify large CSS selectors using :where() pseudo-class function 🤩
7
110
421
CSS Tip 💡
You may not know that we can very easily change text selection style using ::selection pseudo-element 🤩
18
62
412
HTML Tip 💡
Many websites need to show a telephone/SMS number.
Rather than showing it as text, we can provide a better UX to the users 🤩
Learn how to do it 👇
25
76
412
⚡️CSS Cheatsheet ⚡
7 ️ways to hide an element using CSS — with use cases and characteristics of each way ✨
22
92
402
Javascript Tip 💡
Do you know we can easily open native share dialog from our website to share text, link or file? ✨
Learn how to do that 👇
19
88
406
CSS Tip 💡
You may not know about this easy trick to create stripes using CSS 🔥
25
86
381
HTML Tip 💡
Create an accessible accordion without javascript using <details> and <summary> elements ✨
20
80
376
CSS Tip 💡
Improve text selection style using ::selection pseudo-element ✨
It works in all modern browsers except Safari on iOS!
Note: We can change only color, background-color and text-shadow properties in ::selection rule.
24
85
378
Web Performance Tip 💡
Lazy load any offscreen image by just adding one attribute on the image element to improve performance 🚀
11
58
368
HTML Tip 💡
Do you know we can easily create a collapsible panel without using Javascript? 🤩👇
11
75
360
HTML Tip 💡
You may not know about this HTML element 🤩
18
62
359
You may not know about these 5 very useful HTML attributes ✨
A thread 🧵 ↓
23
101
346
HTML Tip 💡
Do you know we can easily create a modal using the HTML <dialog> element? 🤩
9
83
347
CSS Tip 💡
Get creative with your text with just 3 lines of CSS code ✨
17
63
334
CSS Tip 💡
One line code to make an iframe responsive 🤩
15
82
330
HTML Tip 💡
Easily improve UX for input controls using <datalist> element 🤩
A thread 🧵 ↓
15
70
334
HTML Tip 💡
Provide better UX for contact numbers by using tel: / sms: url scheme ✨
14
87
318
Javascript Tip 💡
Do you know about this shorter and better way to check multiple OR conditions? 👇
21
73
318
CSS Tip 💡
Easily create text with gradient stroke in CSS ✨
A tiny thread 🧵 ↓
19
63
304
5 things about HTML lists, you may not know 🤩
A thread 🧵↓
27
71
303
CSS Tip 💡
Do you know we can adjust the space between an element and its outline?
No?
Learn how to do it 👇
16
59
302
Javascript Tip 💡
We can easily format a number as a currency without using any third-party library 🤩 👇
12
44
309
Web Performance Tip 💡
Improve your website's performance by lazy loading offscreen images 🚀
See how easy it is to implement 🤩 👇
15
64
287
HTML Tip 💡
You may not know that we can keep the form submit button outside the HTML form ✨👇
13
51
292
HTML Tip 💡
Easily create a beautiful progress bar using <progress> element 🤩
5
52
268
4 ways to use SVG image in HTML/CSS ⚡️️
Includes use-cases, pros & cons of each way ✨
Thread 🧵 ↓
15
68
265
CSS Tip 💡
You may not know about this ::marker pseudo-element to easily enhance HTML List style ✨
Open this thread to learn all about it 🧵 ↓
23
54
265
CSS Tip 💡
Easily make dropdown menu keyboard-friendly using CSS 🤩
12
56
266
CSS Tip 💡
Easily make dropdown menu keyboard-friendly using just one line of CSS ✨
14
53
259
HTML Tip 💡
You may not know about this HTML attribute 🤩↓
14
51
262
15
61
251
Javascript Tip 💡
With ES6, we can use dynamic keys in object literal for relatively simpler code ✨
10
46
256
Javascript Tip 💡
An easier way to check if a property exists in an object or not.
15
55
256
HTML Tip 💡
You may not know about this new HTML element 🤩👇
8
41
256
CSS Tip 💡
You may not know that we can change the style of the file selector button 🤩👇
4
44
263
Javascript Tip 💡
You may not know about this very useful javascript API 👇
22
56
259
CSS Tip 💡
Easily implement smooth scrolling using just one line of code 🤩
10
47
247
CSS Tip 💡
You will be surprised to know that it needs just 3 lines of CSS code to create a beautiful gradient-colored text 🔥
Check the next tweet to learn how it works 🧵↓
9
52
244
CSS Tip 💡
You may not know that we can easily add offset to the underline of an element ✨
Learn how to do that ↓
17
36
241
CSS Tip 💡
Do you know about shape-outside property in CSS? 🤩👇
7
41
243
HTML Tip 💡
Provide better UX for text input by automatically capitalizing words, characters or sentences while entering data in text fields 🤩
5
37
232
Javascript Tip 💡
You may not know about this new and immutable way to sort an array in javascript 🤩
13
45
232
Javascript Tip 💡
4 ways to iterate over javascript object, you should know!
12
33
238
6 amazing tips about HTML <a>: anchor element, you wish you knew!
A thread 🧵 ↓
21
75
228
7 resources to get beautiful ready-to-use CSS color gradients 🎨
Thread 🧵 ↓
13
63
223
CSS Tip 💡
Do you know we can implement smooth scrolling by adding just one line of CSS ✨?
No?
Learn about it here 👇
19
31
230
CSS Tip 💡
Learn how easily we can use video as a background 🤩👇
10
47
232
5 useful CSS pseduo-elements, you may not know ✨
A thread 🧵 ↓
19
68
209
CSS Tip 💡
You may not know that we can easily adjust the space between an element and its outline 🤩
Learn how to do it 👇
14
39
218
CSS Tip 💡
You may not know that we can use ::marker pseudo-element to change the style of the bullet/number of the list. 🤩
6
43
222
5 free backend API services to practice frontend development by creating applications such as:
👉 simple blog app
👉 weather app
👉 movie collection app
👉 simple e-commerce app
👉 quotes app
A thread 🧵 ↓
15
78
212
Javascript Tip 💡
Do you know we can customize the output of JSON.stringify()? 🤩
7
30
218
CSS Tip 💡
Easily create text with gradient stroke in CSS 🤩
15
47
213
Javascript Tip 💡
You may not know about this easiest way to get/set query parameters of a URL 🤩
12
34
212
Javascript Tip 💡
You may not know that we can have dynamic keys in object literal for relatively simpler code 🤩
14
29
206
12 free resources for awesome illustrations ✨
A thread 🧵 ↓
18
58
206
HTML Tip 💡
You may not know about this easiest way to create a basic rich text editor 🤩
22
25
207
Javascript Tip 💡
Do you know about this new way to copy the array with one item replaced?
9
40
202
CSS Tip 💡
You may not know about this better and cleaner way to use transform for transitions or animations in CSS 👇
17
44
203
CSS Tip 💡
Use individual transform properties to write cleaner code for transition and animation ✨
7
30
201
CSS Tip 💡
Do you know we can access an HTML attribute value as a string inside CSS? ✨
Learn more about it 👇
3
42
204
14 websites providing free SVG icons for personal and commercial use⚡
A️ thread 🧵 ↓
22
61
194
HTML Tip 💡
You may not know about this semantic way to hide an HTML element ✨
14
34
195
Javascript Tip 💡
You may not know that we can easily open the native share dialog of the device from our website to share text, link or file 🤩
10
44
199