DEV Community: Abhiraj Bhowmick

7 android apps to help you keep up with tech and coding

Abhiraj Bhowmick — Wed, 19 Apr 2023 15:45:25 +0000

In today's fast-paced world, staying up-to-date with the latest developments in the tech and coding world can be challenging. With so many publications, low-quality content, and rapid changes in the tech landscape, it's essential for developers to have reliable sources of information. Here are 7 of the best Android apps that can help you keep up with the latest in tech and coding:

1. Daily.dev

Daily.dev is one of the best developer-oriented tech platforms out there.
The best location to easily get technical stuff is daily.dev. You'll gain information and save time as a result. Interested in web development news? No issue. Computer learning? You nailed it. Simply choose your preferred choices, and we'll do the rest. Save interesting articles for later reading and cure your information overload.

2. Substack Reader

Substack is the new form of writing. It is built with the purpose to spread knowledge. Whether you are a writer or a reader, Substack should definitely be a part of your inventory. Not just tech, Substack features a large number of topics to read, ranging from culture and sports to politics and finance. Substack reader helps you to collect your newsletters in a dedicated Inbox, be instantly notified when a writer you’ve subscribed to publishes a new post, and read posts in a simple and elegant view.

3. Medium

Over 100 million users visit Medium to uncover sharp and innovative thoughts. Expert and unheard voices alike delve into the core of any subject here and bring fresh perspectives to the fore. The goal is to make these concepts more widely known and to increase global understanding. Medium is home to some of the biggest tech publications out there, and all of the content published on this app is high quality.

4. DevBytes

To keep developers, product managers, and engineering managers informed of the latest developments in the technological industry, Devbytes has been created. It chooses the most recent news on coding and technology from numerous domestic and foreign sources, well-known tech blogs, and social media and condenses it into less than 64 words. It's simple to establish a certain time for the notification to arrive. You can also bookmark the news so you can manage it conveniently and read it with just one click whenever you want. Additionally, the auto-swipe feature will automatically swipe your news stream at a predetermined time that will be displayed on the application's news page.

5. GeeksforGeeks

GeeksforGeeks is a one-stop shop for programmers. The app includes 40,000+ articles, 20000+ programming questions, and interview experiences from MNCs like Google, Amazon, Microsoft, Samsung, Facebook, Adobe, Flipkart, etc. Learn new skills in programming languages like C, C++, Java, Python, PHP, C#, and JavaScript with a community of over a million other geeks. GeeksforGeeks has your back whether you're a college student trying to launch your career or a seasoned professional looking to change careers.

6. Feedly

Millions of professionals and enthusiastic learners use Feedly every day to follow blogs, publications, and other sources that are important to them, on their phones and tablets. You can simply manage all of your newspapers, blogs, YouTube channels, and more with Feedly, making it easier to consume and share content. Stop zigzagging now. You receive all the content in one location, in an organized and simple-to-read style. Leo, its assistant, helps you by selecting content relating to the topics you specify. The users of Feedly provide its funding. As a result, it concentrates on making the most of your time rather than building a feed that exploits it.

7. Techgenyz

One of the finest methods to acquire the most recent tech news on your phone is Techgenyz. This app delivers the most up-to-date news, news articles, and daily headlines about what's occurring in the tech world with respect to your favorite companies, including Apple, Facebook, Instagram, Snapchat, Twitter, Tinder, Netflix, Spotify, WhatsApp, Telegram, and more. Here you can find curated news about startups, gadgets, mobile devices, software, apps, and other topics.

Thank you for reading

With these Android apps, you can stay informed and keep up with the
ever-evolving world of tech and coding, helping you to stay ahead in your field and expand your knowledge. If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches, and tech news, and follow me on Twitter for daily threads on web dev resources.

Debugging in Javascript

Abhiraj Bhowmick — Sun, 29 May 2022 15:28:20 +0000

Programmers spend a lot of time diagnosing and remedying errors and omissions in their code. Debugging slows down the Javascript execution and shows how data is modified line by line. Since Javascript is interpreted at run time and executed inside the browser, debugging is performed with tools built into the browser.

Errors in Javascript

1️⃣ SyntaxError

An error in the way the code is written causes a syntax error. This error occurs while the Javascript engine is interpreting the code at run time.

2️⃣ TypeError

This error occurs when the wrong data type is used. For example, applying the string.substring method to a variable that is a number.

3️⃣ RangeError

When the code attempts to use a number that is outside the range of possible values, Javascript detects a RangeError

4️⃣ URIError

Some alphanumeric characters are not allowed to be used in a URL. A URlError is thrown when there is a problem encoding or decoding a URI because of the use of a reserved character.

5️⃣ ReferenceError

This error occurs when the code refers to a variable that either does not exist or is not in scope for the executing code.

6️⃣ EvalError

This error occurs when there is a problem with the eval() function. Newer versions of Javascript do not throw this error.

Developer Tools

All modern browsers contain a set of developer tools to help programmers work with HTML, CSS, and Javascript. The developer tools contain functionality to debug Javascript and view the state of HTML elements in the browser. To open the developer tools for the Google Chrome browser, press Command+Option+I (Mac) & Control+Shift+I (Windows, Linux).

The Console

Web Developers can output messages to the console log to make sure their code is executing as expected. The "Console" tab contains two areas:

1️⃣ Console Output log: Displays system and user messages from the Javascript execution.

2️⃣ Console Command Line Interface: Accepts any Javascript instructions and executes them immediately.

Javascript debugger

The Javascript debugger can be found under the Sources tab. The debugger makes it possible to step through the code line by line to see what is happening to the variables as the code executes. On the left is a list of all the source files used by the HTML document. Select the file to debug from this list.

Scope

In the "Sources" tab, the window on the right contains the scope. The local and global sections under this show the variables that are defined in the current scope. The scope pane is only populated with variables when the script is being debugged.

Breakpoints

The Javascript engine pauses the execution of code when it hits a breakpoint. This allows programmers to examine it. The execution can proceed in the sine of the following ways.

1️⃣ Resume Script Execution: Resumes execution until the program hits another breakpoint or the program ends.

2️⃣ Step-Over: Executes the next line of code in a single step and then pauses on the following line. It steps over a function without debugging the individual steps of the function.

3️⃣ Step into: Executes the next line of code and then pauses on the following line. It will step into a function line by line.

4️⃣ Step out: Executes the remaining code in the current function, and pauses when the runtime returns to the line of code after the function was called.

Error Handling

In Javascript the try...catch statement allows programmers to handle errors in the code. Normally program execution stops when an error is thrown by the Javascript engine. However, if the code is wrapped in a try block, the execution will jump to the catch block if an exception is thrown and the program will continue as normal. It is also possible to manually raise an error of using the "throw" statement.

Try...Catch Statement

try{
     noSuchCommand(); // This function does not exist
}
catch (err) {  // The code jumps to the catch block instead of stopping the program execution
           console.error(err.message)
}
console.log("Script continues to run after the exception"); // The error message displayed in the console

Throw statement

throw("Oops there was an error"); // The throw operator generates an error

Thank you for reading

If you liked this post, subscribe to my newsletter
to never miss out on my blogs, product launches, and tech news, and follow me on Twitter for daily threads on web dev resources.

5 best practices for better HTML forms

Abhiraj Bhowmick — Tue, 01 Mar 2022 08:21:46 +0000

Forms are an essential part of any UI

It can be intimidating to work with HTML forms. They don't only use a few specialised HTML elements; they also blur the barrier between static material and user involvement. Forms can be complex and even irritating for users; they frequently interrupt a user's main focus and direction on a page: they want to buy that gift or try out your new web app, not give you their mailing address or create yet another password. These pointers will make form development and design easier for you as a developer or designer, as well as for your users.

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.

<fieldset>
    <legend>Billing Address</legend>
    <span>Address</span><input type="text" />
    <span>City</span><input type="text" />
    <span>Province</span><input type="text" />
    <span>Postal Code</span><input type="text" />
