Madza Profile picture
11 Oct, 13 tweets, 5 min read
12 Simple HTML Snippets To Avoid Complex Libraries ⚑✨

You don't always need a library! I made all these snippets with vanilla HTML and a bit of CSS! πŸ’»πŸŽ¨

A threadπŸ§΅πŸ‘‡
🎨 Color Picker

Often in the developer workflow, you might want to access the color spectrum and be able to pick up any shade from it.

You can use <input type="color">, which would otherwise be a time-consuming task to write from scratch.
πŸ“š Blockquote

When writing articles you might want to highlight some of your favorites quotes.

You can use a <blockquote> tag for that. Add some custom styling and you have a nice element that will stand out from the rest of the text. Image
🎡 Audio Player

Writing your own audio player from scratch can be a challenge. You can use the built-in <audio> tag, that provides the basic functionality to play your audio files.
πŸ“Ί Video Player

Another multimedia you could use in your projects is video. Again, you can not just include the video link in HTML and hope that it will play.

To playback videos properly you can use a built-in <video> tag.
πŸ”· Accordion

Sometimes you might want to hide some content and allow users to reveal it manually (to save the space of the viewport, for example).

You can achieve the described functionality with pure HTML, thanks to the <details> tag.
πŸ“… Date Picker

Working with dates is among the most common reasons why devs search for external libraries.

HTML provides a <input type="date"> tag, that provides a nice UI with the option to select the dates by clicking on them.
βšͺ Slider

Slider is a common component to collect the user input in the specific numeric range.

You can use <input type="range"> to get a fully functional slider, where you can set the min, max, and current value.
✍ Content Editor

In order to edit content, you don't have to use input or textarea fields and set the default values for them.

Instead, you can use 'contenteditable' attribute, which allows editing the content of the div, for example.
πŸ“· Picture Tag

You might want to display different images on different screen sizes to improve the performance and UI/UX.

Instead of using the default <img> tag, detect the viewport, and creating a method to switch between the images, you can use a built-in <picture> tag. Image
βŒ› Progress Bar

The <progress> tag represents the completion progress of a task.

You can use it to display various actions, such as a download, file transfer, or installation. Image
πŸ”» Dropdown

Instead of listing all the options on the screen, you might include them in the dropdown.

Using the <datalist> tag will allow users to select options from dropdown, while also allowing them to enter their own values.
πŸ’­ Tooltip

If you need to give a detailed description of something, it is always nice to include a popup.

HTML built-in title attribute provides that by default.

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Madza

Madza Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @madzadev

13 Oct
If you are just starting out as a dev, these 24 things will prepare you for the long journey ahead. πŸŒ±πŸš€

I learned them the hard way. Make sure to use them as a shortcut in your own learning path. πŸ“šβœ¨

Mega threadπŸ§΅πŸ‘‡
Being a programmer is way more than sitting in front of the computer and randomly pressing buttons on the keyboard.

It's a powerful tool to solve a lot of real-world problems and make people's lives easier.

If you are capable to do it, you will always be looked after.
Each and every successful project starts with lots of planning. Make sure you identify the goal, define tasks, know your audience, etc.

Use a pen and paper or any online wireframing tool and try to come up with a clear schema of what your solution would look like.
Read 25 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(