5 lifesaver tools every web dev should know 🔥

Part 2 🚀✨

A thread👇🧵

#webdev #javascript #webdeveloper #react #developers

1️⃣ Nibbler

https://nibbler.silktide.com/

Free tool for testing how good your website is, and what you can do to improve it. Check accessibility, SEO, social media, compliance and more.

2️⃣ What Web can do today

https://whatwebcando.today/

This tool allows you to check what APIs are available in the browser you are currently using

3️⃣ CSS reference

cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated manner

4️⃣ Tinypng

https://tinypng.com/

TinyPNG uses smart lossy compression techniques to reduce the file size of your WEBP, JPEG and PNG files. The effect is nearly invisible but it makes a very large difference in file size!

5️⃣ Material.io

Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design.

Here's part 1 if you missed it!

https://twitter.com/RainboeStrykr/status/1498318848025497603

Thank you for reading! 

Hey, I'm Abhiraj 👋
I write threads and blogs on web development and dev resources. 

If you found this thread useful: 
- Follow me 🙏
- Retweet it ♻
- Turn on the notifications ❤

Thank you for the support guys!

You can read the unrolled version of this thread here: https://typefully.com/RainboeStrykr/0ObrnxM

5 life saving websites for developers - Part 2

Choosing a color is a very big decision and it might be intimidating at first!

Here are 10 websites and resources that help with choices related to colors 🎨

A thread 👇🧵

1️⃣ Color Brewer 2

https://colorbrewer2.org/

The original color palette generator, also supporting color blindness. Probably the scientifically best option. Also probably not the prettiest.

2️⃣ Colormind

http://colormind.io/

Color palette generator

3️⃣ Colorcurves

https://colorcurves.app

Color palette generator that uses curves to generate color palettes

4️⃣ Color Gradient

https://colorgradient.dev/

A free tool to create simple and complex CSS Gradients visually

5️⃣ Coolors

https://coolors.co/

Create the perfect palette or get inspired by thousands of beautiful color schemes

6️⃣ HTML Codes

https://htmlcolorcodes.com/

Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names

7️⃣ Colors & Fonts

https://www.colorsandfonts.com/

A curated library of colors, fonts and resources

8️⃣ Pallete List

https://www.palettelist.com/

Pick 2 colors you like and the tool generates thousands of palettes for you.

9️⃣ Paletter

https://www.paletter.app/

Create a color palette from a single color

🔟 Google Material Color Tool

https://material.io/resources/color/

Official Google Material Color Palette Tool

You can read the unrolled version of this thread here: https://typefully.com/RainboeStrykr/VjrXCul

10 resources to help you choose colors better

Coding is a skill you won't want to miss in 2022

Here are 5 Youtube channels you must check out to learn coding!

A thread👇🧵

#webdev #coding #javascript

1️⃣ Programming with Mosh

https://www.youtube.com/c/programmingwithmosh/videos

2️⃣ FreeCodeCamp

https://www.youtube.com/c/Freecodecamp/videos

3️⃣ TraversyMedia

https://www.youtube.com/c/TraversyMedia/featured

4️⃣ Kevin Powell

https://www.youtube.com/kepowob/playlists

5️⃣ codeStackr

https://www.youtube.com/c/codeSTACKr/videos

You can read the unrolled version of this thread here: https://typefully.com/RainboeStrykr/Wvuix8t

5 Youtube channels to learn coding

5 lifesaver tools every web dev should know 🔥

Part 1 🚀✨

A thread👇🧵

#webdev #javascript #webdeveloper #react #developers

1️⃣ Ngrok

If you create a website on a local server and show off your results to someone, you can use ngrok.

https://ngrok.com/

2️⃣ Vertopal

Free online platform for converting computer files to a variety of file formats

https://www.vertopal.com/

3️⃣ Shortcode

A collection of useful snippets and code examples for HTML, CSS, JavaScript, Node, Artisan, Blade and more.

https://shortcode.dev/

4️⃣ Showcode

Beautiful code screenshot generator.

https://showcode.app/

5️⃣ Brandbird

Awesome all-round social media image editor

https://brandbird.app

You can read the unrolled version of this thread here: https://typefully.com/RainboeStrykr/c7q6IxR

5 life saving websites for developers - Part 1

APIs allow developers to create complex functionality more easily.

Here are 5 popular APIs you can get started with!🚀

A thread👇🧵

#webdev #apis #API #javascript