</fieldset>

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.

<fieldset>
    <legend>Billing Affress</legend>
    <label>Address</label><input type="text" name="billAddress" />
    <label>City</label><input type="text" name="billCity" />
    <label>Province</label><input type="text" name="billProvince" />
    <label>Postal Code</label><input type="text" name="billPC" />
</fieldset>

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.

<fieldset>
    <span>Billing Address</span><input type="text" name="billAddress" />
    <span>City</span><input type="text" name="billCity" />
    <span>Province</span><input type="text" name="billProvince" />
    <span>Postal Code</span><input type="text" name="billPC" />
</fieldset>

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.

<fieldset>
    <legend>Billing Affress</legend>
    <label for="billAddress">Address</label><input type="text" id="billAddress" name="billAddress" />
    <label for="billCity">City</label><input type="text" id="billCity" name="billCity" />
    <label for="billProvince">Province</label><input type="text" id="billProvince" name="billProvince" />
    <label for="billPC" >Postal Code</label><input type="text" id="billPC" name="billPC" />
</fieldset>

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.

<select>
<optgroup label="USA">
    <option>Alabama</option>
    <option>Alaska</option>
    <option>Arizona</option>
</optgroup>
<optgroup label="Canada">
    <option>Alberta</option>
    <option>British Columbia</option>
    <option>Manitoba</option>
</optgroup>
</select>

Now that you know how to level up your forms, you might want a place to collect & store the data. Fret not, for I have the perfect tutorial to help you get started. Click here to read about how you can collect form data like a boss.

Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches, and tech news, and follow me on Twitter for daily threads on web dev resources.

200+ Design resources you must know right now!

Abhiraj Bhowmick — Tue, 22 Feb 2022 14:25:41 +0000

Online Design Tools

All kinds of online tools for design, from photo editors to wireframing, and more

Website	Description
Figma	Online graphic design tool (Free & paid options)
Vectr	Free vector graphics software
Taler	Create social media banner designs in minutes from hundreds of customizable templates
Canva	Create beautiful designs (Free & Paid)
Get Waves	A free SVG wave generator to make unique SVG waves for web design
Clippy	Easy CSS clip-path maker
Fancy Border Radius	Eight values specifying border-radius in CSS ( border-radius generator )
Wireframe.cc	Wireframing tool (free & paid)
Fotor	Photo editor and design maker
Pixlr	Online photo editor
Veed	Make videos online in the simplest way possible. Cheap and all-in-one editor.
RemoveBG	Remove image backgrounds
Photo Creator	Create your own photos instead of searching for stock
Visme	Create presentations, infographics and more
Infogram	Create infograms
ChartGo	Create charts and graphs online
Cartoon Photo	Turn photos into cartoons
Whimsical	Wireframes, diagrams and more (4 free)
Whiteboard	Online drawing tool
Octopus	Sitemap builder
CTA Button Maker	Create call to action buttons
Blobmaker	Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes.
Personas	A playful avatar generator for the modern age
SoftUI	A Soft UI (neumorphism) CSS generator
Photopea	An Online Photoshop editor
Excalidraw	Virtual whiteboard for sketching hand-drawn like diagrams
Diagrams	Diagram software and Flowchart maker
MapInSeconds	Simple way to visualize your data with a map
Grid Malven	A css grid cheatsheet to reference when creating a css grid
Flex Malven	A flexbox grid cheatsheet to reference when working with flexbox
Smart Upscaler	Upscale images by 2-4x resolution
GetAvataaars	Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library
Big Heads	Easily generate avatars for your projects with Big Heads by Robert Broersma.
Webflow	Break the code barrier, Build better business websites, faster. Without coding.
Trace	Instantly remove the background from your photos
Neumorphism.io	Generate Soft-UI CSS shadow code
DB Designer	Design your database for free online
Ui Bakery	Create full-fledged web apps visually
Faux	Turn real code into faux code
Rive	Real-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform.
Unscreen	Remove Video Background 100% Automatically and Free
Kodeshot	Convert your source code into nice pictures for your articles, tweets, messages, posts...
Wix	Create a Website You’re Proud Of
GTmetrix	Website Speed and Performance Optimization
Framer	Is prototyping tool for teams
Draw.io	Free online diagram editor tool
UXWing SVG Editor	Creating and Edit SVG Online
CSS Arrow	Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like.
Lucidchart	Diagramming and visualization tools that allows creating databases, flowcharts, boards, floor-maps, and much more. 3 multi-page documents on the free tier
Carbon	Create and share beautiful images of your source code by typing or drop a file.
PixCleaner	Accurate and hassle free background removal tool
Glass UI	A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.
Glassmorphism	An incredible online tool for generating quick glassmorphic UI in CSS code snippets.
TableConvert	Table Convert Online is a web-based tool to converts Excel, URL, HTML, Markdown table and CSV to Markdown table, CSV/TSV, JSON, XML, YAML, insert SQL, HTML, Excel and LaTeX table.

Downloadable Design Software

Free software for UI, photo, 3d modeling, etc.

Website	Description
Gimp	Free & open source image editor similar to Photoshop
Gravit Designer	Free full-featured vector graphic design app that works on ALL platforms
Blender	Open source, free animation, 3D modeling, etc.
Raw Therapee	Cross-platform raw image processing program
Be Funky	Online design program
Krita	Sketching and painting program designed for digital artists
Pencil Project	GUI prototyping software
Inkscape	Powerful free design tool
Adobe XD	Free design tool from Adobe
Shapes.so	Icons that can be used as code in your projects
Lunacy	Sketch for Windows
InVision Studio	Free screen designing tool from InVision
Darktable	Free & Open source photography workflow application and raw developer
Inpixio photo Editor	Free Photo Editor: For windows only
Colorpicker	Open Source colors software: Retrieve, manipulate and store your colors easily!

Design Inspiration

Here are some websites to get inspiration for design and UI

Website	Description
Behance	Design projects featured by different creators
Dribbble	Design projects featured by different creators
Landingfolio	Landingfolio features the best landing page inspiration, templates, resources and examples on the web.
Codewell	Practice your HTML, CSS, and Javascript skills on real world design templates
Foxyapps	Design inspiration from the best mobile app designs
Httpster	Showcases websites made by people from all over the world
Inspofinds	Latest design work from designers and the design community
Design Notes	Free online resource library for product designers
Land Book	Displays a large collection of websites to help find inspiration
Frontend Mentor	Real-world UI Challenges using HTML, CSS and Javascript
Awwwards	A website that rate and collects the best websites in the world in UI
Codrops	A website that collects the best UI ideas and patterns and make tutorials of it
SaaS Landing Page	Discover the best landing page examples created by top-class SaaS companies
Saaspages.xyz	A collection of the best landing pages with a focus on copywriting and design.
Screenlane	Screenlane is a website and newsletter that features the latest web and mobile design inspiration.
lapa ninja	Best landing page inspiration
Freefrontend	Free frontend design from css html and javascript. latest work some design part
Webframe	Discover and be inspired by beautiful webapp designs
Collect UI	Daily inspiration collected from daily ui archive and beyond. Handpicked, and updating daily.
Graphic Burger	A site offering a free and pain icons, mock-ups, Ui-Kits, text effect and backgrounds. This site's resource are a mix of free and paid resources. Icons is on a mix of PNG, SVG, EPS and Sketch Format. Some resources are confusing as there are sponsored content in the middle of the free sets.
Really Good Emails	A site offering users a ton of company e-mails from customer service to marketing.
Free Design Resource	A site offering fonts, mockups, templates graphics and ui kits.
Site Inspire	siteInspire is a showcase of the finest web and interactive design.
Web Design Inspiration	A site for web design inspiration, updated daily.
NavNav	Responsive navigation examples
Calltoidea	Collection of different web Components for inspiration.
MediaQueri.es	A collection of inspirational websites using media queries and responsive web design
Mulzli Search	Search engine for design inspiration
DeviantArt	Access to 370 million pieces of art for inspiration.
Design your way	Collection of different Web and Mobile Designs
Humans.fyi	A collection of brilliant personal websites filterable by colors and web technologies used in each website.
SiteSee	A curated gallery of beautiful and modern websites.
UI Garage	Daily handpicked UI inspiration & patterns.
ecomm.design	eCommerce Website Design Gallery & Tech Inspiration.
Design Nominees	A showcase of awarding and showcasing the best websites, apps and Games.
Design Vault	A library of screenshots and patterns from real world digital products
CSS buttons	84 Beautiful CSS buttons examples.
CSS box-shadow	91 Beautiful CSS box-shadow examples.

