Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Thu, 06 Jun 2024 16:52:46 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 225069128 Frontend to Fullstack Monthly #14 – The state of HTML in 2024 https://frontendmasters.com/blog/frontend-to-fullstack-monthly-14-the-state-of-html-in-2024/ https://frontendmasters.com/blog/frontend-to-fullstack-monthly-14-the-state-of-html-in-2024/#respond Thu, 06 Jun 2024 16:52:45 +0000 https://frontendmasters.com/blog/?p=2585 We’re back with Frontend to Fullstack Monthly #14 – new courses, updates, and all the industry’s latest news!

Frontend Masters Boost (From this Blog)

This month, Boost welcomed new writers sharing essential tools, technology, and modern browser features:

  • Sacha Greif, co-creator of the first-annual HTML survey stopped by to share interesting findings from the results of the survey.
  • CSS just might be the fastest-moving web technology right now. We’ve covered scroll-driven animations a few times, and this month Preethi Sam gets deeper into it showing off making reading progress indicators not for the whole page but for sections of a page. The Popover API is also now available across browsers. You can use it via HTML alone, but it’s likely CSS will help make it fit your design. It’s the perfect thing for tooltips, but unfortunately we don’t have the anchor positioning API to go with it yet. Still, we can use popovers for tooltips with a smidge of extra JavaScript. Lastly, here’s a CSS property I’ll be you’ve never heard of: overflow-clip-margin and it’s got a cool trick up it’s sleeve.
  • When you are building with a framework, it’s often not only that framework that concerns you. There might be a meta framework on top of it. There might be additional needs the framework intentially doesn’t handle for you. For instance, if you’re building with React, you might use Next.js on top of it, and a styling library like Styled Components as those other tools have no particular opinion about styles. Over in Vue land, Ben Hong shared with us the whole Vue ecosystem. That includes routing libraries, state management, meta frameworks, testing libraries, and much more. Ben is a Vue core team member so this is gold!
  • There is a very simple way to “prefetch” a web request: use HTML. The <link rel="prefetch" href="…"> tag will do just that, caching the results. You should be relatively sure a user needs this data, but if you are, it can be a performance improvement. Adam Rackis shares how it can leveraged when a frameworks server-side data fetching can’t be used.

For beginners:

Frontend Masters Courses

We launched four new courses:

We have recorded a ton of courses recently and will be releasing at least four more courses this month!

Industry news & updates

Last month we shared news that the WebKit and Chrome teams were somewhat at odds on how best to implement ‘masonry-style’ layouts in CSS. The conversation has continued at pace, with lots of thoughts on the best way forward, and why certain approaches are favored.

Google I/O took place a couple of weeks back and beyond the banging of the AI drum, there’s now a full YouTube playlist of all the session videos — plenty worth watching here, including Una Kravets taking a look over the latest in web UI.

✨ Key releases you may want on your radar: Astro 4.9Storybook 8.1Angular 18Ionic 8.1Next.js 15 RC.

Tutorials and articles

With anchor positioning built into the browser, you’ll now be able to build layered user interfaces without relying on third-party libraries. The CSS Anchor Positioning API is in Chrome as of version 125.

Jiayi Hu shares a thorough walkthrough of the practicalities of using Chrome DevTools for digging into performance issues.

Chris Coyier notes that container query adoption isn’t particularly high, and shares some reasons as to why that may be the case (beyond it just being new, and any potential browser support concerns).

WordPress just turned 21… but not everyone is celebrating — David Bushell is frustrated with the current ‘code-within-code’ approach to WP development.

Jen warns when testing the responsiveness of our sites, we need to stop just resizing the browser and should instead use device emulation.

Adam Argyle and Kevin Powell ▶ chat about under the radar CSS features in this video, highlighting 23 that you should know, and be using. A good refresher on what’s possible.

Preethi Sam runs through making a timer with CSS.

Useful projects

webstatus.dev is a new dashboard, from Google, highlighting web platform features.

CSS Pattern is a growing collection of nice background patterns from Temani Afif. It’s now 144 strong, and, as you’d expect, all made with just CSS.

This browser-based tool attempts to quickly convert jQuery-based scripts into efficient modern JavaScript.

Fontsource has over 1,500 open-source fonts to browse and integrate into your project via npm packages. Handy.

If you’re looking for design inspiration, Design Spells is a nice resource.

