![WebDev Frontiers](/img/default-banner.jpg)
- Видео 22
- Просмотров 18 309
WebDev Frontiers
Сингапур
Добавлен 26 дек 2023
Explore the Latest in Web Development with Tamas Piros.
🚀 Dive into the evolving world of web development! Whether you're a beginner or a seasoned developer, you'll find valuable content on cutting-edge techniques & core principles.
👨🏻💻Who Is Tamas?
Tamas is a Google Developer Expert in Web Technologies with extensive experience as a Developer Evangelist. He passionately fosters a deep understanding of cutting-edge web advancements.
🌐 What This Channel Offers:
* Up-to-date tutorials on the newest technologies.
* Practical tips and expert insights.
* A focus on effective learning to avoid common pitfalls.
🔍 Why Join?
* Stay ahead in the fast-paced world of web development.
* Learn to navigate the complexities of the industry.
* Sharpen your skills for professional success.
🔔 Subscribe for content that empowers and educates, guiding you to success in your web development journey!
🚀 Dive into the evolving world of web development! Whether you're a beginner or a seasoned developer, you'll find valuable content on cutting-edge techniques & core principles.
👨🏻💻Who Is Tamas?
Tamas is a Google Developer Expert in Web Technologies with extensive experience as a Developer Evangelist. He passionately fosters a deep understanding of cutting-edge web advancements.
🌐 What This Channel Offers:
* Up-to-date tutorials on the newest technologies.
* Practical tips and expert insights.
* A focus on effective learning to avoid common pitfalls.
🔍 Why Join?
* Stay ahead in the fast-paced world of web development.
* Learn to navigate the complexities of the industry.
* Sharpen your skills for professional success.
🔔 Subscribe for content that empowers and educates, guiding you to success in your web development journey!
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...
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?
Meter is a better choice than progress for a game health bar
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
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.
Awesome! Thank you for sharing! 🙏🏽
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.
Great suggestion! Thank you and also thank you for watching this one!
Very useful video 👏👏👏
Thanks a lot
Very informative and as always much appreciated
Glad you enjoyed it
Hello my friend thanks from Morocco
Thanks for watching! ☺️
Very informative
Glad you think so!
I'm on the latest chrome and both monitor and getEventListenners don't work, possibly as I'm using Svelte and in dev mode...
Which version of chrome is this? I'm not seeing the drop shadow editor 😢
It would be one of the very latest versions.
@@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...
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
@@WebDevFrontiers wierd... I just dragged canary of of my recycle bin and it's not there either... digging round the settings now
@@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
Thanks very much 👍
Glad you liked it! :)
i can now display markdown files comfortably thanks to the "object" tag :)) thanks
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.
@@WebDevFrontiers I tried and I did that 👍🏿 text/markdown did work 🙃
@@_ademmeral oh, that's interesting. I would have not expected that to work - I probably should try it too then!
thanks :))@@WebDevFrontiers
Marquee didn’t make it to the list
As it’s deprecated maybe I should record a video about elements from the classic days of the web 😅
Thanks for bringing to our attention some powerful HTML Elements that I have not used. {2024-05-12} - Subscribed!
Thank you for watching 😌
very useful... i find not a lot of devs make proper use of their built in browser tools,
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 🙏🏽
Köszi
Én is 🙏🏽
just press the light/dark button in the elements tab of devtools, saves searching each time
Thanks, very useful, subscription earned.
Thanks for the sub!
Thank you for this video. keep it up
You bet 👍🏽
Thanks for the reminder about the object tag. I had completely forgotten about that.
You are so welcome! Thank you for tuning in! Pray 🙏🏽
Beautiful
Thank you 🙏🏽
hi, your tutorials are helpful. Can you make a full stack blog website for free? maybe a firebase backend server. Is that possible?.
That’s a big ask :) can you be more specific? What exact stack? Etc etc
@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.
@WebDevFrontiers react.js (vite) for front-end, and a firebase for backend. is that correct. a stack?
@WebDevFrontiers maybe this would be a great content on your channel too.
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?
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?
Unfortunately I can’t answer that as I have not run any performance analysis as of yet.
super film Panie Tomaszu
Thank you!
The correct term is "spread operator," not "spread syntax." but Gr8 video
You’re right - I blame the nerves when recording 🙏🏽
Thank you as well 🙏🏽
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 ❤
I’m glad you found the video useful 🙏🏽☺️
You are a great hero, you should be protected at all costs! Thanks for this video❤❤❤❤
Haha. Your comment made me chuckle. Thank you 🙏🏽
Thank you for the an video.😀😀😀
Thank you for watching 👀
HI! Can i use --env-file in the production too?
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.
Can I use figure as a container for an image without using the figcapture
Yes. The figcaption element is entirely optional.
Thanks! Waiting for video about performance
I’m on it … coming soon I hope 🤞🏽
🤩🤩
Marvelous! What is this? One never knows it all! Stunning stuff. Thanks a million, Buddy.
Glad you enjoyed it! There are some other videos on my channel about unknown HMTL elements :)
hi , is possible use this way for manage download of big photo and take advantages of seo ranking?
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?
Yes, exactly. But now i found the directive ngOptimizeImage. That is exactly for lcp. 😊
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.
Hasznos infó! Köszi Tamás 🙃
Doskonałe. Ma Pan mojego lajka i subskrypcję. Bardzo dobry bogaty angielski.
dziękuję bardzo!
that was gold thanks!
Glad it helped!
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😢
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!
Thank you sir, I`ve learned new tricks on HTML, appreciate you❤ You got a subscriber with a like
Thank you and welcome ☺️
Actually there’s more to learn: Revolutionise Your Code: Top 5 HTML Elements You've Missed! ruclips.net/video/WVw1eh6QR5M/видео.html ☺️
@@WebDevFrontiers Thank you very much❤❤❤❤❤❤
Anytime!
Very useful. Thank you!
Glad to hear that!
You have enlighten so many new thing very calmly and patiently . Love form core of my heart.
Thank you so much 🙂
nice
Thanks
Awesome vid👌
Thanks 😁
Could you do a video about web performance snippets and why they can be better than the lighthouse in the developer tools?
Sure. Webperf videos are on my plate too 🙏🏽I’ll get to them soon 🔜
Intresting video. Thanks!
Glad you liked it!
Thanks for the video! It would be nice to have links for the code
Thanks for watching - I have updated the video's description with a link to GitHub.
Amazing video! I like the feature 8 and the code for the coverage
Thanks for watching!
Great, professional and funny website review!!
Glad you enjoyed it!
learned some new things today. Awesome content, SIr.💙💙