Design Systems & Style Guides

Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites

Website	Description
Material Design	Google's Material Design
Ant Design	Design system for enterprise-level products
Apple Design Resources	Guides and templates for using Apple design and UI
Primer	Design, build, and create with GitHub’s design system
Alta UI	Oracle's design system and toolkit
Pulse	Design system, guides and React component library
Bolt	Robust Twig and web component powered UI components
Clarity Design System	UX guidelines, HTML/CSS framework, and Angular components
AtlasKit	Atlassian's official UI library, built according to the Atlassian Design Guidelines
Audi Design Resources	Audi UI design system and toolkit
Carbon Design Systems	Carbon is IBM’s open-source design system for products and experiences
Yelp Style Guide	Yelp style guide, components and toolkit
Comet	Scalable design system of visual language, components, and design assets
ETrade Design System	Guides and toolkits that blend finance with simplicity and ease of use
Fundamental Library	Open source and community driven project for consistent user interfaces
Infor Design	Guidelines and resources to create meaningful experiences for Infor’s products
Lexicon	An experience language for crafting beautiful UI
Mailchimp UI/UX	Style guide and components from Mailchimp
Marvel Style Guide	Set of design principles and components
Microsoft Fluent UI	Collection of UX frameworks from Microsoft
Pluralsight Design System	Design guide with components for designing with Pluralsight
Polaris	Design system that creates great experiences for all of Shopify’s merchants
Mozilla Protocol	Protocol is a design system for Mozilla and Firefox websites
SendGrid Style Guide	UI library for developing consistent UI/UX at SendGrid
VTEX Styleguide	Reusable patterns, components and assets related to product design in VTEX
Rizzo	Style guide with UI components, JS components, widgets, etc
Atomize	UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly
StyleGuides.io	A directory of 500+ styleguides
Done Design System	Open source design system, guides & components
Skoda Brand System	Design guideline for developing applications under the Skoda brand
Spectrum	Adobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.
Asphalt	Gojek’s design language system. A collection of guidelines and components to create amazing user experiences.
Laws of UX	A collection of the key maxims that designers must consider when building user interfaces.
Checklist Design	Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets.
Humane By Design	A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being.
Pr1mer Guidelines	An open source set of very general guidelines, inspired by Human Interface. Created and maintained by Pr1mer Tech

Image Compression

Websites that allow you to compress large images

Website	Description
TinyPNG	Smart PNG and JPEG compression
Optimizilla	Online JPEG and PNG optimizer / compressor with settings and archive download
Compressor.io	JPEG, PNG, GIF, SVG Compression
Squoosh.app	Image compression from Google Chrome Labs
BulkResizePhotos	Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline)
iLoveIMG	The fastest free web app for easy image modification
SvgOMG	Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it.
CompressJPEG	Compress JPEG images with size even greater than 5MB
CompressNow	JPEG, GIF, PNG Compression
Promo Image Resizer	Free Image and Photo Resizer
Image Optimizer	Image Optimizer Free With Quality Options
SVGminify	This tool removes superfluous information, thereby reducing the size of your SVG files
JPEG Optimizer	Free online tool for resizing and compressing digital photos and images for displaying on the web
Resizing.app	Resize Your Images Online
EZGif	Animated GIF maker and Image editor including Image optimization and supports WebP conversion
OnlinePngtools	Resize png for without losing transparent background.
Verexif	Remove meta tags in image in order to reduce image size and increase privacy security
Vecta Nano	Uses lossless compression to compress inefficient SVG codes by removing unnecessary data. (Free & Paid)

HTML & CSS Templates

Websites that offer free beautiful website templates and themes of all types

Website	Description
HTML5Up	Very modern, unique responsive HTML5/CSS3 themes
Templatemo	Minimal, resume, gallery themes and more
Templated.co	Tons of minimalistic HTML5/CSS3 themes
FreeHTML5	Free & premium HTML5 and Bootstrap themes
StyleShout	Brilliantly crafted free website templates
Start Bootstrap	Bootstrap starter themes
Zerotheme	HTML5, Bootstrap, Prestashop templates
HTML5xCSS3	Collection of wonderful templates in different categories
Colorlib	Almost any category of theme you can think of
Free CSS	Huge collection of free templates
Hubspot	Templates, infographics, banners and much more
Mobirise	Great looking HTML5/CSS3 templates
Bootswatch	Free themes for Bootstrap
Onepagelove	One-page websites, templates and resources
Themes For App	Free Bootstrap themes and landing pages
BootstrapTaste	Premium & Free Bootstrap Templates
BootstrapMade	Elegant, clean and beautiful free templates using Bootstrap.
W3Layouts	W3Layouts: 3784+ Free Website Templates for 2020
Tooplate	Tooplate: Free HTML Templates for everyone!
Cruip	Fully coded HTML templates to help you easily build your startup landing page without hassles.
UIdeck	Free Landing Page Templates and Bootstrap Themes
Splawr	Free web templates to kickstart your idea!
W3css_templates	Some responsive W3.CSS website templates for you to use.
All-Free-Download	Download free-website-templates
mashup-template	HTML5/CSS3 Free Templates

Product & Image Mockups

Create mockups of devices and other products

Website	Description
Smart Mockups	Create stunning product mockups (free & premium)
Media Modifier	beautiful design mockups service for your products (free & premium)
Shot Snap	Create beautiful device mockup images for your app or website design
Screely	Instantly turn your screenshot into a mockup
Cleanshot	Generate screenshots for any website from its URLs.
Screen Peak	Create a mockup from a URL
Mockup World	The biggest source of free photo-realistic Mockups online
Collab Shot	Real-time screen grabs and image sharing
Facebook Devices	Images and Sketch files of popular devices
Threed.io	Generate 3D mockups right in your browser.
Mockuphone	100% free mockups for all devices including IOS, Android, Windows Phone, Laptop & Desktop and TV
Device Shots	Create high-resolution device mockups for social media, for free
Clean Mock	Create stunning mockups using latest device frames like iPhone X & custom backgrounds that make your mobile or website design standout, right from your browser quickly & for free.
Mock.Video	Instantly create mockups by adding a device frame to your videos.
MockupBro	Create product mockups with online mockup generator! Just choose a mockup, upload your design and download your image without a watermark.
Animockup	Create animated mockups in the browser.

Vectors & Clip Art

Free vectors, clipart, illustrations, patterns and more

Website	Description
Vecteezy	Find and download free vector art
Freepik	Free vectors, stock photos, PSD and icons
Free Vectors	Community of vector lovers who share free vector graphics
PNGTree	png, backgrounds, templates, text effects
Vector4Free	Free vector graphics
Retro Vectors	Vintage vectors and graphics
Freeble	Vectors, patterns, mockups and more
Lukaszadam	Free Vector artworks
Illlustrations	Beautiful 100 Illustrations - png, svg
Clipart	Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection!
Growwwkit illustrations	A set of 8 simple, black & white, stylish illustrations
trianglify.io	Generate low-poly backgrounds, textures, and vectors
blob	Generate Blob shapes for Web and Flutter apps
HiClipart	A community for designers to share & download transparent background PNG cliparts
Stories by Freepik	A collection of free and customizable illustrations for projects
Black Illustrations	Beautiful illustrations of black people (free and premium)
Delesign	A collection of free illustrations and more
Custom Shape Dividers	Free tool to make it easier for designers and developers to export a beautiful SVG shape divider
Servier Medical Art	3000 free medical images to illustrate your publications and PowerPoint presentations
Clker	Free clip art you can use for anything you like
SVG wave	A free, & customizable gradient 🌈 SVG wave generator for UI designs .
Heritage Library	Vintage Illustrations (vector and png)
ROBOHASH	Generate unique images from any text
Tabbied	Create and customize minimally generated patterns/artwork to use for background images, print and other projects.
Haikei	An awesome multishape web app.