Thanks for reading – see you in the next issue!

]]>
https://frontendmasters.com/blog/frontend-to-fullstack-monthly-14-the-state-of-html-in-2024/feed/ 0 2585
New Course: Modern CSS Layouts with CSS Grid https://frontendmasters.com/blog/new-course-modern-css-layouts-with-css-grid/ https://frontendmasters.com/blog/new-course-modern-css-layouts-with-css-grid/#respond Thu, 30 May 2024 21:12:24 +0000 https://frontendmasters.com/blog/?p=2468 To quote Chris Coyier from his recent post, Modern CSS Features You Need to Know:

"The speed of CSS development doesn't seem to have slowed down. There is plenty to continue to watch for and look forward to." - Chris Coyier

Given CSS’s ever-evolving capabilities, having a robust understanding allows you to build better-looking, higher-performing, and more accessible websites. And Jen Kramer’s new course Ultimate CSS Grid & Layout Techniques will level-up your layout skills and take you beyond the basics with Grid, Flexbox, Subgrid & Container Queries.

Jen Kramer teaching the new Ultimate CSS Grid & Layout Techniques course

Ultimate CSS Grid & Layout Techniques

Go from zero to layout hero! CSS Grid is the most important tool in a modern web developer’s toolkit for laying out web pages. With its two-dimensional structure, precise positioning, and overlapping elements, you’ll learn to achieve complex layouts with minimal code. You’ll also explore advanced techniques like container queries for adaptive components and subgrids for nested layouts. Through hands-on CodePen exercises, you’ll apply these techniques to real-world projects.

Highlights from the course:

  • Learn the fundamentals of CSS Grid and when to use it versus Flexbox.
  • Layout complex design by spanning rows, columns, and areas.
  • Practice mobile and desktop-first approaches to CSS layout.
  • Explore responsive image techniques with the srcset and sizes attributes and art-direct your images with the picture element.
  • Use the latest layout features of CSS including Subgrid and Container Queries.

Enjoy the new Ultimate CSS Grid & Layout Techniques course!

Podcast Episode with Jen Kramer

We also recorded a podcast episode with Marcy and put it up on YouTube: Jen Kramer: CSS evolution, teaching @ Harvard extension, no code | The Frontend Masters Podcast Ep.3

Jen Kramer, an experienced developer who has been educator at the Harvard Extension School and now teaches at Annie Canons

The episode is up on Spotify and Apple Podcasts as well!

]]>
https://frontendmasters.com/blog/new-course-modern-css-layouts-with-css-grid/feed/ 0 2468
Top 20 Frontend & Fullstack Courses (May 2024) https://frontendmasters.com/blog/top-frontend-fullstack-courses-may-2024/ https://frontendmasters.com/blog/top-frontend-fullstack-courses-may-2024/#comments Tue, 21 May 2024 13:39:39 +0000 https://frontendmasters.com/blog/?p=2252 Here is a list of popular courses on Frontend Masters for May 2024.

Deep JavaScript fundamentals, React, and TypeScript continue to be incredibly popular. We’re proud that our community values learning the deep fundamentals—investing in core skills pays off for your entire career. As new tools and techniques evolve, it is much easier to stay up-to-date when your fundamentals are strong.

Next are core topics like Git, algorithms, Node.js, and full stack (setting up your own servers). We’ve also seen a rise in the popularity of courses on Go, so we are planning an extensive Go course this fall! We’ve used Go internally as a team since 2017 and have been happy with it. Lastly, Next.js framework fundamentals are popular, and Tailwind made the list with its utility-first approach to CSS!

CourseCourse Author
Complete Intro to React, v8Brian Holt
JavaScript: From First Steps to ProfessionalAnjana Vakil
JavaScript: The Hard Parts, v2Will Sentance
Everything You’ll Need to Know About GitThePrimeagen
Complete Intro to Web Development, v3Brian Holt
The Last Algorithms Course You’ll NeedThePrimeagen
Build Go Apps That Scale on AWSMelkey
TypeScript 5+ Fundamentals, v4Mike North
Introduction to Next.js 13+, v3Scott Moss
Deep JavaScript Foundations, v3Kyle Simpson
Full Stack for Front-End Engineers, v3Jem Young
Basics of GoMax Firtman
API Design in Node.js, v4Scott Moss
Intermediate React, v5Brian Holt
Introduction to Node.js, v3Scott Moss
Vanilla JS: You Might Not Need a FrameworkMax Firtman
The Hard Parts of Ul DevelopmentWill Sentance
Web App Testing & ToolsMisko Hevery
Tailwind CSSSteve Kinney

