Pikagi
Shripal Soni Profile Banner
Shripal Soni Profile
Shripal Soni

@codewithshripal

8,932
Followers
240
Following
1,157
Media
9,185
Statuses

• Freelance web developer with 13+ years of experience • Sharing practical web dev tips regularly • Get 200+ well-illustrated frontend tips at

https://t.co/Ir9gQG1FHv
Joined January 2016
Don't wanna be here? Send us removal request.
Last Seen Profiles
𝐧𝐢𝐢𝐤𝐬𝐬!

@sweetliezs

Enesemel

@Enesemel3

pemburu ibu stw

@penikmatt_ibu

𝗲l 🌱

@aboutMyoZhi

春風詩音（はるかしおん）

@shion0402k2

金閣寺

@kinkakuG67

Ella 😍

@EllaP8067

Duquesne Bowling

@DuqBowling

Shige

@shige6_shige

MW

@tanu_unat_

Nesto ☔️

@1mde4

🍉 Miles!! (Comms 2/5) ☁︎

@SomeSonicFan

Andrea Smith

@AndreaS04253720

Atakan

@AtakanGndodu6

Salle Pierre Lamy

@sallepierrelamy

Hugh Parr-Burman

@Liquiscape

Merlin

@rcsvio

@Raednure

@Raednure

阳布布鸭2

@YANGBUBUYAA

BGOOD MEDIA

@bgood_media

Banda XXI

@bandaxxi

Hrafnkell Freyr Àgústsson

@hrafnkellfreyr

Spicy Sweets

@macaronzombie

Ερρίκος 🫵🏻😹

@cartmanblue

MayoAILab

@MayoAILab

Lady Queen 👑🤎

@mizzzladyG

Liquid candy

@Liquidcandy2000

HouseofTorch

@HouseofTorch

𝓠𝓾𝓪𝓷. ᡣ𐭩

@yqua_

Andy Frazier

@AndyF56768

INFO BOKEP LOKAL TANTE SEMOK

@bokeplokalmalam

Brando

@BrandoBeams

Expertscape: Your Source For Medical Experts

@Daily_Experts

Isla 😳

@Isla5335

Haizheel

@Haizheel

CNNFakNous

@CNNFakNous

