@devsamples profile picture
devsamples @devsamples

Providing the world with common and easy to use code samples to make your coding journeys easier. #100DaysOfCode #javascript #reactjs

Joined April 2019
  • Tweets 443
  • Following 144
  • Followers 272
184 Photos and videos
Pinned Tweet
devsamples@devsamples
25 Jun 2019
What are some of the common code snippets you have to look up every time you work on a project? Sticky footers? React lifecycle methods? Something more complex? #webdevelopment #100DaysOfCode #CodeNewbie #javascript #css #javascript #webdev #HTML #reactjs #git #learntocode
3
3
6
devsamples@devsamples
10 Jul 2021
SvelteJS makes it easy to do things that would normally require a lot of code/complexity. Here's a way to create a parallax scrolling effect with just a few lines of code. #javascript #sveltejs #100daysofcodechallenge #CodeNewbie #webdev #code devsamples.com/javascript/sv…
1
The :empty pseudo selector is a great way to target elements without any content. Here's one way to use it. #CSS #100DaysOfCode #CodeNewbie #code #Webdesign #Website devsamples.com/css/targettin…
6
2
devsamples@devsamples
19 Jun 2021
SvelteJS provides some very useful lifecycle functions similar to React's componentWillUpdate/componentDidUpdate. Here's how to use them. #javascript #sveltejs #100DaysOfCode #CodeNewbie #React #code devsamples.com/javascript/sv…
1
11
12
devsamples@devsamples
16 Jun 2021
Typescript can cause some confusion when trying to define types for data that you don't know the exact shape of. Here's one method for typing an object with unknown properties. #typescript #javascript #100DaysOfCode #code #CodeNewbie devsamples.com/javascript/ty…
2
devsamples@devsamples
11 Jun 2021
Although React Native warnings should not always be ignored, there are times when you may want to silence them during development. Here's one method: #ReactNative #javascript #reactjs #100DaysOfCode #CodeNewbie #code devsamples.com/javascript/re…
4
Debounce functions are a great way to prevent performance issues and unnecessary updates for events like input change, resize, scrolling, etc. Here's one example: #javascript #CodeNewbie #100daysofcodechallenge #webdeveloper #100daysofcode #code devsamples.com/javascript/de…
1
7
5
devsamples@devsamples
29 May 2021
Did you know that you can perform client-side redirects without #javascript? Here's how. devsamples.com/html/refresh-…
2
devsamples@devsamples
19 May 2021
Javascript comes with some great currency formatting options, no need to use a third-party library in most cases. Here's one example: #javascript #100DaysOfCode #CodeNewbie #Currency #CodeNewbies devsamples.com/javascript/fo…
3
3
devsamples@devsamples
17 May 2021
The getEventListeners() function is an amazing tool that will show you the active event listeners bound to a given DOM node. Here's how to use it. #javascript #100DaysOfCode #CodeNewbie #webdev #javascript30 #CodeNewbies #Website #Chrome #code devsamples.com/javascript/ch…
3
5
devsamples@devsamples
13 May 2021
Combining the 'selected', 'disabled', and 'hidden' attributes is a great way to give HTML dropdowns a default value. Mix and match them to meet your use case. #HTML #webdeveloper #100DaysOfCode #CodeNewbie #javascript #frontenddev #webdev devsamples.com/html/select-d…
0:31
9
1
There are a bunch of different ways to copy a string to the clipboard in Javascript. Here's one method with great browser support. #javascript #100DaysOfCode #webdevelopment #CodeNewbie devsamples.com/javascript/co…
5
2
Did you know that you can refresh a page without using javascript? Here's an example that effectively adds client-side polling to a webpage with just HTML. #HTML #javascript #HTML5 #javascript30 #100DaysOfCode #CodeNewbie #webdevelopment #HTML名刺 devsamples.com/html/refresh-…
8
6
devsamples retweeted
Addy Osmani
@addyosmani
30 Apr 2021
The <img> element now supports lazy-loading, async decoding and many other features: bit.ly/img-cwv I wrote about how to optimize UX & the Core Web Vitals with it.
In the below code-snippet, aspect ratio is maintained, a modern image format is served at the right size, dimensions are set to reduce CLS and the image is lazy-loaded and async decoded. <style> img { max-width: 100%; height: auto; } </style> <picture> <source sizes="(max-width: 600px) 100vw, 600px" srcset="donuts-1920w.avif 1920w, donuts-1280w.avif 1280w, donuts-640w.avif 640w" type="image/avif"> <source sizes="(max-width: 600px) 100vw, 600px" srcset="donuts-1920w.webp 1920w, donuts-1280w.webp 1280w, donuts-640w.webp 640w" type="image/webp"> <source sizes="(max-width: 600px) 100vw, 600px" srcset="donuts-1920w.jpg 1920w, donuts-1280w.jpg 1280w, donuts-640w.jpg 640w" type="image/jpeg"> <img loading="lazy" decoding="async" height="1100" width="2000" src="donuts.png" > </picture>