Whether you’re newer to the industry and learning these core skills for the first time, or an experienced developer looking to brush up your skills, this list is a great reference for courses you’ll want to take!

]]>
https://frontendmasters.com/blog/top-frontend-fullstack-courses-may-2024/feed/ 5 2252
Frontend to Fullstack Monthly #13 – How should masonry work in CSS? https://frontendmasters.com/blog/frontend-to-fullstack-13/ https://frontendmasters.com/blog/frontend-to-fullstack-13/#respond Mon, 13 May 2024 21:42:44 +0000 https://frontendmasters.com/blog/?p=2156

We’re back with Frontend to Fullstack Monthly – new courses, updates, and all the industry’s latest news!

From Boost this month

Boost has been busy this month bringing you articles on all sorts of web platform features and news. We’ve also shipped a freshened up design, leaning into GitHub’s open source Mona Sans, a variable font that certainly seems up to the task of typography on a tech blog.

The aspect-ratio property in CSS is super useful and has been supported in all browsers for quite a while now, but it doesn’t take much for it to not work as expected. If this is happening to you, here’s what might be going on. We prefer the fundamentals at Frontend Masters; vanilla HTML, CSS, and JavaScript will always serve you well. Here’s an easy grab-and-go search form using just the vanilla tech you need. The Popover API is now available across browsers and personally I’m most excited about using it for tooltips.

We’d also like to welcome some new guest authors, like Adam Rackis who introduces us to the versatile Auth.js library and in this case use it with Svelte. Ben Hong did an exemplary job showing us the landscape of tools around Vue right now. Preethi Sam gets awfully clever with Scroll-Driven Animations making section-based scroll progress indicators.

New Frontend Masters courses

We launched two new courses: Building Go Apps that Scale on AWS and Everything You Need to Know About Git. We have recorded a ton of courses recently and will be releasing at least four more this month.

And we’ve been in the studio cooking up tons of new courses! They are recorded as live workshops, and then edited into courses. Hope you can join us!

Industry news & updates

The first beta of React 19 landed at the end of April with, notably, full support for Custom Elements. It’s targeted at library and tool developers to get prepared for a final v19 release, but you can always upgrade if you want…

The WebKit and Chrome teams are at odds on how best to implement so-called masonry-style layouts in CSS. Chris Coyier gives his take on Boost.

Node.js 22 arrived as the new ‘current’ branch of Node.js and is due to become the active LTS version later this year. It now has a WebSocket client enabled by default, watch mode is considered stable, and you can now run npm scripts more quickly using its --run option. FYI if you want to get up to speed with Node, we have an entire learning path for Node.js.

Ryan Dahl is keen to stress that JSR is not a new package manager or replacement for npm, but part of a fundamental shift in how packages are distributed — tailored for the modern ES modules era.

Google has delayed the end of third-party cookies in Chrome yet again.

Here’s what work is being carried out to keep jQuery up to date across the web. jQuery UI got a small new release too – there’s plenty of life in jQuery yet.

✨ Key releases you may want on your radar: Astro 4.7Svelte 5 RCNext.js 14.2 Electron 30.0, and version 2.0 of text-editor Quill.

Handy tutorials and articles

⭐️ Cody Lindley is back with another updated edition of the Frontend Handbook for us. It’s a free, in-depth, guide to the current web development landscape. It covers everything from code editors, CSS, UX, UI, popular tools and frameworks, performance, accessibility, testing, AI, and much much more. Biased maybe, but well worth a bookmark we reckon.

Did you know you can detect JavaScript support just in CSS? It’s all thanks to the scripting media query.

Here’s a solid step-by-step instructional video (29 minutes) on ▶️ digging into responsiveness issues in Chrome’s Performance Panel.

Daine Mawer explains how we can create fluid typography with the CSS clamp() function.

Alexis Kypridemos shows us how we convert plain text to encoded HTML with vanilla JavaScript.

Useful projects

Extension is a new, easy way to get started with building your own browser extensions. One terminal command and you’re up and running.

Consent Banner JS is a zero-dependency, lightweight (~3KB) cookie banner.

TresJS can be used to create 3D scenes with Vue components and Three.js if you want to put together dynamic, striking visual experiences on the Web.

📊 Unovis is a flexible data visualization framework that’s happy working alongside React, Angular, Svelte, Vue or vanilla TypeScript/JavaScript. There are lots of examples, all with code.

Tagify is an elegant component for inputting tags.

