WebDev Frontiers
WebDev Frontiers
  • Видео 22
  • Просмотров 18 309
Discover 6 HTML Tags You’ve Never Used Before
🎉 Welcome to my latest video, "Discover 5 HTML Tags You’ve Never Used Before"! 🚀 If you're a web developer looking to elevate your coding game, this video is for you.
In this video, I dive into the following tags:
1. `bdo` - Control text direction effortlessly!
2. `data` - Embed machine-readable data in your content!
3. `title` attribute - Enhance user experience with informative tooltips!
4. `wbr` - Manage long words for better text flow!
5. `details` and `summary` - Create interactive content with expandable sections!
6. `ruby` - Annotate text with ruby annotations for pronunciation guides or explanations!
👨‍💻 Tune in to learn how these powerful HTML elements can transform your web development...
Просмотров: 797

Видео

Is Your Website Accessible? Find Out Now via Chrome DevTools!
Просмотров 9528 дней назад
📢 Is Your Website Accessible? Find Out Now via Chrome DevTools! 📢 Welcome to my latest video where we dive into the world of web accessibility! 🌐✨ Whether you're a junior developer just starting out or a seasoned pro, making sure your website is accessible to everyone is crucial. In this video, I'll show you how to use Chrome DevTools to assess and improve your site's accessibility. 🛠️🚀 🔍 What ...
How to Summarise Documents Instantly with AI (Langchain, OpenAI)
Просмотров 60Месяц назад
Unlock the power of AI to streamline your workflow! 🚀 In this tutorial, I'll show you how to instantly summarise documents using OpenAI's cutting-edge technology. Whether you're a student, a professional, or just curious about AI, this video is for you! 🔍 What You'll Learn: How to set up the OpenAI SDK. 🛠️ Step-by-step guide to integrating AI for document summarisation via Langchain. 📝 Tips and...
Smart Chat: Amplify OpenAI's GPT Capabilities with Custom Functions
Просмотров 56Месяц назад
Unleash the true power of AI with this video! 🔥 Discover how to amplify OpenAI's groundbreaking GPT language model by integrating custom functions, taking your conversational AI to unprecedented levels of intelligence and capability. 👨‍💻 In this tutorial, you'll learn a step-by-step approach to enhance GPT's knowledge base, enabling it to tackle complex queries, provide insightful responses, a...
React 19 - A Preview of Optimistic UI Updates and Form Actions
Просмотров 85Месяц назад
🚨 Get ready to revolutionise your React game with this early look at two amazing features coming in React 19! 🔥 In this video, we'll dive deep into the highly anticipated Form Actions and useOptimistic hook, which promise to take your app development to new heights. 🚀 Form Actions will streamline form handling like never before, making it a breeze to create complex forms with minimal effort. 💪 ...
The Ultimate Guide to JavaScript's Best Array Methods in 2024
Просмотров 80Месяц назад
Buckle up, coders! 🚀 In this ultimate guide, we'll dive deep into the world of JavaScript's best array methods for 2024. 🔥 Say goodbye to the boring old ways of immutable sorting and embrace the power of these amazing tricks that will enhance your coding game. 💯 From sorting to grouping, we'll cover it all! 🧑‍💻 You'll learn how to harness the true potential of arrays, making your code more effi...
Are You Cloning Objects the Right Way in JavaScript?
Просмотров 972 месяца назад
Are you cloning objects the right way in JavaScript? 🤔 It's a crucial skill that every web developer needs to master! 💻 In this video, we'll explore the different methods to copy objects, from the classic spread operator to the more advanced techniques. 🚀 We'll dive deep into the world of object cloning, discussing the pros and cons of each approach. 💯 You'll learn how to avoid common pitfalls ...
Mastering Generics in TypeScript: The Ultimate Beginner's Guide
Просмотров 892 месяца назад
🔥 Struggling with TypeScript Generics? Fear not, my friends! 🙌 This "Mastering Generics in TypeScript: The Ultimate Beginner's Guide" 🚀 is your one-stop solution to conquer the world of generics like a boss! 💪 Whether you're a junior or a seasoned developer, this video will take you on a mind-blowing journey through the depths of TypeScript generics, making them crystal clear and easy to unders...
My Obsessively Strict TypeScript Rules for Clean Code (No `any` Allowed!)
Просмотров 1602 месяца назад
As a senior web developer, I've learned the hard way that using the 'any' type in TypeScript is a slippery slope that can lead to a world of pain and bugs 🐞. That's why I've adopted an obsessively strict set of rules for my TypeScript setup that completely avoids the 'any' type. 🚫 In this video, I'll share my personal TypeScript configuration and walk you through the specific rules I follow to ...
Node.js Evolution: Are You Keeping Up?
Просмотров 752 месяца назад
In this video, I delve deep into the latest and most impactful features released in Node.js. As a web developer or IT professional, it's crucial to stay updated with the ever-evolving landscape of Node.js, and that's exactly what we'll help you do! 🔍 What's Inside 1. env-file: A deep dive into how this feature simplifies your environment variable management. 2. watch: Discover the efficiency of...
Instant Web Development Mastery with Chrome DevTools
Просмотров 7652 месяца назад
🚀 Welcome to "Instant Web Development Mastery with Chrome DevTools" - your guide to unveiling some of Chrome browser's hidden and powerful development tools! 🌐✨ In this video, I delve deep into the most innovative features Chrome DevTools offers to web developers. Whether you're a seasoned pro or just starting out, this video is packed with insights and tips that will elevate your web developme...
Angular 17's Effect Function: Transform Your Coding Today!
Просмотров 4863 месяца назад
In this video, we dive into Angular 17's effect function. The video contains information on: 1. How signals in Angular 17 notify consumers of changes and how effects are essential operations that react to value changes in Signals. 2. The process of creating an effect using the `effect()` function, illustrated with practical examples and code snippets. Angular Signals Video: ruclips.net/video/oE...
Unlock the Power of Angular 17 Signals: A Must-Watch for Developers!
Просмотров 1313 месяца назад
Welcome to this introduction on Angular 17's innovative feature: Signals! In this video, I explore the cutting-edge capabilities of Angular 17's signal handling and how it can revolutionise your web development process. Whether you're a seasoned Angular developer or new to the framework, this video is packed with insights and practical tips. The video covers: - An overview of Angular 17's Signa...
Are You Using Chrome's Network Panel? Discover Its Amazing Powers!
Просмотров 1243 месяца назад
🚀 Welcome to an eye-opening journey into the world of Chrome's Network Panel! 🌐 In this video, I'm diving deep into the features of the network panel in Chrome DevTools. Whether you're a junior dev eager to learn or a senior pro looking to brush up your skills, this is for YOU! 🤔 Ever wondered how to leverage the full potential of Chrome DevTools for faster, more efficient web development? Look...
Step-by-Step: Mastering Data Fetching in React for Better Apps in 2024
Просмотров 1933 месяца назад
🚀 Welcome to the guide on mastering data fetching in React! In this video, I dive deep into the world of React, sharing my expertise to help both junior and senior web developers enhance their skills. 🌐 🔍 We'll explore the nuances of data fetching, focusing on how to optimise your React applications for efficiency. From basic concepts to advanced techniques, I cover everything you need to know....
Lazy Load Like a Pro: Angular 17's @defer Guide!
Просмотров 2294 месяца назад
Lazy Load Like a Pro: Angular 17's @defer Guide!
Simple Yet Powerful: 5 HTML Elements to Use!
Просмотров 12 тыс.4 месяца назад
Simple Yet Powerful: 5 HTML Elements to Use!
5 Essential DevTools Console Hacks for Every Web Developer!
Просмотров 3714 месяца назад
5 Essential DevTools Console Hacks for Every Web Developer!
Avoid These UX/UI Mistakes: Insights from a Watch Website Review!
Просмотров 854 месяца назад
Avoid These UX/UI Mistakes: Insights from a Watch Website Review!
Revolutionise Your Code: Top 5 HTML Elements You've Missed!
Просмотров 2,1 тыс.5 месяцев назад
Revolutionise Your Code: Top 5 HTML Elements You've Missed!
How Websites Are Winning (and Losing) Customers! (Reviewing watchmaker websites)
Просмотров 895 месяцев назад
How Websites Are Winning (and Losing) Customers! (Reviewing watchmaker websites)
Are You Ignoring These 8 DevTools Features?
Просмотров 4795 месяцев назад
Are You Ignoring These 8 DevTools Features?