UI Graphics

Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI

Website	Description
UI Design Daily	Awesome UI Components of all types
100 Daily UI	Free Figma library of products, elements, and screens
Sketch App Sources	Sketch UIs, wireframes, icons and much more
Humaaans	Cool illustrations of people with the ability to mix and match
Paaatterns	Free collection of beautiful patterns for all vector formats
thepatternlibrary	Free beautiful background patterns
404 illustration	Free illustrations for 404 pages
Drawkit.io	Illustrations for designers and startups
Absurd.design	Free surrealist illustrations for designers and developers
Undraw.co	Open-source illustrations for any idea you can imagine and create
Manypixels.co	Monochromatic, Isometric high-quality illustrations
Open Peeps	Hand drawn illustration library
UI Space	Thousands of great UI freebies
Animations.co	Beautiful, customizable animated GIF icons
Uplabs	High-quality design resources (Free & Premium)
InvisionApp	Library of free, high-quality UI kits, icon packs, and mockups
Open Doodles	A Free Set of Sketchy Illustrations
Avataaars	Free sketch library of avatars illustrations by Pablo Stanley
FreebieSketch	Free Sketch designs, wireframes, illustrations, and more.
Blush	Free customizable illustrations with Figma Plugin
Hero Patterns	A collection of repeatable SVG background patterns
IsoFlat	A Free collection of Isometric SVG graphic resources
IRA Design	An open-source gradient illustrations collection by creative tim.
Transparent Textures	A collection of transparent textures background patterns.
Storytale.io	Subset of Storytale free quality illustrations
icons8.com/illustrations	Free vector illustrations to class up your project
Patternico	Seamless Pattern Maker
Freellustrations	Free Background Images for awesome landing Pages
Pixeltrue Illustrations	Free Animated Illustrations
Abstract User Avatar API	API to create simple yet flexible user avatars from user names or emails
sketchvalley	Download free PNG, SVG or AI file .
PatternPad	Free and unlimited unique pattern designs.
Dimensions	Dimensions.com is an ongoing reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces
Freebiesbug	Hand-picked resources for web designers and developers, constantly updated.
Flexiple	One new high-quality, open-source illustration each day.
Cool Text	Cool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work
illustration kit	Premium open source illustrations added daily
Doodad Pattern Generator	Create unique, seamless, royalty-free patterns.
Pattern Monster	A simple online pattern generator to create repeatable SVG patterns
Exemplar	Free Avatar Library for Figma and Sketch

Fonts

Websites that offer free fonts as well as font-based tools

Website	Description
Google Fonts	Library of around 1000 free licensed font families
DaFont	Archive of freely downloadable fonts
Use & Modify	Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces
1001 Free Fonts	I think the name speaks for itself 😏
Font Squirrel	Font Squirrel scours the internet for high quality, legitimately free fonts
Font Fabric	A digital type foundry crafting retail fonts and custom typography for various brands
Tiff	A type diff tool that visually contrasts the differences between two fonts
TypeKit Practice	Learn about typography practices
Fontjoy	Generate font pairing in one click
Golden Ratio	Golden Ratio Typography Calculator
FontSpark	Discover Better Fonts
FontGet	Has a variety of fonts available to download and sorted neatly with tags
FontPair	Helps you pair Google Fonts together
Font Space	A designer-centered free font website that has quick customizable previews
Abstract Fonts	Fonts free for personal and commercial use
Free Typography	A list of high quality fonts
Leon Sans	A geometric sans-serif typeface made with code
Lexend	A variable font empirically shown to significantly improve reading-proficiency
Fonts for Apple Platforms	Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps
SFWin	San Francisco Fonts for Windows 10 and non-Apple Platform
Font Flipper	Preview 800+ Google Fonts on top of your own designs, without having to download the fonts
Fonts Arena	Free curated fonts
Befonts	High quality fonts for free
Arabic fonts	Arabic fonts for free
FontDrop	Simple and easy way to view the contents of font files
Open Foundry	FREE platform for curated open-source typefaces
Glyphter	Upload your own SVGS and turn them into font files. Useful if you want a smaller library loaded
Google Webfonts Helper	A Hassle-Free Way to Self-Host Google Fonts
Rough Font Awesome	When RoughJS meets Font Awesome
FFonts	Stylish fonts for free
Malayalam Fonts	Malayalam fonts for free which are maintained by Swathanthra Malayalam Computing(SMC)
Dev Fonts	Find and use the coding fonts for free

Colors

Websites and resources that help with choices related to colors

Website	Description
Color Brewer 2	The original color palette generator, also supporting color blindness. Probably the scientifically best option. Also probably not the prettiest.
Colormind.io	Color palette generator
ColorCurves.app	Color palette generator that uses curves to generate color palettes
ColorGradient	A free tool to create simple and complex CSS Gradients visually
Coolors	Create the perfect palette or get inspired by thousands of beautiful color schemes
HTML Color Codes	Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names
Colors & Fonts	A curated library of colors, fonts and resources
Palette List	Pick 2 colors you like and the tool generates thousands of palettes for you.
Paletter	Create a color palette from a single color
Google Material Color Tool	Official Google Material Color Palette Tool
Material Palette	Free to pick palettes, icons and colors for Material Design
ColorSpace	Generate nice color palettes from one color
FlatUIColors	Beautiful set of color palettes in various flavors
Adobe Color	Create color palettes, extract gradients from images, etc.
Colorsinspo	All-in-one resource for finding everything about colors
ColorsWall	Place to store your color palettes and generate palette in one click
Happyhues	Happy Hues is a color palette inspiration site that acts as a real-world example as to how the colors could be used in your design projects by Mackenzie Child
Adobe Trends	Discover current color trends in different industries from the creative communities on Behance and Adobe Stock
Color Hunt	A free and open platform for color inspiration with thousands of trendy hand-picked color palettes
Gradient Hunt	A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients
Web Gradients	A free website to find good CSS gradients
ColorBox	A free website to produce color set
CSS gradient	A free website to make custom gradient and some examples of gradient
gradienta	A pure css and jpg gradients
UI Gradients	UI gradients color generator
Palette Generator	Generate new color palette with every spacebar press
Material Palettes	1000+ Material Design palettes
Grabient	Gradient Selector
ShadeSwash	Quickly generate shades of any color
BrandColors	The biggest collection of official brand color codes
BRAND PALETTES	Logo Color Codes and Palettes
Material Design Palette Generator	Generate theme and color palette Material Design-like
Colorate	Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work.
0to255	A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more.
Color Blender	A tool that shows the midpoint colors between two colors
Gradient Buttons	Ready to use copy/paste gradient buttons
Khroma	Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.
whocanuse	A tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
Colorable	Color combination contrast tester
Color Hex Picker	Tool to get hex code along with name of the color.
Saruwakakun	The stunning color scheme for website & App Designs with previews
Paletton	Paletton.com is a designer color tool designed for creating color combinations that work together well.
Colorzilla	A powerful online Photoshop-like CSS gradient editor
Image Color Picker	Image color picker and palette generator
CombineCOLORS	Color mixing tool
Color Lovers	It will show the color schemes which are popular in the outside world.
HTML CSS Color	Free online Color (USA) or Colour (British) tools: information, gradient generator, color wheels etc.
HEX Color Codes	It gets HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names.
CoolHue 2.0	A free tool that shows different gradient examples in CSS and PNG format
Colors.lol	Interesting color palettes generated by a Twitter bot, there are hex codes and descriptive names for each color.
colors.dopely	Super-fast and simple color palette generator, palettes can be saved and shared in seconds.
UIColor Picker	A collection of UI Colors with hex codes available to be copied in just one click.
Color Hex	Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK) and generates a simple css code for the selected color.
FarbVelo	A random color palette generator
Veranda Color	Browse color palettes made by other designers, generate and submit your own
Duo	Duo is a collection of colour combinations that I’ve curated from personal projects or that I’ve come across on the web.
Lospec Palette List	The Lospec Palette List is a database of palettes for pixel art.