This gallery has over 250 click-to-copy CSS gradients.

Naming things (functions, classes, properties, etc) can be hard, this site sets out to help.

Thanks for reading – see you in the next one!

]]>
https://frontendmasters.com/blog/frontend-to-fullstack-13/feed/ 0 2156
Actually Learn Git (and Podcast Interview with ThePrimeagen) https://frontendmasters.com/blog/actually-learn-git/ https://frontendmasters.com/blog/actually-learn-git/#respond Fri, 10 May 2024 18:36:45 +0000 https://frontendmasters.com/blog/?p=2141 Git is one of the most important tools to any software engineer. It can also be one of the biggest headaches when attempting a complex merge or unwinding a tangled mess of commits. 

But what if you didn’t need to rage-quit and start over with git reset –hard? Well, ThePrimeagen is here to teach you Everything You Need to Know About Git. This isn’t just about pushing, pulling, merging, and rebasing (although, that’s all covered). He’ll also show you how git works under the hood and help you understand commit history and solve complex conflicts. 

Everything You Need to Know About Git

Never run into an unsolvable Git problem again. Create and manage repos, branch for parallel development, and resolve conflicts with merge and rebase. Learn advanced git abilities like interactive rebasing for cleaning up commit history, bisecting to locate problematic commits, worktrees, and the reflog. By understanding Git’s architecture and inner workings, you’ll be able to handle any Git problem with confidence and become an indispensable asset to any large project.

Some highlights from the course:

  • Understand Git’s architecture under the hood and configure Git settings
  • Learn the most important strategies and commands for merging conflicts (merge, rebase, cherry-pick, and squash)
  • Search and bisect commit history to identify issues
  • Add advanced tools to your tool belt like stashing, interactive rebasing, and worktrees
  • Use tags for versioning and contribute to open source projects

We hope you enjoy learning Everything You Need to Know About Git

Podcast Interview with ThePrimeagen

If you haven’t seen it yet, we did a podcast with ThePrimeagen. It’s at over 100k views and tons of people said they enjoyed it in the comments! ThePrimeagen: VIM (btw), Streaming, & Content Creation | The Frontend Masters Podcast Ep.9

Episode 9 of the Frontend Masters Podcast features ThePrimeagen, Netflix engineer and NeoVim enthusiast (by the way). In this episode he discusses the challenges of developer productivity, his experience with various programming roles, and his passion for Vim, and tooling. ThePrimeagen also delves into balancing work with personal life, the intricacies of content creation, and his excitement for future projects, including live reacting to tech conferences. Additionally, ThePrimeagen reflects on his journey, offering a rare glimpse into the life lessons learned along the way.

The episode is up on Spotify and Apple Podcasts as well.

Here are all of ThePrimeagen’s courses on Frontend Masters, btw.

]]>
https://frontendmasters.com/blog/actually-learn-git/feed/ 0 2141
Go on AWS Course (and Podcast Interview with Melkey) https://frontendmasters.com/blog/go-on-aws-course/ https://frontendmasters.com/blog/go-on-aws-course/#respond Mon, 29 Apr 2024 17:40:41 +0000 https://frontendmasters.com/blog/?p=1854 You may have noticed that the FrontendMasters.com website is fast. We use Go on the backend and a small amount of vanilla JavaScript where it’s needed on the front-end. Our CTO chose Go because of its speed and simplicity.

I'm currently trying to optimise the CLS in a big enterprise Angular project and seeing the http://FrontendMasters.com website is just driving me crazy.

IT'S SO DAMN SMOOTH. HOW ARE YOU RESPONSIVE BUT DON'T HAVE ANY CLS.

HOW, YOU DARK MAGICIANS?!?!?  (really, how)
Our website is HTML (Go/Hugo), CSS modules, and vanilla JavaScript. 🙂

What’s not as simple is the AWS infrastructure behind the scenes. Sure, this diagram looks simple enough:

Client server architecture on AWS

However, cloud hosts like AWS, Azure, and Google App Engine are notoriously complex. It turns out, we can avoid the interface and code our application and our infrastructure in Go! Melkey’s new course will help you understand the speed and simplicity of Go, adopt an infrastructure-as-code deployment strategy, and Build Go Apps that Scale on AWS!

Melkey teaching the Building Go Apps that Scale on AWS course

Build Go Apps that Scale on AWS

Build Go applications from scratch and deploy infrastructure-as-code to AWS! Save and retrieve data in DynamoDB and secure your APIs with Amazon’s API Gateway. Gain practical experience and learn the fundamentals of Go while understanding the scalability of AWS as you create an end-to-end login and authentication experience.

