DEV Community: Front-End Web Daily 📰

Thursday Thoughts | Getting Your First Dev Job, What You Should Do as a Junior Developer, and Helping Developers Be Leaders

Front-End Web Daily 📰 — Thu, 28 Jan 2021 15:18:24 +0000

Getting Your First Dev Job

When starting off as a web developer it can be difficult to juggle learning and job searching. Therefore, it is important to know what potential employers are looking for to ensure you are prioritizing the right tasks and opportunities. A recent post on freeCodeCamp gives a handful of tips from a hiring manager's perspective of what they look for when reviewing developer résumés. One of the key factors is regular commits on Github, which shows that you are just as passionate about coding as you claim to be.

What You Should Do as a Junior Developer

Starting your career as a junior developer is very exciting, but it can also be overwhelming. A post on Hello Dev World from last week outlines some things you can do to improve as a junior developer. This includes asking questions, finding a mentor, and learning to debug. Remember, these first few years are all about learning and growing as a developer, so don't stress!

Helping Developers Be Leaders

As a manager of a development team, it is important to help developers that aspire to be a leader to do so. Fostering an environment that allows career growth for these developers can be done with a bit of effort on your end. Monday's post on The Next Web gives some helpful insights on how to help developers be leaders. By providing opportunities, openly communicating, and more you can help boost your developers to the next level.

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

Wednesday Wisdom | Fullstack Development Trends, Responsive CSS Frameworks, and State of Design in 2021

Front-End Web Daily 📰 — Wed, 27 Jan 2021 16:24:42 +0000

Fullstack Development Trends

Fullstack development has moved from rarity to commonplace over the past few years. In 2021 it is easier than ever to be a fullstack developer simply because of all of the tools available. A recent post on noupe.com highlights the top 7 fullstack development trends to follow In 2021. It provides a stellar prediction of what to expect as the industry progresses this year and might even give you some ideas on new skills to learn.

Responsive CSS Frameworks

Love 'em or hate 'em, CSS frameworks have become an integral part of web design and development. There are many out there, each with its own cult following, so Super Dev Resources has published a list of the 15 best responsive CSS frameworks for web design in 2021. Unsurprisingly, Bootstrap and Tailwind topped the list, but check out some of the others if you are looking for an alternative or have never used a framework before.

State of Design in 2021

The design field is always changing and evolving so it's important to assess what happened last year to predict changes this year. Luckily, Abstract has done all of the hard work for us with their State of Design in 2021. Besides the beautiful design and interface of the website, there are several key points that are thoroughly elaborated on with charts, data, and research. A couple of the top ones are the necessity for better ways to measure impact and the pain points of design collaboration.

How to Setup Your M1 MacBook for Web Development

Front-End Web Daily 📰 — Tue, 26 Jan 2021 11:06:02 +0000

The worst part (or perhaps the most fun for some) of getting a new laptop is setting up everything you need as a web developer. Adding programs and tools that you had installed over the many years of ownership of your previous laptop can seem daunting. With the release of the new Macbook M1 laptops, there are some interesting new considerations as well that you may not be aware of. So, let's jump in and get the basics set up so you can hit the ground running developing your next project.

Rosetta 2

The first thing you should install is Rosetta 2, which allows you to run Intel-based software on the new ARM chip. Because Apple has created their own chips they needed a way to provide backward compatibility with programs that do not yet support ARM and Rosetta 2 is that solution.

/usr/sbin/softwareupdate --install-rosetta --agree-to-license

Homebrew

Homebrew will be the best way to add the other software and tools on our computer, so we want to install that next. A quick tip that is good to know is when you go to open the built-in Terminal in the Applications folder: right-click, select Get Info, and check the Open with Rosetta box.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Tools

There are a lot of tools to consider when setting up your Macbook from scratch, so one of the quickest ways to add a lot of the important ones is to use a script. I recommend the script created by the author of the original post that this is based on, but feel free to use a different one or modify this one for yourself.

Opening the downloaded script folder in your terminal you can choose to run the install script or modify what will be installed from the brew-installs.sh file. Once you're satisfied, run the script.

Some of the tools and applications included in the script are:

MongoDB
node
git
zsh
Firefox
Chrome
VSCode
Zoom
Slack
Discord
Notion
and more...

./brew-installs.sh

Note: if it doesn't work try running chmod +x brew-installs.sh first

nvm

Something that is not included in the script is nvm because there have been difficulties installing this with the ARM chip. To get around this you will have to use a curl command and make a couple of modifications afterward.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

In your .zshrc file (.bash-profile or .bashrc for bash):

export NVM_DIR="$HOME/.nvm"
#This loads nvm
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
#This loads nvm bash_completion
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

Git and GitHub

Git was installed with the brew install script so make sure to configure the settings and use a personal access token to authenticate GitHub.

git config --global user.name < USERNAME > &&
git config --global user.email < EMAIL > &&
git config --global --list

VSCode

Make sure to use the Settings Sync plugin to keep all of your VSCode settings in sync with a stored GitHub gist.

Conclusion

You should now be all set to start developing! Thanks to the script many tools and applications were installed for us, minimizing the manual install process.

Credit

Today’s Tuesday Tips was adapted from a post on the Logrocket blog.

Monday Medley | Success as a Creative in 2021, Chrome 88, and Performant Animations and Micro-Interactions

Front-End Web Daily 📰 — Tue, 26 Jan 2021 11:02:31 +0000

Success as a Creative in 2021

Last year changed the game for most designers as we had to find new ways to be collaborative, adaptive, and productive in a different environment. Hopefully, 2021 brings better predictability, but regardless it is important to stay up to date with trends and learn new skills. The latest post on Dribbble's blog outlines how to get ahead as a digital creative in 2021. With tips like learn to work with new tools and work on your management skills, it is a great overall guide to get your professional career started off right this year.

Chrome 88

As of last Tuesday, version 88 of the Chrome browser has begun to roll out to the stable release. This version brings some great new features for developers such as manifest v3 for Chrome extensions and the aspect-ratio CSS property for any element. There are tons of new features, bug fixes, deprecations, and more to read about, so check out the release post on the Chrome Developer blog.

Performant Animations and Micro-Interactions

There's no doubt about it, animations give your website that next-level, polished look. But there is a fine line between tasteful animations that enhance the experience and animation for animation's sake. Luckily, Logrocket is here to help with a recent post from their blog that explains how to design highly performant animations and micro-interactions. This highly detailed guide breaks down the importance of performance on website speed and accessibility through actionable examples, like trying to stick to the composition properties transform and opacity.