@codewithshripal
Shripal Soni
@codewithshripal
2 years
HTML Tip 💡 Improve UX for input controls using <datalist> element ✨ A thread 🧵 ↓
Tweet media one
52
274
2K
@codewithshripal
Shripal Soni
@codewithshripal
2 years
HTML Tip 💡 You may not know about this HTML element 👇
Tweet media one
37
278
1K
@codewithshripal
Shripal Soni
@codewithshripal
9 months
CSS Tip 💡 Use tabular numbers to show timers ✅
16
176
1K
@codewithshripal
Shripal Soni
@codewithshripal
2 years
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 🧵 ↓
Tweet media one
30
194
949
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Easily create gradient border using CSS ✨
Tweet media one
22
169
911
@codewithshripal
Shripal Soni
@codewithshripal
1 year
CSS Tip 💡 Easily fill text with any background using CSS 🤩
Tweet media one
15
124
766
@codewithshripal
Shripal Soni
@codewithshripal
10 months
CSS Tip 💡 Do you know we can define rotation using `turn` unit in CSS? 🤩
14
130
729
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 🤩 Create beautiful gradient rounded border with ease using CSS🔥
Tweet media one
29
127
727
@codewithshripal
Shripal Soni
@codewithshripal
2 years
5 awesome CSS Shape Generators, you should definitely check ✨ 🧵↓
Tweet media one
25
174
694
@codewithshripal
Shripal Soni
@codewithshripal
1 year
CSS Tip 💡 Easily create gradient rounded border using CSS 🔥
Tweet media one
13
121
713
@codewithshripal
Shripal Soni
@codewithshripal
1 year
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 👇
Tweet media one
18
130
689
@codewithshripal
Shripal Soni
@codewithshripal
10 months
CSS Tip 💡 Easily implement sticky table header 🤩👇
14
143
656
@codewithshripal
Shripal Soni
@codewithshripal
9 months
CSS Tip 💡 Easily implement scroll snapping using CSS 🤩👇
8
141
630
@codewithshripal
Shripal Soni
@codewithshripal
3 months
Javascript Tip 💡 You may not know about this easiest way to timeout fetch request 🤩👇
Tweet media one
6
93
646
@codewithshripal
Shripal Soni
@codewithshripal
9 months
CSS Tip 💡 One CSS rule to show an asterisk (*) for all the required field labels 🤩 👇
Tweet media one
7
142
627
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Simplify large CSS selectors using :where() pseudo-class function ⚡️
Tweet media one
25
104
583
@codewithshripal
Shripal Soni
@codewithshripal
2 years
HTML Tip 💡 Do you know we can easily create an accordion without using javascript ✨? How 🤔? By Just using <details> and <summary> elements 🤩
26
128
573
@codewithshripal
Shripal Soni
@codewithshripal
2 years
5 awesome CSS generators to make your website look polished ✨
Tweet media one
28
146
549
@codewithshripal
Shripal Soni
@codewithshripal
2 years
SEO Tip 💡 For faster indexing of a new website, which doesn't have any backlinks, add a sitemap to that website 🚀
Tweet media one
12
19
142
@codewithshripal
Shripal Soni
@codewithshripal
2 years
7 very useful VS Code extensions that you should definitely install ⚡ A️ thread 🧵 ↓
Tweet media one
39
181
506
@codewithshripal
Shripal Soni
@codewithshripal
1 year
CSS Cheatsheet 🔥 7 ways to hide an element using CSS 🤩
Tweet media one
16
102
511
@codewithshripal
Shripal Soni
@codewithshripal
1 year
HTML Tip 💡 You may not know about these 2 attributes of the ordered list in HTML ✨
Tweet media one
10
78
513
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Fill text with any background by using just 3 lines of CSS code!
Tweet media one
25
106
508
@codewithshripal
Shripal Soni
@codewithshripal
2 years
HTML Tip 💡 Two little-known attributes of the ordered list in HTML 🤩
Tweet media one
23
88
488
@codewithshripal
Shripal Soni
@codewithshripal
2 years
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 👇
Tweet media one
15
83
483
@codewithshripal
Shripal Soni
@codewithshripal
2 years
6 awesome CSS shape generators to help you create amazing shapes with ease! 🤩 A thread 🧵↓
Tweet media one
26
136
468
@codewithshripal
Shripal Soni
@codewithshripal
2 years
7 amazing free SVG background generators ✨
Tweet media one
38
148
466
@codewithshripal
Shripal Soni
@codewithshripal
1 year
HTML Tip 💡 Easily create modal dialog without using any third-party library 🤩
16
98
466
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Easily enhance list style using ::marker pseudo-element ✨ A thread 🧵 ↓
Tweet media one
26
99
434
@codewithshripal
Shripal Soni
@codewithshripal
2 years
5 things about HTML lists, you may not know ⚡️ A thread 🧵↓
Tweet media one
30
125
428
@codewithshripal
Shripal Soni
@codewithshripal
3 months
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
@codewithshripal
Shripal Soni
@codewithshripal
1 year
7 very useful VS Code extensions that you should definitely install ⚡ A️ thread 🧵 ↓
Tweet media one
23
115
418
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 🤩 Simplify large CSS selectors with ease, using :where() function 🔥
Tweet media one
22
71
419
@codewithshripal
Shripal Soni
@codewithshripal
1 year
CSS Tip 💡 Easily simplify large CSS selectors using :where() pseudo-class function 🤩
Tweet media one
7
108
418
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 You may not know that we can very easily change text selection style using ::selection pseudo-element 🤩
Tweet media one
18
61
410
@codewithshripal
Shripal Soni
@codewithshripal
2 years
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 👇
Tweet media one
25
75
411
@codewithshripal
Shripal Soni
@codewithshripal
2 years
⚡️CSS Cheatsheet ⚡ 7 ️ways to hide an element using CSS — with use cases and characteristics of each way ✨
Tweet media one
22
91
401
@codewithshripal
Shripal Soni
@codewithshripal
2 years
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
87
405
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 You may not know about this easy trick to create stripes using CSS 🔥
Tweet media one
25
84
382
@codewithshripal
Shripal Soni
@codewithshripal
2 years
HTML Tip 💡 Create an accessible accordion without javascript using <details> and <summary> elements ✨
20
79
380
@codewithshripal
Shripal Soni
@codewithshripal
2 years
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.
Tweet media one
24
85
379
@codewithshripal
Shripal Soni
@codewithshripal
2 years
Web Performance Tip 💡 Lazy load any offscreen image by just adding one attribute on the image element to improve performance 🚀
Tweet media one
11
58
368
@codewithshripal
Shripal Soni
@codewithshripal
11 months
HTML Tip 💡 Do you know we can easily create a collapsible panel without using Javascript? 🤩👇
11
76
358
@codewithshripal
Shripal Soni
@codewithshripal
1 year
HTML Tip 💡 You may not know about this HTML element 🤩
Tweet media one
18
61
357
@codewithshripal
Shripal Soni
@codewithshripal
2 years
You may not know about these 5 very useful HTML attributes ✨ A thread 🧵 ↓
Tweet media one
23
101
348
@codewithshripal
Shripal Soni
@codewithshripal
9 months
HTML Tip 💡 Do you know we can easily create a modal using the HTML <dialog> element? 🤩
9
84
348
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Get creative with your text with just 3 lines of CSS code ✨
Tweet media one
17
62
333
@codewithshripal
Shripal Soni
@codewithshripal
2 years
HTML Tip 💡 Self-close void elements or not 🤔?
Tweet media one
14
66
334
@codewithshripal
Shripal Soni
@codewithshripal
1 year
CSS Tip 💡 One line code to make an iframe responsive 🤩
15
81
329
@codewithshripal
Shripal Soni
@codewithshripal
1 year
HTML Tip 💡 Easily improve UX for input controls using <datalist> element 🤩 A thread 🧵 ↓
Tweet media one
15
69
331
@codewithshripal
Shripal Soni
@codewithshripal
2 years
HTML Tip 💡 Provide better UX for contact numbers by using tel: / sms: url scheme ✨
Tweet media one
14
87
320
@codewithshripal
Shripal Soni
@codewithshripal
2 years
Javascript Tip 💡 Do you know about this shorter and better way to check multiple OR conditions? 👇
Tweet media one
21
73
316
@codewithshripal
Shripal Soni
@codewithshripal
2 years
5 pseudo-elements in CSS, you may not know 🧵↓
Tweet media one
18
86
307
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Easily create text with gradient stroke in CSS ✨ A tiny thread 🧵 ↓
Tweet media one
19
63
305
@codewithshripal
Shripal Soni
@codewithshripal
1 year
5 things about HTML lists, you may not know 🤩 A thread 🧵↓
Tweet media one
27
71
302
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Do you know we can adjust the space between an element and its outline? No? Learn how to do it 👇
Tweet media one
16
59
302
@codewithshripal
Shripal Soni
@codewithshripal
2 years
Web Performance Tip 💡 Improve your website's performance by lazy loading offscreen images 🚀 See how easy it is to implement 🤩 👇
Tweet media one
15
64
287
@codewithshripal
Shripal Soni
@codewithshripal
1 year
HTML Tip 💡 You may not know that we can keep the form submit button outside the HTML form ✨👇
Tweet media one
13
50
291
@codewithshripal
Shripal Soni
@codewithshripal
12 days
Javascript Tip 💡 We can easily format a number as a currency without using any third-party library 🤩 👇
Tweet media one
12
44
307
@codewithshripal
Shripal Soni
@codewithshripal
2 years
4 content ideas to attract freelancing projects 🧲
Tweet media one
17
70
267
@codewithshripal
Shripal Soni
@codewithshripal
1 year
HTML Tip 💡 Easily create a beautiful progress bar using <progress> element 🤩
Tweet media one
5
53
269
@codewithshripal
Shripal Soni
@codewithshripal
2 years
4 ways to use SVG image in HTML/CSS ⚡️️ Includes use-cases, pros & cons of each way ✨ Thread 🧵 ↓
Tweet media one
15
67
263
@codewithshripal
Shripal Soni
@codewithshripal
1 year
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 🧵 ↓
Tweet media one
23
53
262
@codewithshripal
Shripal Soni
@codewithshripal
1 year
CSS Tip 💡 Easily make dropdown menu keyboard-friendly using CSS 🤩
12
56
264
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Easily make dropdown menu keyboard-friendly using just one line of CSS ✨
14
52
259
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Create beautiful gradient text using just 3 lines of CSS ✨ #CSS3 #webdev
Tweet media one
15
61
253
@codewithshripal
Shripal Soni
@codewithshripal
1 year
HTML Tip 💡 You may not know about this HTML attribute 🤩↓
14
51
261
@codewithshripal
Shripal Soni
@codewithshripal
2 years
Javascript Tip 💡 With ES6, we can use dynamic keys in object literal for relatively simpler code ✨
Tweet media one
10
46
257
@codewithshripal
Shripal Soni
@codewithshripal
11 months
HTML Tip 💡 You may not know about this new HTML element 🤩👇
Tweet media one
8
42
258
@codewithshripal
Shripal Soni
@codewithshripal
2 years
Javascript Tip 💡 An easier way to check if a property exists in an object or not.
Tweet media one
15
55
256
@codewithshripal
Shripal Soni
@codewithshripal
2 months
CSS Tip 💡 You may not know that we can change the style of the file selector button 🤩👇
Tweet media one
4
44
263
@codewithshripal
Shripal Soni
@codewithshripal
2 years
Javascript Tip 💡 You may not know about this very useful javascript API 👇
Tweet media one
22
56
261
@codewithshripal
Shripal Soni
@codewithshripal
1 year
CSS Tip 💡 Easily implement smooth scrolling using just one line of code 🤩
10
47
247
@codewithshripal
Shripal Soni
@codewithshripal
2 years
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 🧵↓
Tweet media one
9
52
244
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 You may not know that we can easily add offset to the underline of an element ✨ Learn how to do that ↓
Tweet media one
17
36
241
@codewithshripal
Shripal Soni
@codewithshripal
11 months
CSS Tip 💡 Do you know about shape-outside property in CSS? 🤩👇
Tweet media one
7
40
240
@codewithshripal
Shripal Soni
@codewithshripal
1 year
Javascript Tip 💡 4 ways to iterate over javascript object, you should know!
Tweet media one
12
33
238
@codewithshripal
Shripal Soni
@codewithshripal
1 year
Javascript Tip 💡 You may not know about this new and immutable way to sort an array in javascript 🤩
Tweet media one
13
46
231
@codewithshripal
Shripal Soni
@codewithshripal
11 months
HTML Tip 💡 Provide better UX for text input by automatically capitalizing words, characters or sentences while entering data in text fields 🤩
5
37
232
@codewithshripal
Shripal Soni
@codewithshripal
2 years
6 amazing tips about HTML <a>: anchor element, you wish you knew! A thread 🧵 ↓
Tweet media one
21
75
228
@codewithshripal
Shripal Soni
@codewithshripal
2 years
7 resources to get beautiful ready-to-use CSS color gradients 🎨 Thread 🧵 ↓
Tweet media one
13
63
224
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Do you know we can implement smooth scrolling by adding just one line of CSS ✨? No? Learn about it here 👇
19
32
231
@codewithshripal
Shripal Soni
@codewithshripal
10 months
CSS Tip 💡 Learn how easily we can use video as a background 🤩👇
10
47
231
@codewithshripal
Shripal Soni
@codewithshripal
1 year
CSS Tip 💡 You may not know that we can easily adjust the space between an element and its outline 🤩 Learn how to do it 👇
Tweet media one
14
39
218
@codewithshripal
Shripal Soni
@codewithshripal
2 years
5 useful CSS pseduo-elements, you may not know ✨ A thread 🧵 ↓
Tweet media one
19
68
209
@codewithshripal
Shripal Soni
@codewithshripal
8 months
CSS Tip 💡 You may not know that we can use ::marker pseudo-element to change the style of the bullet/number of the list. 🤩
Tweet media one
6
43
223
@codewithshripal
Shripal Soni
@codewithshripal
2 years
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 🧵 ↓
Tweet media one
15
78
213
@codewithshripal
Shripal Soni
@codewithshripal
11 months
Javascript Tip 💡 Do you know we can customize the output of JSON.stringify()? 🤩
Tweet media one
7
30
218
@codewithshripal
Shripal Soni
@codewithshripal
1 year
CSS Tip 💡 Easily create text with gradient stroke in CSS 🤩
Tweet media one
15
46
212
@codewithshripal
Shripal Soni
@codewithshripal
2 years
Javascript Tip 💡 You may not know about this easiest way to get/set query parameters of a URL 🤩
Tweet media one
12
33
211
@codewithshripal
Shripal Soni
@codewithshripal
2 years
12 free resources for awesome illustrations ✨ A thread 🧵 ↓
Tweet media one
18
59
206
@codewithshripal
Shripal Soni
@codewithshripal
2 years
Javascript Tip 💡 You may not know that we can have dynamic keys in object literal for relatively simpler code 🤩
Tweet media one
14
28
206
@codewithshripal
Shripal Soni
@codewithshripal
1 year
HTML Tip 💡 You may not know about this easiest way to create a basic rich text editor 🤩
22
25
206
@codewithshripal
Shripal Soni
@codewithshripal
1 year
Javascript Tip 💡 Do you know about this new way to copy the array with one item replaced?
Tweet media one
9
40
202
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 You may not know about this better and cleaner way to use transform for transitions or animations in CSS 👇
Tweet media one
17
44
204
@codewithshripal
Shripal Soni
@codewithshripal
2 years
CSS Tip 💡 Use individual transform properties to write cleaner code for transition and animation ✨
Tweet media one
8
31
201
@codewithshripal
Shripal Soni
@codewithshripal
1 year
CSS Tip 💡 Do you know we can access an HTML attribute value as a string inside CSS? ✨ Learn more about it 👇
3
42
204
@codewithshripal
Shripal Soni
@codewithshripal
2 years
14 websites providing free SVG icons for personal and commercial use⚡ A️ thread 🧵 ↓
Tweet media one
22
61
194
@codewithshripal
Shripal Soni
@codewithshripal
2 years
HTML Tip 💡 You may not know about this semantic way to hide an HTML element ✨
Tweet media one
14
33
195
@codewithshripal
Shripal Soni
@codewithshripal
1 year
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