Other highlights of the course include:

  • Learn key Go fundamentals, including arrays, slices, structs, receivers, and when to use pointers or references.
  • Scaffold a Go application from the ground up and use AWS CDK to craft an infrastructure as a code deployment strategy.
  • Build a scalable authentication application that leverages serverless Lambda functions, DynamoDB, and an API Gateway.
  • Use a JSON Web Token to authenticate users and protected routes in your application.

We hope you enjoy the new Building Go Apps that Scale on AWS course!

The course is already in our top 10 courses this month and early reviews have been great:

Podcast Interview with Go Twitch Streamer Melkey

We also did a podcast interview with Melkey and put it up on YouTube: From Robotics and ML to Twitch/YouTube: Melkey’s Tech Journey | Frontend Masters Podcast Ep. 14

In this episode, we talk with Melkey, a popular Twitch streamer (and Twitch employee) with a unique background in robotics, machine learning, and a wide range of sports. We talk about the technical challenges of machine learning, wrestling to rugby, his first job fixing go-karts, and eventually getting into software dev and landing at Twitch. Expect tech and career advice mixed with lighthearted banter as Melkey shares his experiences and insights, significantly impacting tech and streaming content.

The episode is up on Spotify and Apple Podcasts as well!

]]>
https://frontendmasters.com/blog/go-on-aws-course/feed/ 0 1854
The Front End Developer/Engineer Handbook 2024 — A Guide to Modern Web Development https://frontendmasters.com/blog/front-end-developer-handbook-2024/ https://frontendmasters.com/blog/front-end-developer-handbook-2024/#comments Tue, 23 Apr 2024 14:00:00 +0000 https://frontendmasters.com/blog/?p=1781 We just released the highly anticipated Frontend Handbook 2024, by Cody Lindley!

The handbook provides an in-depth overview of the skills, tools, and technologies necessary to excel as a front-end developer / engineer. With 38,000 words of practical knowledge and advice, it covers the core technologies—HTML, CSS, and JavaScript—and how they form the foundation of modern front-end development.

As Cody Lindley reflects on the current state of front-end development:

“Once upon a time, front-end development primarily focused on the user and the user interface, with programming/software playing a secondary role. […] We have to find our way back to the user, back to the user interface.”

Get an overview of popular tools, libraries, and frameworks that go beyond the front end, such as:

  • React.js/Next.js
  • Svelte/SveltKit
  • Vue.js/Nuxt
  • SolidJS/SolidStart
  • Angular
  • Astro
  • Qwik
  • Lit

These tools enable you to create full-stack web apps and websites that interact with databases and share templates across server and client.

You can also develop native applications using web technologies with frameworks like:

  • Electron for desktop apps
  • React Native and Capacitor for mobile apps
  • Tauri for mobile and desktop operating systems

Additionally, we touch on Progressive Web Apps (PWAs) and their ability to create installable applications with native-like experiences from a single codebase.

Whether you’re a seasoned front-end developer looking to refresh your understanding of the industry or a beginner eager to embark on a career in this exciting field, the Frontend Handbook 2024 is an essential resource.

To access the Frontend Handbook 2024, read it for free here:

]]>
https://frontendmasters.com/blog/front-end-developer-handbook-2024/feed/ 3 1781
Front End or Full Stack? A Replay of an Interesting Discord Conversation https://frontendmasters.com/blog/front-end-or-full-stack-a-replay-of-an-interesting-discord-conversation/ https://frontendmasters.com/blog/front-end-or-full-stack-a-replay-of-an-interesting-discord-conversation/#comments Mon, 18 Mar 2024 19:55:34 +0000 https://frontendmasters.com/blog/?p=1281 If you’re an active Frontend Masters member, under the Apps section of your account you can join our Discord community to chat with fellow developers. There are often great conversations there. Here’s one about choosing a path to focus on.

Should I go deeper into front end, or expand to learning full stack?

xSOu!3nder

Hey everyone! So, I’ve been working mostly with Angular as a front-end dev, but then I got to mess around with Lit for our company’s design system and totally loved it. It’s got me thinking about diving deeper into front end and design systems.

But, I see a lot of talk about full stack being the way to go for more job options. I’m trying to figure out what’s best for my career. Should I beef up my backend skills and aim for full stack, or just keep focusing on what I really like with front end and design systems?