1️⃣ OpenWeather API

OpenWeatherMap is an online service that provides weather data including forecasts and historical data. Their API provides access to weather maps and forecasts for multiple cities across the world.

2️⃣ Chuck Norris Joke API

The Chuck Norris API is a hilarious API that provides random jokes and memes about the great American hero.

3️⃣ Marvel Comics API

The Marvel Comics API allows developers everywhere to access information about Marvel's vast library of comics—from what's coming up, to 70 years ago.

4️⃣ City Geo Location API

The City Geo-Location Lookup API provides Latitude, Longitude Coordinates as well as Time-Zone of any city.

5️⃣ Words API

The Words API is “an API for the English Language” that has a wide array of functions such as extracting word definitions or synonyms, retrieving word or phrase example usage, getting rhyming words, and much more.

You can read the unrolled version of this thread here: https://typefully.com/RainboeStrykr/6Utym3C

5 popular APIs you can get started with today!

Figma can be said to be a haven for designers. 🔥

It has a plethora of plugins to enhance your experience. 🚀

Here are 10 underrated @figma plugins you must check out! ❤

A thread👇🧵

#figma #webdesign #prototyping #designer #webdev #plugins

1️⃣ Easometric

This plugin lets you create isometric artworks the easiest way possible.

2️⃣ Typeout

Quick UX microcopy for any situation.

3️⃣ Tailwind Color Gen

Generate monochromatic, tailwind-like palettes quickly.

4️⃣ TextCutter

This plugin lets you split a chunk of text into single lines

5️⃣ BENZIN

A free background remover.

6️⃣ ChartLine

A very good alternative to paid line chart generators

7️⃣ Squircle

This plugin lets you create square circles with ease

8️⃣ Color name

This plugin lets you name any color for creating design systems

9️⃣ 3D transformer

This plugin lets you turn any frame into a 3D mockup

🔟 Lazy Load

This plugin generates skeleton loading screens automatically.

Thank you for reading! 



Hey, I'm Abhiraj 👋
I write threads and blogs on web development and dev resources. 

If you found this thread useful: 


- Follow me 🙏
- Retweet it ♻
- Turn on the notifications ❤



Thank you for the support guys!

10 underrated Figma plugins for designers

templates ease our workload and make us feel less stressed, and, at the same time, they increase efficiency.

Here are 25 best places to get awesome HTML templates for you to create your next website✨

A thread 👇🧵

#html #css #templates #webdev #coding #developer

1️⃣ HTML5UP

Very modern, unique responsive HTML5/CSS3 themes

https://html5up.net/

2️⃣ Templatemo

Minimal, resume, gallery themes and more

https://templatemo.com

3️⃣ Templated.co

Tons of minimalistic HTML5/CSS3 themes

https://templated.co

4️⃣ FreeHTML5

Free & premium HTML5 and Bootstrap themes

https://freehtml5.co/

5️⃣ Styleshout

Brilliantly crafted free website templates

https://www.styleshout.com/free-templates/

6️⃣ Start Bootstrap

Bootstrap Starter themes

https://startbootstrap.com/

7️⃣ Zerotheme

HTML5, Bootstrap, Prestashop templates

https://www.zerotheme.com/

8️⃣ HTML5xCSS3

Collection of wonderful templates in different categories

https://www.html5xcss3.com/

9️⃣ Colorlib

Almost any category of theme you can think of

https://colorlib.com/wp/templates/

🔟 Free CSS

Huge collection of free templates

https://www.free-css.com/free-css-templates

1️⃣1️⃣ Hubspot

Templates, infographics, banners and much more

https://www.hubspot.com/resources

1️⃣2️⃣ Mobirise

Great looking HTML5/CSS3 templates

https://mobirise.com/html-templates/

1️⃣3️⃣ Bootswatch

Free themes for Bootstrap

https://bootswatch.com/

1️⃣4️⃣ Onepagelove

One-page websites, templates and resources

https://onepagelove.com/

1️⃣5️⃣ Themes for App

Free Bootstrap themes and landing pages

https://themesfor.app/

1️⃣6️⃣ Bootstrap Taste

Premium & Free Bootstrap Templates

https://bootstraptaste.com/

1️⃣7️⃣ BootstrapMade

Elegant, clean and beautiful free templates using Bootstrap.

https://bootstrapmade.com

1️⃣8️⃣ W3Layouts

W3Layouts: 3784+ Free Website Templates for 2020