Icons

Resources for Icons including png, svg and more

Website	Description
UXWing	Well Optimized, Free icons for commercial use
Shapedfonts Iconclub	8000+ free icons
Feather Icons	Beautiful, customizable open source icons
Tabler Icons	470+ highly customizable open source SVG icons
Xicons	SVG Vue/React components integrated from fluentui-system-icons, ionicons, etc. (Vue3, Vue2, React, SVG).
Iconoir	Free library of 900+ open source icons
Simple Icons	1307 Free SVG icons for popular brands
Linear Icons	1000+ Ultra crisp vector icons
Icons8	Free icons, photos, vectors and tools
Flat Icon	The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats
The Noun Project	Over 2 Million curated icons, created by a global community
Iconscout	Free Download Icons illustrations stock photos at one place
IconSear.ch	Search engine with over 50,000 SVG icons indexed
Nucleo App	Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid)
Icon-icons.com	Free Icons PNG, ICO, ICNS and Vector file SVG
Bootstrap Icons	Free Icons built for Bootstrap but they'll work in any project
Remix Icon	Simply Delightful Icon System
Iconmonstr	Discover 4496+ free icons in 313 collections
Vivid.js	Ready to use Free and Open Source SVG Icons Pack JavaScript Library.
Iconfinder	Free and premium vector icons in SVG, PNG, CSH and AI format
Lordicon	50 free animated interactive icons
UseAnimations	Free Animated Icons in SVG and Json Format(for lottie)
css.gg	700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
IconBros	7843+ free icons grouped in 182 collections
Material Design Icons	An icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project.
Heroicons	Free, open source icons from the creators of Tailwind CSS.
Zondicons	A set of free premium SVG icons for you to use on your digital products.
Endless Icons	A website offering a number of free icons. Icons are tagged and also compressed into kits.
Icomoon	Browse 5500+ Free Icons. Add any set you wish to easily browse and search its icons.
Eva Icons	Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.
Cryptoicons	A set of 430 crypto and fiat currency icons. Completely free.
Ikonate	Fully customizable & accessible vector icons
appicon	Quickly generate app icons in different sizes for your IOS, macOS and Android projects
LineIcons	2000+ Essential Line Icons for Designers and Developers
Evericons	Evericons is a big pack of over 460 free icons designed by Aleksey Popov.
SVG Repo	Download free SVG Vectors for commercial use.
Convertio	Convert PNG files to SVG online & free. (One of the services provided by it.)
CSS ICON	Icon set made with pure css code, no dependencies, "grab and go" icons
Unified icons	Thousands of icons, one unified framework. One library, over 40,000 vector icons.
System UIcons	220+ icons in a growing collection.
IconPark	Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons
Radix Icons	A crisp set of 15×15 icons designed by the Modulz team. All icons available as individual react component,SVG and more.
EOS Icons	A pixel-perfect, open source iconic font available as ligature and SVG.
Ionicons	Beautifully crafted open source icons for use in web, iOS, Android, and desktop apps.
Phosphor Icons	Phosphor is a flexible icon family for interfaces, diagrams, presentations
Teeny Icons	TeenyIcons is a set icons in SVG format easy to use in html
Lucide	Lucide is an open-source icon library, a fork of Feather Icons.
Icones	Icon Explorer with Instant searching, powered by Iconify.
Shitty Icons	Collection of Free icons.
Iconspedia	Iconspedia is a website that contains a large collection of high quality free icons.
iconhub	Just practical stunning icons for everyone

Logos

Resources for Logos

Website	Description
Instant Logo Search	Thousands of free brands logos ( SVG - PNG )
LogoSear.ch	Search engine with over 200,000 SVG logos indexed
SVGPorn	1000+ high-quality SVG logos
Payment System Logos	Logos for payment systems available in png and svg
Browser Logos	High resolution web browser logos
VectorLogoZone	Consistently formatted SVG logos
World Vector Logo	Download vector logos of brands you love
Logo Maker	Create custom logos
Free Logo Maker	Fast, All-in-One Logo Generator

Favicons

Resources for Favicons

Website	Description
Favicon.io	Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats
Favicomatic	Generate favicons of all the sizes and formats as well as the HTML code needed to support every possible browser or device
Favicon Generator	Generate favicon ico files for your website
RealFaviconGenerator	Generate icons for all platforms (Windows, iOS, Android)
FontIcon	Generate favicons and images from Font Awesome icons

Icon Fonts

Resources for Icon Fonts

Website	Description
Font Awesome	The web's most popular icon set and toolkit
Line Awesome	Swap in replacement of Font Awesome with modern line icons
Material Icons	Material design icon library
IonIcons	Beautifully crafted open source icons from Ionic team
Zurb Foundation Icons	Customizable Foundation icons
Fontisto Icons	Fontisto the iconic font and css toolkit · 616+ free icons
Boxicons	Boxicons is a free collection of carefully crafted open source icons
Icofont	2100+ free icons to spice up your creative designs
Material Palette	Free to pick palettes, icons and colors for Material Design]
Material Design Iconic Font	Material design icon font
Vscode Codicons	The icon font from Visual Studio Code
Devicon	Devicon is a set of icons representing programming languages, designing & development tools
PaymentFont	A sleek web font for payment operators and methods. Featuring 116 icons
Weather Icons	Weather Icons is the only icon font with 222 weather themed icons
Stroke 7	202 thin stroke icons inspired by iOS 7
Jam Icons	890+ handcrafted icons to make your web app awesome
Fontello	200+ web icons where you can customize the names or codes of icons.
Linea	Linea: Featuring 750+ Free Icons
Unicons	A set of 1100+ Free line style icons available as web font, SVG icons, and as components for JS frameworks like React, Vue and React Native.
Mobirise Icons	A free, open source set of 150 elegant, pixel-perfect linear icons, available as web icon font and SVG icons.
Hero Icons	Free Open Source Svg Icon Library

Thank you for reading

If you liked this post, subscribe to my newsletter
to never miss out on my blogs, product launches, and tech news, and follow me on Twitter for daily threads on web dev resources.

10 GitHub repos you cannot miss out on

Abhiraj Bhowmick — Wed, 16 Feb 2022 17:05:58 +0000

What is a repository?

Basically a repo is short for repository. A repository is like a container, it stores your files. It is stored with a history of changes you've made. If you don't get what a repo is storing or its purpose, you can read the repo's README.md file.

Here are 10 repositories you need to check out right now!

1. ossu/computer-science

The OSSU curriculum is a complete education in computer science using online materials

2. public-apis/public-apis

A nice and frequently updated collection of public apis. The APIs are even broken down into categories making it much easier to browse through them.

3. swisskyrepo/PayloadsAllTheThings

This repository is a list of useful payloads and bypasses for Web Application security

4. EbookFoundation/free-programming-books

In this repository, you can get various free books related to various programming topics.

5. freeCodeCamp

FreeCodeCamp is a great place to get started with programming. On youtube, their website and even Github.

6. jwsham/coding-interview-university

"Googley-as-heck" created this repository to document his 8-month process of preparing for a Google Interview. And you can spend less time thanks to this repo.

7. danistefanovic/build-your-own-x

This is a great repository that teaches you how to build your own tech like an AR bot, BitTorrent, bot and many more.

8. trekhleb/javascript-algorithms

This repository contains algorithms and data structures implemented in JavaScript with explanations and links to further readings.

9. vasanthk/how-web-works

