The best and worst thing about being a web developer is that the web is constantly changing. While this is exciting it also means that web developers must always be proactive about learning new techniques or programming languages, adapting to changes, and be willing and eager to accept new challenges. This could include tasks such as adapting existing frameworks to meet business requirements, testing a website to identify technical problems, or optimizing and scaling a site to better perform with the back-end infrastructure. We thought we would compile a essential basic list of web page development tools and resources that can help you be more productive, stay informed, and become a better developer.
Let’s start with the basics: a first-rate code editor – one that features a well-designed, super efficient, and ultra speedy user interface. There are several that do this well, but arguably the best (and most popular) is Sublime Text.
Artfully run by a one-man development team, the secret to Sublime’s success lies in the program’s vast array of keyboard shortcuts – such as the ability to perform simultaneous editing (making the same interactive changes to multiple selected areas) as well as quick navigation to files, symbols, and lines. And when you’re spending 8+ hours with your editor each day, those precious few seconds saved for each process really do add up…
Chrome Developer Tools
Google’s built-in Chrome Developer Tools let you do just that. Bundled and available in both Chrome and Safari, they allow developers access into the internals of their web application. On top of this, a palette of network tools can help optimize your loading flows, while a timeline gives you a deeper understanding of what the browser is doing at any given moment.
Google release an update every six weeks – so check out their website as well as the Google DevelopersYouTube channel to keep your skillset up-to date.
It’s every developer’s worst nightmare – you’re working on a new project feature and you screw up. Enter version control systems (VCS) – and more specifically, GitHub.
By rolling out your project with the service, you can view any changes you’ve made or even go back to your previous state (making pesky mistakes a thing of the past). The repository hosting service also boasts a rich open-source development community (making collaboration between teams as easy as pie), as well as providing several other components such as bug tracking, feature requests, task management, and wikis for every project.
Many employers will look for finely honed Git skills, so now’s the perfect time to sign up – plus it’s a great way to get involved and learn from the best with a wide array of open-source projects to work on.
Getting tired of typing in that same styling for a container? How about that button that keeps cropping up? Once you start building front-end applications regularly, you’ll start to notice the same patterns emerging.
UI frameworks are an attempt to solve these problems by abstracting the common elements into reusable modules – meaning developers can scaffold the elements of new applications with speed and ease.
HTML is usually the cornerstone of any front-end developer’s toolbox, but it has what many perceive to be a serious flaw: it wasn’t designed to manage dynamic views.
This is where AngularJS, an open-source web application framework, comes in. Developed by Google, AngularJS lets you extend your application’s HTML syntax, resulting in a more expressive, readable, and quick to develop environment that could otherwise not have been built with HTML alone.
The project is not without its critics: some feel that this sort of data binding makes for a messy, non-separated code, but we still think it’s an invaluable skill to have in your front-end kit.
Web dev tools that save time are your best friend and one of the first things you’ll learn about code is that it needs to be DRY (“Don’t Repeat Yourself”). The second thing you’ll probably learn is that CSS is usually not very DRY.
Enter the world of the CSS preprocessor, a tool that will help you write maintainable, future-proof code, all while reducing the amount of CSS you have to write (keeping it DRY).
Perhaps most popular among them is Sass, an eight-year-old open-source project which pretty much defined the genre of modern CSS preprocessors. Although a little tricky to get to grips with initially, Sass’s combination of variables, nesting, and mixins will render simple CSS when compiled, meaning your stylesheets will be more readable and (most importantly) DRY.
Web Design Helpers
I’m going to keep this section shorter, only sharing very brief descriptions of each tool … just to pique your interest enough so that you’ll check them out:
Great for designing custom design cards, blog images, and all sorts of social media graphics (for Twitter, Facebook, etc.). Very easy to use.
2. Sass (FREE)
Probably the best CSS extension language on the market. Think CSS, but with variables and other interesting elements usually associated with standard programming languages.
Bootstrap is an HTML, CSS, and JS framework for building responsive and mobile-first websites. It makes front-end design and development much quicker. Originally introduced by Twitter.