Would love to hear your thoughts or any advice you’ve got. Thanks a bunch!

Discord Community Responses

Marc

I can’t say what’s right for you, but personally, it’s always led me to go deeper into my interests. Becoming a design systems/component expert is a valuable skill. We are also doubling down on courses in this area this year since we are currently revamping our UX and design system on FrontendMasters.com.

SQL and back-end skills might make you more marketable to the broadest number of jobs. But it’s always served me the best to find an area I love enough to get the deepest into.

xSOu!3nder

Thanks a bunch for the advice!

I’m super into front-end stuff, like diving into how different frontend framework works bits and geeking out over CSS (CSS working group and Kevin Powell are both my idols lol). I’m all about making things accessible and looking good. But in Toronto, it seems like everyone’s looking for full stack devs. The few front-end job postings around are crazy competitive (200+, sometimes 500+ people fighting for 1 position), and they all want a ton of experience. Makes me wonder if I’m barking up the wrong tree wanting to be a front-end wizard.

Marc has a nice surprise

Marc

I just booked a workshop with Kevin Powell November 14th! Finally got him to come teach a workshop with us. 😀

xSOu!3nder

🐣 I’m beyond excited!

$ cd./villard

I wouldn’t wager that you’re alone in that experience. Lots of companies, offering either location-locked and remote roles, have been moving towards leveraging full-stack engineers. One could make an argument that this is because of “post-ZIRP” economics, but in speaking with others at my org, I believe it can also be attributed to applications trending away from big, bespoke front ends.

bagool

It depends on what you like/value. l’ve personally benefitted a lot more so far by being a generalist and going deeper into things only when I needed them rather than focusing on one particular thing. If you’re still at the beginning of your career it’s definitely worth it being nosey and trying as many things as possible imo.

$ cd./villard

That’s not to say there isn’t value in the front-end specialization, but there’s going to be a swing to generalization for many companies until new front-end concerns arise.

Nick Wattonville

I would work towards Full-Stack Dev. My understand is that being a Full-Stack Dev opens more doors, than just being one or the other. I like the frontend of JS and HTML, but far as design I can never get CSS to do what I want it to do lol. For backend PHP is one of my favorite languages other than JS to work with. But at the end of the day its up to you and what you like to do with your career.

Andrew

From my side will add that it’s the best feeling when you do what you like. So if you truly love the front end — go for it. Although, I’m curious what your answer would be about the back end.

Are you interested in tech powering the stuff as much?

For me, it always felt like that front end is for those who like to bring users easy and support, making sure the product is usable. And the backend is for individuals that are “optimizers/architecture runners”

hazelharbour

i’m currently a FE SWE and even at my work where we have had FE/BE split for forever, I’ve started to work a little on our APls. I used to be full stack so it was simple for me to learn a little bit and be able to help. Our BE team is just a lot busier due to some new features we are building. I think there’s value in being able to do some on the “other side” but specializing in what you like! I still heavily prefer the react/data flow portion of the frontend which is why I got hired in the first place. now l’m becoming more of a middle of the stack engineer. I don’t do a lot of CSS and I don’t do much database stuff.

danielvanc

It’s very difficult to be an expert in “true” full stack and I would say, less employable, because of that.

Full stack in the front-end world is being deemed as learning something like NextJS, but that’s simply is not the case. Look into the Full Stack by Jem on Frontend Masters for a good example of the term and what you need to learn.

You would go further being an expert in either the front end or back end.

Andrew

And, my second take: once an expert, always an expert. If you can master a tool, you have reasonable thinking and learning skills. At the end of the day, back end, front end, it won’t matter, you are just a master of everything and problem solver 🙂.

steveox152

Just some context: I have 11 years of experience and I have been leading multiple development teams. Mainly focused on front-end application development, and also the team responsible for the component library/design system. This is something that has come up with the people I have mentored in the past.

I have always told my team members that they need to focus on something that interests them, or else they will get burnt out. I can say that Design Systems and Component Libraries are something that there is a lot of desire for, but often its hard to find people that are interested in it, so it’s an awesome skill to have. I will say that most advice I have gotten from engineering managers at bigger tech companies is that have an area of expertise is really good.

Keep in mind that the best thing for you career is something that will change a lot over the course of a 30 year career, the most important thing is that you are focusing on something that you actually enjoy, or else you will be miserable. Any time I have a developer that is underperforming, the first thing I ask them is if they are unhappy with what they are working on and if they are, then I give them a different task, 9/10 times that solves their issues.