What happens behind the scenes when we type www.google.com in a browser?

10. kamranahmedse/developer-roadmap

This repo contains roadmaps for popular languages to learn and become a developer in 2022

Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches, and tech news, and follow me on Twitter for daily threads on web dev resources.

15 underrated HTML attributes every web developer should know

Abhiraj Bhowmick — Sun, 13 Feb 2022 14:37:32 +0000

HTML may not be a programming language per se, but there's no doubt in the power it possesses. We often depend on external javascript libraries for some basic tasks, but need for some of them might end today!

Pro tip: Save time by listening to the audio of this article at Genics Blog

In this article we will discuss about 15 HTML attributes you probably did not know, but need to know for sure.

Let's get started!

1. Autocomplete

The autocomplete attributes specifies whether the browser is allowed to aid in filling out the form fields or not. If turned on, it will assist users with autofilling options such as email, phone numbers, nationality, and so on.

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

You can check out all the autocomplete values from the MDN docs.

2. Download

The download attribute on an anchor tag specifies that the file/object should be downloaded to the local storage when a user clicks on the hyperlink.

<a href="document.pdf" download>Download PDF</a>

3. Contenteditable

The contenteditable attribute allows the user to edit the content of an element.

<div contenteditable="true">
  You can now edit this text!
</div>

4. Readonly

The readonly attribute specifies that an input field is read-only and can't be edited.

<input type="text" id="sports" name="sports" value="golf" readonly>

A user can still highlight it, and copy the text. To forbid those actions, use the disabled attribute instead.

5. Accept

The accept attribute states which file types are allowed to be selected in the input.

<input type="file" accept=".jpg, .png">

This attribute can only be used on an <input> tag with type="file". To allow all files of specific media type, use an asterisk beside its name. For example, accept="image/*".

6. Autofocus

The autofocus attribute indicates that the particular element should be focused on page load.

<input type="text" autofocus>

Note: Only one element in the HTML document or a dialog may have the autofocus attribute. If applied to multiple elements only the first one will receive focus.

7. Hidden

The hidden attribute specifies whether or not the element is visible.

<p hidden>I am invincible 💪</p>

8. Spellcheck

The spellcheck attribute defines whether the element is checked for spelling errors.

<p contenteditable="true" spellcheck="true">Cehck mai spellnig</p>

9. Controls

The controls attribute specifies whether or not the audio/video controls should be displayed on the default player.

<audio controls>
  <source src="rick_roll.mp3"  type="audio/mpeg">
</audio>

10. Autoplay

The autoplay attribute ensures that the audio/video will automatically start playing as soon as it is loaded.

<video autoplay
  src="https://cdn.mysite.com/media/myvideo.mp4"
  poster="image.png">
</video>

11. Cite

The cite attribute is used to point out where a an element's content is taken from, or referred to.

<blockquote cite="https://genicsblog.com/">
  <p>An awesome publication for developers.</p>
</blockquote>

12. Datetime

The datetime attribute specifies the date and time when the text was deleted/inserted.

<p>
  My plans for 2023 include joining Google as a SDE,
  <del datetime="2021-01-01T18:21">creating 6 courses,</del> 
  <ins datetime="2021-02-02T14:07">writing 12 articles.</ins>
</p>
<p>I will evaluate the completion on <time datetime="2021-12-31"></time>.</p>

13. Async

The async attribute ensures the script is executed asynchronously with the rest of the page.

<script src="https://icanheckyou.com/heckingScript.js" async></script>

Note: The async attribute has an effect on external scripts only.

14. Defer

The defer attribute ensures the script is executed when the page has finished parsing.

<script src="https://anotherhecker.com/heckingScriptAgainCozWhyNot.js" defer></script>

Note: The defer attribute has an effect on external scripts only.

15. Inputmode

The inputmode attribute hints at the type of data that might be entered by the user while editing the element or its contents. It also helps the mobile browsers to display the keyboard in the appropriate mode.

<input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" />

Thanks for reading!

I hope this article was able to help you learn more about HTML and share some knowledge with you.

If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches, and tech news. Follow me on Twitter for daily threads on web dev resources!

How to collect data via forms like a boss

Abhiraj Bhowmick — Thu, 10 Feb 2022 16:52:33 +0000

Forms are an integral part of our life
They are literally everywhere, be it when you're signing up for a new social media app or you're applying for anything. But do you know what actually goes on behind forms?

The ancient way 🤦‍♂️

Now, earlier forms were used to collect data on an HTML file and save it to a MySQL Database. For this method, you need to have a basic understanding of PHP too.

But as you know, we ain't taking the hard way

A short disclaimer

I know, you might just use Google Forms or Typeform or any other no-code tool for that matter. But this tutorial is for people who'd like to have control over how their form functions and also large scale purposes to be implemented inside your code.

What we're gonna be using ✨

So what we're gonna learn today is how you can collect data easily by just adding an endpoint to your HTML code and getting the data served to you beautifully.

The app we're gonna be using today is Formbold

(not sponsored)

Now let's get started

Step 1️⃣

Make a form. Lol

No, seriously. We need to make a form to collect data

Here's a form I made with Tailwind, we'll be using this to collect our data.


<!-- Tailwind Form -->
<div class="bg-white py-6 sm:py-8 lg:py-12">
  <div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
    <!-- text - start -->
    <div class="mb-10 md:mb-16">
      <h2 class="text-gray-800 text-2xl lg:text-3xl font-bold text-center mb-4 md:mb-6">Get in touch</h2>

      <p class="max-w-screen-md text-gray-500 md:text-lg text-center mx-auto">This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random or otherwise generated.</p>
    </div>
    <!-- text - end -->

    <!-- form - start -->
    <form class="max-w-screen-md grid sm:grid-cols-2 gap-4 mx-auto">
      <div>
        <label for="first-name" class="inline-block text-gray-800 text-sm sm:text-base mb-2">First name*</label>
        <input name="first-name" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
      </div>

      <div>
        <label for="last-name" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Last name*</label>
        <input name="last-name" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
      </div>

      <div class="sm:col-span-2">
        <label for="company" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Company</label>
        <input name="company" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
      </div>

      <div class="sm:col-span-2">
        <label for="email" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Email*</label>
        <input name="email" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
      </div>

      <div class="sm:col-span-2">
        <label for="subject" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Subject*</label>
        <input name="subject" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
      </div>

      <div class="sm:col-span-2">
        <label for="message" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Message*</label>
        <textarea name="message" class="w-full h-64 bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2"></textarea>
      </div>

      <div class="sm:col-span-2 flex justify-between items-center">
        <button class="inline-block bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700 focus-visible:ring ring-indigo-300 text-white text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 px-8 py-3">Send</button>

        <span class="text-gray-500 text-sm">*Required</span>
      </div>

      <p class="text-gray-400 text-xs">By signing up to our newsletter you agree to our <a href="#" class="hover:text-indigo-500 active:text-indigo-600 underline transition duration-100">Privacy Policy</a>.</p>
    </form>
    <!-- form - end -->
  </div>
</div>

You can check out how the form looks here

Step 2️⃣

Now let's add the endpoint.

After you've signed up for Formbold, you need to make a new form.

Now, you need to name your form and choose an email address to receive notifications for every submission. By default, you can only receive notifications on the registered email but you can also add new addresses on the linked emails tab.

After making a new form, go to its integration tab and you have the endpoint.

Now, you need to add two attributes to your form tag in HTML. The two attributes are action and method. Your form tag should now look like this

<form action="endpoint url" method= "POST" class="max-w-screen-md grid sm:grid-cols-2 gap-4 mx-auto">

Step 3️⃣

Our work is mostly done now! Let us test the form.

After you've submitted, the response gets recorded and will not show up on the submissions tab of the form on Formbold

And voila!

Now you know how to collect form data in three super-easy steps.

Thank you for reading

If you liked this post, subscribe to my newsletter
to never miss out on my blogs, product launches, and tech news, and follow me on Twitter for daily threads on web dev resources.

