- 22
- 21 283
WebDev Frontiers
Singapore
เข้าร่วมเมื่อ 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 process. Don’t miss out on these hidden gems that can take your websites to the next level!
Whether you're a beginner just starting your web development journey or an experienced pro looking to expand your toolkit, this video has something for everyone. Enhance your HTML skills and take your web projects to the next level with these five simple yet powerful HTML elements.
👍 Don't forget to like, share, and subscribe for more exciting web development tutorials and tips! If you have any questions or suggestions, please leave them in the comments section below. I love hearing from the community.
Thanks for watching, and let's dive into the world of HTML together! 💻🌐🚀
#HTML #WebDevelopment #Coding #HTML5 #WebDesign #Tutorial #HTML #WebDevelopment #CodingTips #HTMLTags #DeveloperLife #WebDesign #LearnToCode #CodingCommunity #TechTips #UnderutilisedHTML #WebPerformance #JuniorDevelopers #SeniorDevelopers #WebDevTips
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 process. Don’t miss out on these hidden gems that can take your websites to the next level!
Whether you're a beginner just starting your web development journey or an experienced pro looking to expand your toolkit, this video has something for everyone. Enhance your HTML skills and take your web projects to the next level with these five simple yet powerful HTML elements.
👍 Don't forget to like, share, and subscribe for more exciting web development tutorials and tips! If you have any questions or suggestions, please leave them in the comments section below. I love hearing from the community.
Thanks for watching, and let's dive into the world of HTML together! 💻🌐🚀
#HTML #WebDevelopment #Coding #HTML5 #WebDesign #Tutorial #HTML #WebDevelopment #CodingTips #HTMLTags #DeveloperLife #WebDesign #LearnToCode #CodingCommunity #TechTips #UnderutilisedHTML #WebPerformance #JuniorDevelopers #SeniorDevelopers #WebDevTips
มุมมอง: 1 129
วีดีโอ
Is Your Website Accessible? Find Out Now via Chrome DevTools!
มุมมอง 1194 หลายเดือนก่อน
📢 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)
มุมมอง 694 หลายเดือนก่อน
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
มุมมอง 744 หลายเดือนก่อน
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
มุมมอง 1044 หลายเดือนก่อน
🚨 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
มุมมอง 1125 หลายเดือนก่อน
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?
มุมมอง 1065 หลายเดือนก่อน
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
มุมมอง 1065 หลายเดือนก่อน
🔥 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!)
มุมมอง 1825 หลายเดือนก่อน
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?
มุมมอง 866 หลายเดือนก่อน
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
มุมมอง 8166 หลายเดือนก่อน
🚀 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!
มุมมอง 7766 หลายเดือนก่อน
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: th-cam.com/video/oE9...
Unlock the Power of Angular 17 Signals: A Must-Watch for Developers!
มุมมอง 1466 หลายเดือนก่อน
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!
มุมมอง 1456 หลายเดือนก่อน
🚀 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
มุมมอง 2177 หลายเดือนก่อน
🚀 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!
มุมมอง 2997 หลายเดือนก่อน
Lazy Load Like a Pro: Angular 17's @defer Guide!
Simple Yet Powerful: 5 HTML Elements to Use!
มุมมอง 13K7 หลายเดือนก่อน
Simple Yet Powerful: 5 HTML Elements to Use!
5 Essential DevTools Console Hacks for Every Web Developer!
มุมมอง 4647 หลายเดือนก่อน
5 Essential DevTools Console Hacks for Every Web Developer!
Avoid These UX/UI Mistakes: Insights from a Watch Website Review!
มุมมอง 958 หลายเดือนก่อน
Avoid These UX/UI Mistakes: Insights from a Watch Website Review!
Revolutionise Your Code: Top 5 HTML Elements You've Missed!
มุมมอง 2.5K8 หลายเดือนก่อน
Revolutionise Your Code: Top 5 HTML Elements You've Missed!
How Websites Are Winning (and Losing) Customers! (Reviewing watchmaker websites)
มุมมอง 918 หลายเดือนก่อน
How Websites Are Winning (and Losing) Customers! (Reviewing watchmaker websites)
Are You Ignoring These 8 DevTools Features?
มุมมอง 5028 หลายเดือนก่อน
Are You Ignoring These 8 DevTools Features?
What is difference between @if and @defer?? Which one we should use?
I am facing issues when I use effect into component.. Most important part is when I call any http method then i need response in component and for that I need to use effect to get the response. And based on response I need to perform further things. Like I want to navigate somewhere or I want to operate some logic. So i just want to understand that how you will handle this type of situation??
Subscribed! Clear Explaination. Thanks, Tamas! Stumbled here through your book on Astro.js. Gonna read it and review it too!
Great 🎉
Thank you!
Nice! I am very glad to discover your channel!
Glad you enjoy it!
Thank you for the knowledge..the output tag you used is also included 😀
I'm glad that you found this useful!
Szuper videó, ma is tanultam valami újat! Köszi
En koszonom!
Very good content and a well made video!
Much appreciated!
Meter is a better choice than progress for a game health bar
True, thanks for sharing!
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
Thank you. It should be enabled by CSS, like so: jsbin.com/sudiyek/edit?html,css,output
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 🙃
@@memduhcevik 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 TH-cam 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! th-cam.com/video/WVw1eh6QR5M/w-d-xo.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