When it comes to going full stack, that is also great knowledge to have, you do not need to pick one way or the other, you can do both.

Focus on what you actually enjoy, but take some time to learn enough about backend/full stack so that you can contribute to conversations about it at work, who knows, 5 years from now you might want to switch and work on something different.

If you ever have questions or need some advice, feel free to DM me. I enjoy passing on my lessons learned to other people.

RedHoodJT

I would say to follow down the path with what makes you the happiest. Will full stack open more doors because of the possibilities that surround it? Yes. But if you aren’t happy then is it really worth it? You can stick with front end and Ul/UX design and, as someone mentioned earlier, learn what you need to backend-wise when the time comes for you to learn it. Maybe go through the basics of back end just so you have an understanding of it.

MacFoodly

Depends on what the person wants to do with their career IHMO. A specialist in a high-end tool is always a sought-after professional.

But one might think a full stack engineer can reach a broader job market. I do find this last point of view a bit misleading since you can tick a lot of boxes, but if you do not tick at least the core ones in terms of depth, your chances will be smaller.

Marc

I love this line:

I have always told my team members that they need to focus on something that interests them, or else they will get burnt out.

PURE GOLD!

steveox152

I see this all too often. Almost every developer I have had that was under performing was either burnt out or just completely uninterested in what they were working on.

]]>
https://frontendmasters.com/blog/front-end-or-full-stack-a-replay-of-an-interesting-discord-conversation/feed/ 1 1281
Make your React web apps more accessible (two new courses) https://frontendmasters.com/blog/make-your-react-web-apps-more-accessible/ https://frontendmasters.com/blog/make-your-react-web-apps-more-accessible/#respond Thu, 14 Mar 2024 15:49:48 +0000 https://frontendmasters.com/blog/?p=1237 Why should you spend the time making your web apps accessible? Not only are there legal and business reasons, but the biggest reason is it’s a civil right – we want *everyone* to be able to access our websites and web apps!

“An inaccessible website can exclude people just as much as steps at an entrance to a physical location.”

~ADA.gov

Yet, according to WebAIM, developers still aren’t doing enough:

According to WebAim Million Report
98.1% Home Pages have At Least One WCAG 2.0 Failure
Causes of Most Common Accessibility Failures
Low Contrast Text
Missing Image Alt Text
Empty Links
Missing Form Input Labels
Empty Buttons
Missing Document Language

And this is just for websites. If you’re building something a React web app, there are additional things to consider, like interactive elements. If you’re looking for a job or a promotion, accessibility knowledge can really set you apart.That’s why we’re excited accessibility expert Marcy Sutton Todd created two new courses: Web App Accessibility (featuring React) for developers and Enterprise Web App Accessibility for technical leaders, to help build a more inclusive web! 

Web App Accessiblity (feat. React)

Solve the most common accessibility issues in React apps using testing tools, semantic HTML, and ARIA attributes to make interactive elements accessible. You’ll get hands-on experience with screen readers, keyboard navigation, focus management, and visual accessibility techniques, including color contrast and motion reduction. Learn to test and build with accessibility in mind, making your web apps more compliant with standards like WCAG and, most importantly, inclusive to the broadest audience possible!

Some highlights from the course:

  • Apply WCAG and ARIA standards in React for better accessibility.
  • Use screen readers and alternative text to support accessibility.
  • Improve navigation with semantic HTML and ARIA attributes.
  • Identify and resolve accessibility issues using Axe and Lighthouse.
  • Implement keyboard navigation and visual adjustments for inclusivity.

Web App Accessibility course → https://frontendmasters.com/courses/react-accessibility/


Enterprise Web App Accessibility (Feat. React)

Learn to bake accessibility into your development process and culture. Understand UI accessibility, ARIA, focus management, and how to test for accessible web apps. Through hands-on exercises, you’ll tackle optimizing components for screen readers and keyboards, utilizing semantic HTML, and understanding JavaScript’s impact on accessibility. Foster an accessibility-focused culture within your development teams, equipping you with the knowledge to build inclusive web applications!

Here’s some highlights of what you’ll learn from the course:

  • Automate accessibility testing and build a culture of accessibility in your organization.
  • Fix common accessibility issues with best practices.
  • Craft accessible UIs that leverage visibility classes, accessible naming, and ARIA.
  • Test accessibility using tools like axe and screen readers.
  • Navigate JavaScript’s impact on web app accessibility.

Enterprise Accessibility Course → https://frontendmasters.com/courses/enterprise-accessibility/