10 SEO tools you need for your projects in 2022

Abhiraj Bhowmick — Fri, 04 Feb 2022 14:49:31 +0000

SEO tools are essential for growing organic traffic, maintaining and improving rankings, and delivering the proper target keywords. There are numerous SEO tools accessible today, both paid and free.

Choosing the best SEO tool for your business or industry can be difficult and time-consuming at times.

We've hand-picked the top 10 SEO tools after extensive study. Also, we have some bonus content for you at the end. Let's get this party started right away!

1. SEOQuake

SEOQuake is a free but a practical SEO analysis tool used by many. It's on the list of one of the best SEO Tools which are completely FREE.

With the help of this tool, you can quickly start tracking and analyzing site audits and compare them with that of your competitors.

Suppose you're working on your content and want accurate suggestions to get a better ranking. SEOQuake would be the best choice for you.

You'll get a complete in-depth report of your competitors so that you can Analyze and see what improvements you need to implement in your website.

2. SEMrush

Most people utilise SEMrush, which is a really popular SEO tool. It is well-known for its ability to perform. SEMrush comes with a plethora of resources that are included in their SEO toolbox.

These resources are extremely useful for analysis and tracking websites on the inside, such as which keywords your competitors are ranking for, what pages they are, and what the monthly volume of particular phrase gets the most hits for them.

When you know this inside out as a blogger or website owner, you can make a lot of adjustments to your website and witness a significant improvement in its performance.

As a result, having these kinds of SEO tools is essential for a higher ranking. SEMrush can assist you in improving the rank of your website.

3. Ahrefs

Ahrefs is a popular SEO tool. It assists you in a variety of ways, including allowing you to make the best content decisions, thoroughly reviewing your website, offering target keywords, and much more.

It can be used as a site explorer, a content explorer, a keyword explorer, and a rank tracker among other things.

The Site Explorer, a primary features of the Ahrefs, displays the performance of web pages along with the highly regarded web pages for specific keywords and subjects.

With its keyword explorer tool, you can rapidly look at the volume of a given keyword, such as how many hits it gets per month or how many searches it gets per month.

It is widely used by digital marketers. It mostly works for backlinks and performs remarkable SEO analysis. Keep in mind that it is a paid tool.

4. Moz Pro

It's an all-in-one SEO optimization tool that includes plethora of useful resources that primarily assist you in obtaining all of the information about your competitors' rankings.

You may optimise your website from its suggestions and make it more valuable for ranking with the help of this tool.

When you start using this tool, you'll be able to get a full report on your competition, which I believe is the greatest approach to figure out what's working and what's not, so you can optimise your website and attain a higher Google ranking.

5. AnswerThePublic

This tool is mostly used for keyword research and analysis. Assume you're seeking for a program that focuses largely on keywords so you can evaluate the websites of your competitors.

You'll get amazing insights into other websites that are doing great, as well as helpful suggestions for your own website, such as what you should do to improve your ranking.

Many users report increased traffic and conversions after employing these solutions!

6. Keyword Hero

Most of the times we write articles without doing proper keyword research. We do not optimize our posts to target specific keywords which we want the article to rank for.

Have you considered which specific keyword your visitors search on Google before clicking on your website? If you know those keywords, I'm sure you'll focus primarily on maintaining rankings for those!

And for both the above reasons, Keyword-Hero is great because it lets us do comprehensive keyword research and it also assists you in a variety of methods!

7. SpyFu

It's a fantastic tool for analysing competitors!

Spyfu is a reliable tool for spying on your competitor's website keywords if you want to track each step, get detailed insights for ranking, and see what your competitors are up to.

8. SeoMater

It's a one-of-a-kind SEO tool that includes SEO auditing and a website crawling tool!

With this tool, you may perform on-page optimization based on the analysis of your competitors.

It's a really professional application that keeps you up to date with reports and essential suggestions that you should review and implement in your websites for higher Google rankings!

9. ContentKing

Here's a tracking tool that meets all of your needs. If you're searching for a bundle tool that has all the capabilities you need, I recommend ContentKing because it offers practically everything you need.

It's a tool that works 24 hours a day, 7 days a week to provide you with complete in-depth details on your competitors' websites.

Because you'll get an accurate audit of your competitors' websites when you use Content King, you could implement the strategies that work for them that'll get you a higher chance of gaining a better rating.

10. Woorank

According to the reports, this is one of the best SEO analysis tools. This tool has a wide range of applications due to the fact that both the free and paid plans perform admirably. I recommend that you start with its free plan and then upgrade if you're happy with it.

You may track and analyse your competitors' websites using Woorank. This tool provides you with comprehensive reports.

You can see which keywords your competitors rank higher for and how you may improve your own rankings. This tool will tell you where you're falling short and what improvements you may make to improve your rankings.

Bonus Tools

Here's another list of 4 other Must-Have Free SEO Tools For Everyone that will help you with SEO analysis and growing in rankings!

Originally published at genicsblog.com

Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my articles, product launches, and tech news. Follow me on Twitter for daily threads on web dev resources.

5 projects you can make to become a better web developer

Abhiraj Bhowmick — Fri, 04 Feb 2022 14:47:41 +0000

The demand for web developers is growing as web development becomes more popular in the market. Web development has evolved as a viable field, attracting students and professionals from a wide range of academic and professional backgrounds.

Working on web development projects is the ideal approach to gain experience in this sector if you're also interested in it. Your skills will improve the more you practise and experiment with web development projects.

1. Simple Clock

It's a simple app that you can develop using HTML, CSS and basic JS for functionality. In this project, you have to build a simple webpage and then update the time.

To make it more attractive, you can add start, stop features. Also, you can add an alarm function, ringtone function for alarms, Etc.

2. Weather/News App

Making a weather/news app will test your skills, and in this project, you can use two APIs:

One to get the user's location.
Another to fetch weather data based on the user's location.

As a beginner, having this project in your resume will help you stand apart from the crowd.

3. To-do list

It's one of the best and simple projects that you can develop using HTML, CSS and JS. This project will help you to store your personal to-do lists and it will be saved in your local storage, which can be accessed anytime.

Moreover, even if you host the app, the data will be stored in the user’s computer's local storage which will maintain privacy.

4. Forms

HTML, CSS, and JavaScript can all be used to make forms. You can create a gorgeous landing page design with a little effort and attention. You can begin with a modest project, such as designing a survey form or a consultation form, depending on the type of business you're starting.

Name, address, e-mail, date of birth, phone number, and other pertinent information can be included in the form. You can send the form to your friends and see what they have to say!

Companies nowadays use survey forms to gather information from their target audiences. In addition, having a landing page project on your resume will be a bonus!

5. Coinflip

This is the most unexpected item on the list but it can prove to be very helpful in the long run. You can learn about using the random method to derive a random result from an array of options.

We all know that getting a random value on is very hard, but certain functions utilise computations to deliver a result that appears random enough.

Conclusion

These were the top 5 web development projects. All of the projects listed are beginner-friendly, and working on them will help you improve your web development abilities and enhance your career.

Origninally posted at genicsblog.com

Thank you for reading

If you liked this post, you can subscribe to my newsletter
to never miss out on my blogs, product launches, and tech news. Follow me on Twitter for daily threads on web dev resources.

5 CSS methodologies you need to know in 2022

Abhiraj Bhowmick — Fri, 04 Feb 2022 14:41:02 +0000

In large, complicated, rapidly-iterated systems, CSS is notoriously difficult to maintain. The lack of a built-in scoping mechanism in CSS is one of the reasons.

In CSS, everything is global. Until CSS gets its native scoping mechanism, we need to devise our own system for locking down styles to specific sections of an HTML document. CSS methodologies are the solution.

In this article, we will take a look at the CSS methodologies you need to know in 2022!

1. Object-oriented CSS

OOCSS concepts help us write components that are flexible, modular and interchangeable.

For example, the style of your button elements might be set via two classes that you have given the class of:

