We're going to take a peek into my web development toolbox and discover the top
tools for 2021. Lock it in. Cause here we go.
Hi!
I'm Mark Lassoff and welcome to the channel.
I help people become professional web and mobile developers and digital
designers. If you're interested in improving your development and design skills,
I'd invite you to subscribe to the channel for new videos. Each week today,
we're taking a look at my picks for the top tools used by web developers.
I'm going to be making a pick in a number of different categories.
Let's get started so you can build your professional development toolkit first
and perhaps the most important tool. Your text editor,
no developer gets far without a text editor and everyone has their favorite.
As a developer, you'll spend all day every day in this tool.
So you want to make sure you choose one that works for you for my money.
The best text editor is visual studio code developed by Microsoft
since so many texts, editors have similar functionality.
It's difficult to stand out in this category.
Vs code does manage to climb to the top of the pack for a number of reasons.
First vs code has excellent code completion.
Microsoft calls their code completion, technology IntelliSense,
not only does it offer standard code completion,
but it also offers syntax highlighting and context-based completion based on
elements like variable type imported libraries and variable scope.
Visual studio is based on an extension based architecture.
There are dozens of extensions for everything from C coding to Kotlin to
HTML and JavaScript, activating an extension.
As simple as pressing the install button in the visual studio code interface,
the extension will install automatically and all the documentation you need to
use. The extension is available within visual studio code itself.
With other editors extensions often slow down editing visual studio code runs
extensions on a separate processor thread,
meaning that the editor's native functions aren't effected extensions are
available in the visual studio code marketplace and new extensions are being
added all the time.
One of my favorite features of the visual studio code environment is the
integrated debugger.
Being able to debug your code without leaving the visual studio code interface
is definitely a time-saver.
You also don't have to add debugging statements to your code as you can track
and trace variables through the execution of your application.
The final vs code feature on lynching is integrated. Again,
if you're a heavy user like me,
you'll find the integrated features to be very convenient.
I use get hub and I can make code commits and deploy my code to get
hub right from the visual studio code environment.
If multiple developers are working on the same code base,
this will help you prevent frustrating code conflicts and ensure everyone is
working on the most current version of the code.
If you've been coding for any length of time,
you know that you often spend more time testing and debugging than actually
writing code for testing and debugging.
You need a testing tools like Chrome dev tools.
Chrome dev tools have been around so long that many of us take them for granted.
But this suite of tools is the go-to testing environment for just about all
professional web developers,
Chrome dev tools include a range of tools that allow you to test the responsive
design of your page to tools that trace complex network interactions,
the console tab within dev tools,
displays errors and warnings generated by your code.
It also allows you to trace variables and execute statements against the current
state of the Dom, which is the document object model.
The document object model maintained state in a web application.
The sources tab provides traditional debugging and trace features that allow you
to step through your code one line at a time in order to debug your code in
depth tools,
set a break point where your code will stop executing the cuddle stop at this
point. And you can use the sources tab or the console to see the value of your
variables, browser, Dom elements, and even view the call stack.
The network tab shows you all the server calls. Your code is generated.
This is important to trace performance,
delays and problems with API APIs that your code uses the performance and memory
tabs will help you figure out what may be causing other slowdowns or memory
leaks in your application.
I use the application tab in Chrome dev tools quite a bit.
This tab can be used to visualize and storage that your application usings.
It can show you any values stored in the session,
storage and local storage objects,
as well as allow you to access the index DB and web sequel databases that are
available in your browser. Any cookie stored will be visible here as well.
If you're not familiar with Chrome dev tools,
this is what I'd suggest to add to your toolbox today.
Almost any web development job you apply to will expect you to be able to
understand and use the Chrome dev tools for years,
websites were mostly designed in Photoshop while it got the job done.
Photoshop was overkill for designing webpages.
Now lighter more agile tools are used for prototyping websites.
The best of these tools is Figma.
The free version of Figma has all the features that most developers need,
and it allow you to prototype, not just websites,
but many other types of digital products as well.
InDesign capitals like New York, Austin and San Francisco,
fig must become so popular that meetup groups have formed around the tool.
Figma is a collaboration first tool.
This means it's designed for you to collaborate with other designers and
developers on your team and the Figma community. As a whole,
the Figma community has dozens of plugins to enhance the Figma prototyping tool.
There are plugins that assist with site usability and others that will inject
random user avatars into your prototype designs.
You will also find Figma users sharing everything from iOS 15 material designs
to classic emojis.
Figma is easy to use so you can begin creating prototypes in just minutes.
The web based interface is clear and tools are intuitive.
Figma allows you to easily export parts of your design,
as well as translate your designs to HTML and CSS. From the inspect tab.
I can view all of the relevant properties of any element that I select in the
design.
I can also view the CSS iOS swift code or Android XML code
necessary to create the design.
This can be a great time saver as the coding is done for you.
Based on the design you've created in Figma thinking was great for creating both
rough wireframes and complete animated prototypes thing was a flexible tool.
And you'll find the more you use it,
the more you'll find reasons to make it your primary tool for prototyping and
digital design. The next tool is so popular and important.
Most hiring managers and recruiters will assume you have it.
The tool is good hub, the social code repository.
Let's take a second to make sure we're clear about the difference between get
and get up.
Get hub is a free open source version control system that is very popular in the
software development industry. Get up is the social version of GitHub,
allowing you to publicly share your, get repositories with other developers.
You're free to use code others post on getting up and can contribute to the
community projects.
I've heard that many interviewers ask if you've contributed to any projects
during job interviews, personally,
I have somewhere around a hundred separate GitHub repositories for different
projects. I've worked on over the years.
You'd have doesn't just store your version code,
but also stores pull requests provides project boards and significant analytics
about your code base.
I always recommend to new developers that they start their GitHub repository.
Now your GitHub is a record of your personal development. As a program,
as you become more skilled,
your contributions will become more significant and recruiters and hiring
managers can use this as a measure of your growth.
Modern development is most often a team sport with so many developers working
from home collaboration tools have become a critical part of the workflow.
There are a number of collaboration tools that are popular with developers.
One of the most popular in my personal favorite is Trello.
Trello allows you to create boards consisting of configurable cards.
These cards can represent individual project components, steps in a process,
or just about anything else. You can imagine.
Trello excels and helping developers collaborate on linear processes.
Cards can be moved from one Trello stack to another.
And even from one Trello board to another representing the steps or stages in
your development process, Trello boards can be viewed as project timelines,
calendars,
or even individual to do lists while maintaining integrity of the underlying
data. The key to Trello success is to design your Trello cards.
So they contain all the information you might ever need,
and then create displays that show what is needed by the individual user roles
Trello's Butler feature will help you automate tasks within Trello eliminating
some of the tedious work that goes along with most collaboration systems.
If you're working on front end development,
you should be testing your code with a server running,
not just using file and open to test code in the browser,
whether you're on a Mac or a PC,
there is a version of simple HTTP server available to you.
Written in Python,
simple HTTP server will allow your code to be served to the browser as it
would be in a production environment.
Using a server will ensure that all the browser features work as they would.
When your site is released,
you run the simple HTTP server directly from your command line.
You can specify a port for your server and then test your site by addressing
local host and the port number.
Most Macs come with simple HTTP server installed for most windows
machines. You'll have to go through a short installation process.
If you're new to coding,
I do recommend that you start using this tool as it will make testing your code
easier and more realistic. There are of course,
times that you need complete server side testing as well.
Obviously the testing environment is going to depend on which language you're
using on the backend. If you're using PHP,
which while not sexy is still the most popular backend language deploy today,
I recommend Zam X,
a M P P zap includes the Apache web server,
the PHP programming language and the Maria DB relational database
system, which is sort of the same people who made my sequel. When you run zap,
you can control your server language and database plugins,
right from your desktop.
What I like about zap is it's pretty much plug and play.
Once you download an installs app, you could run the server and start coding.
You don't need to do a lot of configuration to make the server run on your
desktop. However, if you choose,
you can configure any aspect of the Apache server or the PHP programming
language,
a front end framework handle some of the heavy lifting of front end CSS
development.
A good framework will make screen layout and responsive design easier for you as
a developer bootstrap.
Now in its fifth major version is my pick for front end framework.
Bootstrap handles digital page layout using a grid system,
which is implementing Flexbox under the hood.
The notation is easy to learn and you can get up and running with bootstrap
pretty quickly.
When it comes to responsive design bootstrap will allow you to specify design
elements around six breakpoints ranging from extra small to extra,
extra large screens,
which are greater than 1400 pixels wide bootstrap also has a number of automatic
column layout features.
We can take much of the TDM out of responsive design work.
Bootstrap has its own typography and image display engines,
which allow you to create clean responsive designs without any design talent or
knowledge bootstrap comes with over 20 components,
allowing you to easily create on-screen elements like accordions, carousels,
and tabs.
You implement bootstrap through a series of well-documented classes and
bootstrap specific attributes.
Bootstrap naming conventions are fairly consistent,
which make the library easy to learn and use even for beginners.
And finally, our last category, web development frameworks,
there are a number of popular web development frameworks in use today,
but only one can be my top choice.
And that framework is react to JS react,
which advertises itself as a library for building user interfaces in reality,
much more react is component-based,
which means it breaks the user interface into a series of components.
For example, NAF bars, footers and information cards may all be components.
And a website design components are designed to be reusable and are configured
using HTML,
CSS and JavaScript components have a state which can be altered using
JavaScript code your drivers script instead of accessing elements directly
interacts with the react virtual dock,
the virtual diamond turn updates your components and changes.
The view components are created in JSX,
which is an easy to learn extension to JavaScript.
The reason I picked react over other libraries is the demand for entry-level
developers were working in react.
There are more open jobs for react developers right now than any other
framework. And over half those jobs are entry level.
This means that a new developer versed in react has a great chance of landing a
job. So there you go.
My top tools for web development Opie found this list useful.
If you liked this video,
please hit that like button and subscribe to the channel.
If there are web tools that you find useful, I'd love to know about them.
Please leave a comment below with a few tools that you find useful. Finally,
I hope you'll check out my professional developer program,
which will teach you all the skills you need to learn to become a professional
web or mobile developer. The links below. Thanks for watching.
I'm mark last off and I'll see you in the next video.