In Web design
Top Tools For Web Development 2021 - read the full article about web design errors, Web design and from Framework Tech Media on Qualified.One
Youtube Blogger
Were 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! Im Mark Lassoff and welcome to the channel.
I help people become professional web and mobile developers and digital designers. If youre interested in improving your development and design skills, Id invite you to subscribe to the channel for new videos. Each week today, were taking a look at my picks for the top tools used by web developers.
Im going to be making a pick in a number of different categories.
Lets 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, youll 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.
Its 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 editors native functions arent 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 dont 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 youre a heavy user like me, youll 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 youve 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 youre not familiar with Chrome dev tools, this is what Id 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 its 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 youve created in Figma thinking was great for creating both rough wireframes and complete animated prototypes thing was a flexible tool.
And youll find the more you use it, the more youll 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.
Lets take a second to make sure were 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.
Youre free to use code others post on getting up and can contribute to the community projects.
Ive heard that many interviewers ask if youve contributed to any projects during job interviews, personally, I have somewhere around a hundred separate GitHub repositories for different projects. Ive worked on over the years.
Youd have doesnt 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 Trellos Butler feature will help you automate tasks within Trello eliminating some of the tedious work that goes along with most collaboration systems.
If youre 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 youre 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. Youll have to go through a short installation process.
If youre 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 youre using on the backend. If youre 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 its pretty much plug and play.
Once you download an installs app, you could run the server and start coding.
You dont 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, Id love to know about them.
Please leave a comment below with a few tools that you find useful. Finally, I hope youll 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.
Im mark last off and Ill see you in the next video.
Framework Tech Media: Top Tools For Web Development 2021 - Web design