Комментарии

  • @DWebOscar
    @DWebOscar 21 час назад

    Meter is a better choice than progress for a game health bar

  • @alihamdane
    @alihamdane День назад

    great work, but when i use details, the arraw was closet to the summary not like you, where is my problem, please can you help me

  • @PhilLesh69
    @PhilLesh69 15 дней назад

    I've used the details tag for "further reading" features and even wrote an article titled "convert the given HTML block from a <p> tag into a <details> tag in PHP" that provides sample code to convert a pattern of html code with urls in it into a collapsible details block.

    • @WebDevFrontiers
      @WebDevFrontiers 15 дней назад

      Awesome! Thank you for sharing! 🙏🏽

  • @MarkoKozlica
    @MarkoKozlica 16 дней назад

    Thank you for a great video, as always :D I have a suggestion for a video concerning the various attributes in the <head> section that define misc things for a webpage like icons, SEO items, etc.

    • @WebDevFrontiers
      @WebDevFrontiers 15 дней назад

      Great suggestion! Thank you and also thank you for watching this one!

  • @abhilashveettil6206
    @abhilashveettil6206 19 дней назад

    Very useful video 👏👏👏

  • @igorr4682
    @igorr4682 19 дней назад

    Very informative and as always much appreciated

  • @aminehello-ne2dh
    @aminehello-ne2dh 27 дней назад

    Hello my friend thanks from Morocco

  • @alphabetdot6613
    @alphabetdot6613 27 дней назад

    Very informative

  • @m12652
    @m12652 Месяц назад

    I'm on the latest chrome and both monitor and getEventListenners don't work, possibly as I'm using Svelte and in dev mode...

  • @m12652
    @m12652 Месяц назад

    Which version of chrome is this? I'm not seeing the drop shadow editor 😢

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      It would be one of the very latest versions.

    • @m12652
      @m12652 Месяц назад

      @@WebDevFrontiers is it canary? I'm on a mac, fully up to date on standard chrome. Went through all the settings and 'run commands' and can't see anything to switch it on...

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      It should be accessible under the styles pane. I checked and it’s been around for a while too. You don’t need to do anything to have it enabled I think. At least I don’t remember doing anything in particular

    • @m12652
      @m12652 Месяц назад

      @@WebDevFrontiers wierd... I just dragged canary of of my recycle bin and it's not there either... digging round the settings now

    • @m12652
      @m12652 Месяц назад

      @@WebDevFrontiers figured it out... must be a bug/omission as the shadow tool doesn't show if you set the shadow to a var(--some-shadow)... set it to plain css and it works 👍 great videos by the way, how about some sveltekit/svelte ones please

  • @m12652
    @m12652 Месяц назад

    Thanks very much 👍

  • @_ademmeral
    @_ademmeral Месяц назад

    i can now display markdown files comfortably thanks to the "object" tag :)) thanks

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      Markdown files are not understood by browsers natively so you’d have to format it to something they do understand and are able to render.

    • @_ademmeral
      @_ademmeral Месяц назад

      @@WebDevFrontiers I tried and I did that 👍🏿 text/markdown did work 🙃

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      @@_ademmeral oh, that's interesting. I would have not expected that to work - I probably should try it too then!

    • @_ademmeral
      @_ademmeral Месяц назад

      thanks :))@@WebDevFrontiers

  • @bobman1983
    @bobman1983 Месяц назад

    Marquee didn’t make it to the list

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      As it’s deprecated maybe I should record a video about elements from the classic days of the web 😅

  • @Pareshbpatel
    @Pareshbpatel Месяц назад

    Thanks for bringing to our attention some powerful HTML Elements that I have not used. {2024-05-12} - Subscribed!

  • @chrisicotec7652
    @chrisicotec7652 Месяц назад

    very useful... i find not a lot of devs make proper use of their built in browser tools,

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      I think part of the reason why they don’t use them is because these tools can look scary at first. There are just so many things these tools can do… I’m glad you found the video to be useful 🙏🏽

  • @damirrekic4271
    @damirrekic4271 Месяц назад

    Köszi

  • @avertry9529
    @avertry9529 Месяц назад

    just press the light/dark button in the elements tab of devtools, saves searching each time

  • @rankarat
    @rankarat Месяц назад

    Thanks, very useful, subscription earned.

  • @ariannargesi7249
    @ariannargesi7249 Месяц назад

    Thank you for this video. keep it up

  • @stefanspittank
    @stefanspittank Месяц назад

    Thanks for the reminder about the object tag. I had completely forgotten about that.

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      You are so welcome! Thank you for tuning in! Pray 🙏🏽

  • @rajkumar-nq2te
    @rajkumar-nq2te Месяц назад

    Beautiful

  • @TweaksPH
    @TweaksPH Месяц назад

    hi, your tutorials are helpful. Can you make a full stack blog website for free? maybe a firebase backend server. Is that possible?.

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      That’s a big ask :) can you be more specific? What exact stack? Etc etc

    • @TweaksPH
      @TweaksPH Месяц назад

      @WebDevFrontiers if that would be possible using only Html, Css & JavaScript. I'm sorry, I just don't really understand much the word Stack, maybe it is called a stack because of React, etc.

    • @TweaksPH
      @TweaksPH Месяц назад

      @WebDevFrontiers react.js (vite) for front-end, and a firebase for backend. is that correct. a stack?

    • @TweaksPH
      @TweaksPH Месяц назад

      @WebDevFrontiers maybe this would be a great content on your channel too.

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      I think doing this with a more modern framework would be better - for example with Astro. Is there a particular reason why you’d want to use vanilla JS and/or React and firebase?

  • @Sreevedvp
    @Sreevedvp Месяц назад

    How will it affect the performance of the application? And currently I am using a computed variable which I am writing huge logic so is it better to change it into effects?

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      Unfortunately I can’t answer that as I have not run any performance analysis as of yet.

  • @nikodemkijas5980
    @nikodemkijas5980 Месяц назад

    super film Panie Tomaszu

  • @igorr4682
    @igorr4682 2 месяца назад

    The correct term is "spread operator," not "spread syntax." but Gr8 video

    • @WebDevFrontiers
      @WebDevFrontiers 2 месяца назад

      You’re right - I blame the nerves when recording 🙏🏽

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      Thank you as well 🙏🏽

  • @goodshiro10
    @goodshiro10 2 месяца назад

    I was toiling the shit out of myself because I couldn't understand the point of generics, and I was lucky I found out your channel! Thank you so much for this video :) Have a great day ❤

    • @WebDevFrontiers
      @WebDevFrontiers 2 месяца назад

      I’m glad you found the video useful 🙏🏽☺️

  • @goodshiro10
    @goodshiro10 2 месяца назад

    You are a great hero, you should be protected at all costs! Thanks for this video❤❤❤❤

    • @WebDevFrontiers
      @WebDevFrontiers 2 месяца назад

      Haha. Your comment made me chuckle. Thank you 🙏🏽

  • @user-kd4dv5ib3i
    @user-kd4dv5ib3i 2 месяца назад

    Thank you for the an video.😀😀😀

  • @Senpai.Pramin
    @Senpai.Pramin 2 месяца назад

    HI! Can i use --env-file in the production too?

    • @WebDevFrontiers
      @WebDevFrontiers 2 месяца назад

      Given that it is still experimental (as per the warning message displayed) I would not yet use it in production. Once it becomes stable (there should be an announcement from Node) then you can go ahead and use it safely.

  • @Tony.Nguyen137
    @Tony.Nguyen137 2 месяца назад

    Can I use figure as a container for an image without using the figcapture

    • @WebDevFrontiers
      @WebDevFrontiers 2 месяца назад

      Yes. The figcaption element is entirely optional.

  • @user-fz3lz3di2d
    @user-fz3lz3di2d 2 месяца назад

    Thanks! Waiting for video about performance

    • @WebDevFrontiers
      @WebDevFrontiers 2 месяца назад

      I’m on it … coming soon I hope 🤞🏽

  • @Senpai.Pramin
    @Senpai.Pramin 3 месяца назад

    🤩🤩

  • @NedumEze
    @NedumEze 3 месяца назад

    Marvelous! What is this? One never knows it all! Stunning stuff. Thanks a million, Buddy.

    • @WebDevFrontiers
      @WebDevFrontiers 3 месяца назад

      Glad you enjoyed it! There are some other videos on my channel about unknown HMTL elements :)

  • @mattiaiannone6928
    @mattiaiannone6928 3 месяца назад

    hi , is possible use this way for manage download of big photo and take advantages of seo ranking?

    • @WebDevFrontiers
      @WebDevFrontiers 3 месяца назад

      Can you clarify what do you mean by downloading a big photo? Are you referring to optimising your page for having a better LCP score?

    • @mattiaiannone6928
      @mattiaiannone6928 3 месяца назад

      Yes, exactly. But now i found the directive ngOptimizeImage. That is exactly for lcp. 😊

    • @WebDevFrontiers
      @WebDevFrontiers 2 месяца назад

      I need to test this again but afaik this directive doesn’t actually resize the image and it also doesn’t offer a nextgen image format (ie it doesn’t allow you to serve a webp or AVIF) which also helps with getting a better LCP score.

  • @dzsuvi
    @dzsuvi 3 месяца назад

    Hasznos infó! Köszi Tamás 🙃

  • @TheMisiekMisiek
    @TheMisiekMisiek 4 месяца назад

    Doskonałe. Ma Pan mojego lajka i subskrypcję. Bardzo dobry bogaty angielski.

  • @Akephalos204
    @Akephalos204 4 месяца назад

    that was gold thanks!

  • @quvomiddinkamalov3292
    @quvomiddinkamalov3292 4 месяца назад

    Thank you sir, I am learning the web dev, but some RUclips channels say that chatGPT is taking your job in the near future. Please, sir can you answer, what I have to do ? Continue learning or moving to another field of IT😢

    • @WebDevFrontiers
      @WebDevFrontiers 4 месяца назад

      That's a great question. Let me preface my answer by saying that I am not equipped to offer career advice or predict job market trends with certainty. The future of technology and job markets can be influenced by numerous factors, and it's always good to stay informed and adaptable. (For a personalised career advice, it might be best to consult with a career counsellor). In my own personal experience I find ChatGPT to be an amazing assistant that helps me in my everyday coding by 1) debugging my code and giving good advise on what and where to fix, 2) generate boilerplates and pseudocode which I can then take to the next level. I believe that the IT field still has a lot to offer and once you can leverage the power of ChatGPT to your advantage with a solid base skillset that you have, more doors will open up for you. Simply put I find ChatGPT to allow me to be even more productive.I hope this helps!

  • @quvomiddinkamalov3292
    @quvomiddinkamalov3292 4 месяца назад

    Thank you sir, I`ve learned new tricks on HTML, appreciate you❤ You got a subscriber with a like

    • @WebDevFrontiers
      @WebDevFrontiers 4 месяца назад

      Thank you and welcome ☺️

    • @WebDevFrontiers
      @WebDevFrontiers 4 месяца назад

      Actually there’s more to learn: Revolutionise Your Code: Top 5 HTML Elements You've Missed! ruclips.net/video/WVw1eh6QR5M/видео.html ☺️

    • @quvomiddinkamalov3292
      @quvomiddinkamalov3292 4 месяца назад

      @@WebDevFrontiers Thank you very much❤❤❤❤❤❤

    • @WebDevFrontiers
      @WebDevFrontiers Месяц назад

      Anytime!

  • @firstname4297
    @firstname4297 4 месяца назад

    Very useful. Thank you!

  • @87subhamoy.r
    @87subhamoy.r 4 месяца назад

    You have enlighten so many new thing very calmly and patiently . Love form core of my heart.

  • @monirzaaman
    @monirzaaman 4 месяца назад

    nice

  • @Thevery_dumb
    @Thevery_dumb 4 месяца назад

    Awesome vid👌

  • @user-fz3lz3di2d
    @user-fz3lz3di2d 4 месяца назад

    Could you do a video about web performance snippets and why they can be better than the lighthouse in the developer tools?

    • @WebDevFrontiers
      @WebDevFrontiers 4 месяца назад

      Sure. Webperf videos are on my plate too 🙏🏽I’ll get to them soon 🔜

  • @user-fz3lz3di2d
    @user-fz3lz3di2d 4 месяца назад

    Intresting video. Thanks!

  • @user-fz3lz3di2d
    @user-fz3lz3di2d 5 месяцев назад

    Thanks for the video! It would be nice to have links for the code

    • @WebDevFrontiers
      @WebDevFrontiers 4 месяца назад

      Thanks for watching - I have updated the video's description with a link to GitHub.

  • @user-fz3lz3di2d
    @user-fz3lz3di2d 5 месяцев назад

    Amazing video! I like the feature 8 and the code for the coverage

  • @michaeldubs519
    @michaeldubs519 5 месяцев назад

    Great, professional and funny website review!!

  • @Senpai.Pramin
    @Senpai.Pramin 5 месяцев назад

    learned some new things today. Awesome content, SIr.💙💙