https://w3layouts.com/

1️⃣9️⃣ Tooplate

Tooplate: Free HTML Templates for everyone!

https://www.tooplate.com/

2️⃣0️⃣ Cruip

Fully coded HTML templates to help you easily build your startup landing page without hassles.

https://cruip.com/free-templates/

2️⃣1️⃣ UIdeck

Free Landing Page Templates and Bootstrap Themes

https://uideck.com/

2️⃣2️⃣ Spawlr

Free web templates to kickstart your idea!

https://splawr.com/

2️⃣3️⃣ W3CSS

Some responsive W3.CSS website templates for you to use.

https://www.w3schools.com/w3css/w3css_templates.asp

2️⃣4️⃣ All Free Download

Download free-website-templates

https://all-free-download.com/free-website-templates/free-html-css-templates.html

2️⃣5️⃣ Mashup

HTML5/CSS3 free templates

http://www.mashup-template.com/templates.html

Thank you for reading! 



Hey, I'm Abhiraj 👋
I write threads and blogs on web development and dev resources. 

If you found this thread useful: 


- Follow me 🙏
- Retweet it ♻

- Turn on the notifications ❤



Thank you for the support guys!

25 websites for awesome HTML templates

"Javascript is the backbone of the internet"

It's never too late to learn JS and so...✨

Here are 5 killer JS one-liners for you🔥

A thread👇🧵

#javascript #webdev #programming #webdeveloper #developers

1️⃣ Copy to clipboard

Easily copy any text to the clipboard using "navigator.clipboard.writetext"

2️⃣ Clear all cookies

Clear all the cookies stored in a web page by accessing the cookie using document.cookie and clearing it.

3️⃣ Get Selected text

Get the text the user has selected using "getselectionproperty"

4️⃣ Generate a Random Hex Color

You can generate random HEX colors with Math.random and PadEnd properties.

5 killer JS one-liners every dev should know

React.js was voted as the favorite web framework on the Stack Overflow dev survey 2021 📈

There's no denying that React is blowing up and not looking to slow down any time soon💲💲💲

Here are 5 tips for you to excel at React

A thread👇🧵

#react #ReactJS #javascript #webdev

1️⃣ Share your Knowledge and Experience

Share what you've learned and what you've done. Explaining something can let you recognize where you need to brush up on your own understanding.

2️⃣ Always Think of Multiple Solutions

Try to think of multiple ways to implement a solution before you go ahead and do it. It frequently reveals issues that you would otherwise only see while implementing.

3️⃣ Avoid Duplications by Making Your Code More Reusable!

When writing code for a given component, keep in mind that there may be (or soon will be) other areas in the system that have comparable functionality.

4️⃣ Learn TypeScript Early On

If you don't know much about TS, you'll probably be unable to type everything correctly and will occasionally type "any," but you'll come to appreciate how useful it is with time.

5️⃣ Functional Components Tend To Be More Useful Than Class Components

Functional components are substantially lighter than class components since class components contain a lot of functionality that we don't require.

5 React tips you need to know

Forms are an essential part of any UI

I just realized an article on how you can make forms easily

https://abhiraj.co/blog/collect-data-with-forms-like-a-boss

Continuing with the topic, today I'll tell you about 5 HTML forms best practices you should know about

A thread👇🧵

1️⃣ Label fieldset With Legends 

It's hard to justify using a fieldset without giving it a name. We may improve the code above by titling our fieldset with the legend element. The legend will arrange itself over the border of the fieldset element, which has a border by default.

2️⃣ Use the label Element

While there's nothing wrong with using a span to mark the inputs, the label tag is a natural fit for them.

3️⃣ Name Your Inputs

Each input element must have a name if you wish to transfer form data to a script; if you're using PHP, these names will become the keys of a superglobal array, commonly $_POST or $_GET.

4️⃣ Give Labels the for Attribute

The for attribute allows you to associate a label with an input. The id of the input you wish to tie it to should be the same as the value of for.

5️⃣ Use optgroup to Categorize Options

The optgroup is a little-known element that will indent and title choices. It is important to note that the label attribute is essential.

A big thank you to everyone who followed me today! Hope I will be able to create content which will help you in web development.

Thank you for reading! 



Hey, I'm Abhiraj 👋


I write threads and blogs on web development and dev resources. 

If you found this thread useful: 


- Follow me 🙏
- Retweet it ♻
- Turn on the notifications ❤



Thank you for the support guys!