.button — Provides the button’s basic structure.
.grey-btn — Applies colors and other visual properties.

CSS:

.button {
    box-sizing: border-box;
    height: 50px;
    width: 100%;
}

.grey-btn {
    background: #EEE;
    border: 1px solid #DDD;
    box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px;
    color: #555;
}

HTML:

<button class="button grey-btn">
    Click me!
</button>

2. Atomic CSS

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

Example:

Colors are set using hexadecimal values. Alpha transparency is created by appending the opacity value to the hex color.

<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum
</div>

3. BEM

Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

Example:

<form class="loginform loginform--errors">
    <label class="loginform__username loginform__username--error"> 
        Username <input type="text" name="username" />
    </label>
    <label class="loginform__password">
        Password <input type="password" name="password" />
    </label>
    <button class="loginform__btn loginform__btn--inactive">
        Sign in
    </button>
</form>

The .loginform class is a block composed of three elements:

Element	Purpose
loginform__username	Takes in the username
loginform__password	Takes in the password
loginform__btn	Allow the user to submit the web form

4. SMA CSS

SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process.

Example:

Let’s say our layout is called .l-footer. We have a search form module inside it. The search form has already been submitted at least once by the user.

<section class="l-footer">
    <form class="search is-submitted">
        <input type="search" />
        <input type="button" value="Search">
    </form>
</section>

5. Systematic CSS

Systematic CSS shares many of the principles and ideas you can find in OOCSS, BEM, SMACSS, SUIT CSS, and other CSS methodologies. Systematic CSS is meant to be a simpler alternative to existing CSS methodologies.

Example:

Here’s the markup for two widgets that render a navigation bar and search form:

<!-- navigation bar --> 
<div class="NavBar">
   <ul>
      <li><a href="./">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="learn/">Learn</a></li>
      <li><a href="extend/">Extend</a></li>
      <li><a href="share/">Share</a></li>
   </ul>
</div>

<!-- search form --> 
<div class="SearchBox">
   <form action="search.html" method="get">
       <label for="input-search">Search</label>
       <input name="q" type="search" id="input-search" />
       <button type="submit">Search</button>
    </form>
</div>

Content — in the form of widgets and naked HTML elements — is then placed within the layout. Finally, modifier classes are added to vary the default presentation of things.

Conclusion

By providing a class-based approach for dividing up large web designs into many small, modular, distinct components, all CSS techniques address the scalability and maintainability challenge in CSS.

Each UI module can be reused throughout a design and even ported from one project to the next if the CSS methodologies are the same. CSS approaches do a lot more than just solving the CSS scalability issue.

Origninally posted at genicsblog.com

Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my articles, product launches, and tech news!

30 browser extensions every developer should have

Abhiraj Bhowmick — Fri, 04 Feb 2022 14:17:45 +0000

The browser is a developer's most powerful tool. 99% of people don't make 100% out of their browsers.
Here are 30 browser extensions to make the most out of the app you probably spend the most time on.

1. WhatFont

The easiest way to identify fonts on web pages.

2. WhatRuns

Discover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts - you name it.

3. Web Developer

Adds a toolbar button with various web developer tools.

4. Daily.dev

Get programming news with zero effort. Simply open a new tab, and you’re all set. A must-have tool for busy developers!

5. JSONView

Validate and view JSON documents.

6. Window Resizer

Resize the browser window to emulate various screen resolutions.

7. JSONLite

Browser extension for viewing JSON files.

8. Responsive Viewer

Show multiple screens once, Responsive design tester

9. BrowserStack

Instantly test your webpage on any desktop or mobile browser.

10. Awesome Screenshot

Full page screen capture and screen recorder - 2 in 1. Share screencast video instantly

11. Visbug

Open source web design debug tool built with JavaScript

12. Keyframes

In-browser CSS Animation creator.

13. Kontrast

Quickly check and adjust contrast in real-time in your browser to meet WCAG 2.1 requirements

14. PerfectPixel

Adds a semi-transparent image overlay over the top of the developed HTML to easily perform pixel perfect comparison between them, useful for replicating UI designs.

15. Pesticide

Inserts the Pesticide CSS into the current page, outlining each HTML element to better see placement on the page, helpful for building layouts.

16. Site Pallete

A must-have tool for designers and frontend developers to grab colors for any website.

17. Responsive Design Tester

Test responsive web designs or mobile pages that detect specific user agents. Test multiple devices at the same time!

18. ColorZilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

19. Lorem Ipsum Generator

Provides an elegant and quick way to create default text or generate Lorem Ipsum. Optimized for quick usage, but it can be customized.

20. Code Beautifier

Beautify CSS, JavaScript and JSON code when you open a .css/.js/.json file

21. Imageye

Find and download all images on a web page. With Imageeye you can find, browse and download all the images present on a web page.

22. Stylebot

Change the appearance of the web instantly.

23. Colorpick

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

24. React Dev tool

React debugging tools to the Chrome Developer Tools. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

25. Wappalyzer

Wappalyzer is a technology profiler that shows you what websites are built with.

26. Fake Filler

Fake Filler is a form filler that fills all inputs on a page with fake/dummy data.

27. Page Ruler Redux

A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page.

28. Web Editor

The web editor is the tool that provides you with an enhanced way to inspect any website elements, alter their properties, insert contents, design, and visualize the way you want to see them.

29. CSS Viewer

A simple CSS property viewer.

30. Font Ninja

Identify fonts from any website, bookmark, try, and buy them.

Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches, and tech news.

Abhiraj's Dev-letter

Javascript snippets you need to know right now 🔥 - #5

Abhiraj Bhowmick — Wed, 08 Dec 2021 09:29:04 +0000

Hello and how are you doing?
Hope you guys are doing great. As you know, I started a series of 50 beneficial and useful JS snippets where I would give you 10 every week. After the beautiful response on the previous posts of this series with 3k+ views, I thank you all for supporting me along this way.
This started with a tweet of mine, so if you aren't following me on twitter, please do so!

// Detect dark theme var iframe = document.getElementById('tweet-1456165753359527938-65'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1456165753359527938&theme=dark" }

Let's get started

1️⃣ flatten
This snippet flattens an array up to a specified depth using recursion.

const flatten = (arr, depth = 1) =>
  arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), []);

flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]

2️⃣ forEachRight
This snippet executes a function for each element of an array starting from the array’s last element.

const forEachRight = (arr, callback) =>
  arr
    .slice(0)
    .reverse()
    .forEach(callback);

forEachRight([1, 2, 3, 4], val => console.log(val)); // '4', '3', '2', '1'

3️⃣ forOwn
This snippet iterates on each property of an object and iterates a callback for each one respectively.

const forOwn = (obj, fn) => Object.keys(obj).forEach(key => fn(obj[key], key, obj));
forOwn({ foo: 'bar', a: 1 }, v => console.log(v)); // 'bar', 1

4️⃣ Get Time From Date
This snippet can be used to get the time from a Dateobject as a string.

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

getColonTimeFromDate(new Date()); // "08:38:00"

5️⃣ Get Days Between Dates
This snippet can be used to find the difference in days between two dates.

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);

getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2

6️⃣ getStyle
This snippet can be used to get the value of a CSS rule for a particular element.

const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];

getStyle(document.querySelector('p'), 'font-size'); // '16px'

7️⃣ getType
This snippet can be used to get the type of a value.

const getType = v =>
  v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();

getType(new Set([1, 2, 3])); // 'set'

8️⃣ hasClass
This snippet checks whether an element has a particular class.

const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector('p.special'), 'special'); // true

9️⃣ head
This snippet returns the head of a list.

const head = arr => arr[0];

head([1, 2, 3]); // 1

🔟 hide
This snippet can be used to hide all elements specified.

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

Thank you for reading!

Do follow me on Twitter, I'll be creating awesome tech content over there soon.
Subscribe to my newsletter to never miss out on tech news, product launches and my top blogposts.

Subscribe here

'Til next time
Abhiraj