ALT In the below code-snippet, aspect ratio is maintained, a modern image format is served at the right size, dimensions are set to reduce CLS and the image is lazy-loaded and async decoded. <style> img { max-width: 100%; height: auto; } </style> <picture> <source sizes="(max-width: 600px) 100vw, 600px" srcset="donuts-1920w.avif 1920w, donuts-1280w.avif 1280w, donuts-640w.avif 640w" type="image/avif"> <source sizes="(max-width: 600px) 100vw, 600px" srcset="donuts-1920w.webp 1920w, donuts-1280w.webp 1280w, donuts-640w.webp 640w" type="image/webp"> <source sizes="(max-width: 600px) 100vw, 600px" srcset="donuts-1920w.jpg 1920w, donuts-1280w.jpg 1280w, donuts-640w.jpg 640w" type="image/jpeg"> <img loading="lazy" decoding="async" height="1100" width="2000" src="donuts.png" > </picture>

41
1,086
4,230
devsamples@devsamples
29 Apr 2021
Ever wanted to "go back in time" with Git? You can! Use the reflog command to view the history of changes and reset to a specific commit. #git #github #100DaysOfCode #javascript #CSS #CodeNewbie #code #webdeveloper #webdev #Website devsamples.com/git/go-back-i…
4
2
devsamples@devsamples
26 Apr 2021
Docker is everywhere these days, but sometimes it can be difficult to find and remove any containers that you have running. Here's a sample to help you stop or remove these containers. #docker #CodeNewbie #webdevelopment #100DaysOfCode devsamples.com/docker/stoppi…
2
devsamples@devsamples
23 Apr 2021
Browsers often have a hard time figuring out how to break up long words. Use the word-wrap and word-break properties to specify how a browser should handle text content that doesn't fit. #CSS #100DaysOfCode #webdevelopment #CodeNewbie #javascript #code devsamples.com/css/css-break…
1
1
devsamples@devsamples
17 Apr 2021
There are a number of different ways to empty an array with Javascript. Here are 3. Can you think of any others? #javascript #100DaysOfCode #CodeNewbies #javascript30 #code devsamples.com/javascript/em…
3
1
devsamples@devsamples
15 Apr 2021
If you use React Navigation, you may have wanted to send data back to a component when using the goBack() method. This is not supported, but here's a workaround. #ReactNative #reactjs #100DaysOfCode #CodeNewbie #ios #Android #code devsamples.com/javascript/re…
2
2
5
devsamples retweeted
Mikael Ainalem@mikaelainalem
11 Apr 2021
Using clip-path transitions to create a hamburger menu open effect. On @CodePen codepen.io/ainalem/full/OJWQ…
0:21
4
19
150
devsamples@devsamples
12 Apr 2021
Removing all files of a given type or extension is a breeze with the command line. Here's one way you can do it on UNIX or Windows machines. #UNIX #Windows #100DaysOfCode #Linux #CodeNewbie #code devsamples.com/shell/remove-…
1
4
Load more