Code with Shripal

Quick Way To Level UpYour Frontend Skills & Stay Ahead

An Organized And Growing Collection Of Practical, Concise And Well-Illustrated Frontend Tips That Will Surely Help You Level Up Your Frontend Skills.

250+Well-illustrated, Practical And Concise Tips For Quick Learning.

Zaid Loni

The practical frontend tips and tricks are a daily lifesaver, making my work easier and more efficient. I highly recommend it to every frontend developer—it's an indispensable resource that delivers real results.

- By Zaid Loni

  • Chrome Dev Tools Tip: Locally resolve CORS errors. Tip Description: We can locally override response headers in Chrome Dev Tools. This can help us continue with our frontend development until the appropriate CORS headers are sent from the API server. To do that: - Go to Network panel => Select the request throwing CROS error => Go to Headers Tab. - In the Response Headers section click on edit icon. - Give necessary permissions prompted by Chrome browser to store the overrides in file system. - Add a custom header "Access-Control-Allow-Origin: *". - Rerun the request. Now, you will not get the CORS error for that request!!
  • Web Performance Tip: Use WebM video instead of mp4. Tip Description: Video in Webm format provides better compression and quality for streaming video on the web than mp4, which results in faster loading and better performance. Webm video format is very well supported in all modern browsers. We can fallback to mp4 video for unsupported browsers/devices using this code snippet. HTML Code: <video> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> </video>
  • Web Accessibility Tip: Create accessible icon-only links. Tip Description: We sometimes need to create links with content as an icon. For example: Post Share Links But, such links are not accessible to screen reader users 😔 To solve that issue, we can define the label into a hidden element and link that with <a> element using aria-labelledby and id attributes. Also, set aria-hidden="true" on the SVG icon to skip that from screen readers. HTML Code: <a href="https://x.com/share?url=https://www.codewithshripal.com" aria-labelledby="x-label"> <svg width="24" height="24" aria-hidden="true"> <path d="M4 4l11.733 16h4.267l-11.733 -16z" /> <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /> </svg> <span id="x-label" hidden>Share to X</span> </a>
  • SEO Tip: Add breadcrumb navigation for better UX and SEO. Tip Description: Adding breadcrumb navigation: - Helps users understand where they are on the website, find related content and reduce bounce rate. - Helps search engines understand the overall structure of the website and create a better context for the web page. - Helps in improving the crawling of the website by creating internal links across pages and categories. Bonus Tip: Google also usually shows parts of a URL as breadcrumbs in SERP but we can make it better by providing Breadcrumb structured data.
  • HTML Tip: input type="number" vs inputmode="numeric". Tip Description: For critical numeric fields like Credit Card No, Postal code etc. don't use input type=number Why? - It shows an unwanted number spinner - User can accidentally change number on mouse scroll or up/down keys. Solution: Use inputmode="numeric" with pattern attribute. inputmode="numeric" shows a numeric virtual keyboard on mobile devices for better UX. pattern="[0-9]*" adds number validation. HTML Code: <label> Postal Code: <input type="number"> </label> <label> Postal Code: <input inputmode="numeric" pattern="[0-9]*"> </label>

150+Integrated Code Playgrounds

Learn by doing!
Tweak code, see instant results, and grasp each tip effortlessly.
Ready-to-use snippets
to save your time
Save your code edits
to reuse them quickly in future projects.

Curated ReferencesFor Deeper Learning

Save 100+ hours
Get handpicked resources that deepen your understanding of each tip, so you don’t have to search for them.
Smart links
take you straight to the relevant sections, saving you valuable time.
Hand-picked Related Tips
to broaden your perspective and discover additional improvements

Add Your NotesFor Quick Reference

Stay Organized
Keep all your notes for the tip at one place for quick access anytime.

Learn TogetherAsk & Share

Ask questions
Get answers and clear up any doubts.
Get notified
Receive an email when someone replies, so you never miss a response.
Share insights
Exchange ideas and best practices with fellow developers.

Shripal Soni

About me

Hi, I'm Shripal Soni, a freelance web developer with over 14 years of experience. My passion lies in creating web applications that not only function well but also deliver an exceptional user experience. I believe that attention to the smallest details often makes a significant impact on the user experience.

My journey in web development has been largely self-taught, exploring countless websites, blogs, videos, and documentation. I understand how overwhelming and time-consuming this process can be. That's why I decided to create each tip in a concise, well-illustrated format, allowing users to quickly grasp key information through a single image or short video and explore it further using carefully curated resources and code playground for efficient, hands-on learning

Many of the tips on this platform come from my own experience as a web developer, and others are from my ongoing learning of the latest frontend updates. As frontend development keeps growing, I'll keep learning—and sharing new tips.

14+
years of experience
Hector Triana

The frontend tips from Shripal are awesome, excellent format and motivating, the lab coding environment is a very interesting tool to keep practising and I really enjoy his deliveries and linkedin posts, I highly recommend his items for frontend, thanks for being a good influence for coding world, keep rocking!

- By Hector Triana

Choose Your PlanOne-time Payment, Lifetime Access.

Basic

Access to Existing Tips Only

$49
Get Access Now
  • Access to existing 253 tips
  • Access to integrated code playgrounds
  • Get new tips directly in your inbox
  • Access to curated references and hand-picked related tips (Saves your 100+ hours)
  • Save your code edits in code playgrounds
  • Add your notes and stay organized
  • Ask questions and learn

Pro

Access to Existing + All Future Tips!

$89
Get Access Now
  • Access to existing 253 tips
  • Access to integrated code playgrounds
  • Get new tips directly in your inbox
  • Access to curated references and hand-picked related tips (Saves your 100+ hours)
  • Save your code edits in code playgrounds
  • Add your notes and stay organized
  • Ask questions and learn

Quick Way To Level UpYour Frontend Skills & Stay Ahead

An Organized And Growing Collection Of Practical, Concise And Well-Illustrated Frontend Tips That Will Surely Help You Level Up Your Frontend Skills.