Podcast Episode with Marcy Sutton Todd

We also recorded a podcast episode with Marcy and put it up on YouTube: Marcy Sutton Todd – A Dive into Web Accessibility | Frontend Masters Podcast Ep.13

Marc Grabanski CEO of Frontend Masters interviewing Marcy Sutton Todd Accessibility expert.

The episode is up on Spotify and Apple Podcasts as well!

]]>
https://frontendmasters.com/blog/make-your-react-web-apps-more-accessible/feed/ 0 1237
It’s a Win-Win: You & Your Team Learn and Your Company Benefits. Now Let’s Convince Your Boss. https://frontendmasters.com/blog/convince-your-boss/ https://frontendmasters.com/blog/convince-your-boss/#comments Tue, 12 Mar 2024 12:45:40 +0000 https://frontendmasters.com/blog/?p=1093 A Frontend Masters personal account is $390/year. It’s an investment. It can be an investment in yourself if you’re looking for work, but if you’re already working, it can be an investment from that company that is good for everyone. A smart company with teams of developers should take advantage of buying a team account, getting everyone at every skill level access, at $245/seat/year.

We all can and do learn on the job, but all that learning is going to be within a certain circle of choices that have already been made. Choices about technologies, approaches, procedures, etc. There is a lot more to learn out there, much of which can be directly relevant to the work you are doing. After all, we’re all building websites. Rather than run around searching for what to learn, the smart move is to sign up for Frontend Masters. That way the content comes pre-vetted and high-quality, and is ready for you and your team to dig into whenever works for you.

Learning as much as you can, so you can help make smart, informed decisions and craft good code, is incredibly valuable. Perhaps you’re convinced already. Let’s convince your boss.

From: you@company.com
To: boss@company.com

Subject: Getting a Frontend Masters Team Account

Hey Boss,

I think we should get a Team Account on Frontend Masters. 
https://frontendmasters.com/join/

There is a ton of stuff to know about building websites, and while we learn a lot on the job around here, we've all got our gaps. Not to mention this stuff changes rapidly. 

Rather than scavenge around for the best learning materials around, Frontend Masters already has really good teachers and a tightly curated collection of courses. We could all take different ones and report back to the team. 

They've even got nice native apps where you can download the courses to watch, which I'm thinking I would do on that flight to the team meetup next week. 

Should we do it? 

- Timmy Twoshoes

Why Frontend Masters and not [Some Other Company]?

Hey, we’re not one to talk smack.

Let’s just say that Frontend Masters vets content seriously, so there is no need to wade through junk and worry that you didn’t pick the right course. The courses are also continuously updated, so you need not worry about outdated information.

Plus, there is content available at all the different skill levels, so one Team Account can be useful for a team that has different skill levels on it.

Who else uses Frontend Masters?

Ah, a bit of social proof you’re after eh? That’s fair. These companies aren’t just customers but are are the companies where our teachers actually work:

Microsoft, Netflix, Stripe, and Spotify

They are doing pretty well. Just saying.

Is it only front-end content?

We are known for front-end engineering excellence, but our training goes far beyond. We have courses that teach full-stack topics like Node.js, API Design, SQL, Docker, and DevOps. Backend languages like Python, Go, and Rust, as well as UX design, management, and technical leadership courses. 

So don’t let the name fool you. We will continue to expand our areas of focus to encompass all of software development (both front end and back end), design, UX, technical management and technical leadership. Remember your membership has access to all newly released content as well, which is happening all the time.

Can I watch something?

Like Kyle says: Frontend Masters helps give you the confidence to take the next steps in your career.

Let’s do this thing really quick, bullet point style.

  • The teachers on Frontend Masters are the best in the business.
  • You don’t have to worry about outdated or poor quality courses on Frontend Masters.
  • If you build websites, the wide curriculum on Frontend Masters has things for you.
  • Each course has practical hands-on exercises to make sure you learn in a relatable way.
  • There are native apps, which has offline downloaded courses and bookmarking, helping you learn on the go.
  • All your progress is tracked within the site.
  • There is a supportive Discord community you’ll have access to.
  • There are live workshops you can attend with Q&A sessions.
  • The site-wide search will help you find very specific answers in no time, even within videos.
  • All the courses are in glorious beautiful 4k video.

Need more help?

Hit us up over email anytime and we’d be glad to help: support@frontendmasters.com

]]>
https://frontendmasters.com/blog/convince-your-boss/feed/ 2 1093