This is a feeling I’ve noticed from engineers and designers I’ve worked with in the past, and it’s a sentiment that’s a lot more transparent with the broader web community at large. You can hear it in Medium posts and on indie blogs, whether in conversations about CSS, web performance, or design tools.

The sentiment is that front-end development is a problem to be solved: “if we just have the right tools and frameworks, then we might never have to write another line of HTML or CSS ever again!” And oh boy what a dream that would be, right?

Well, no, actually. I certainly don’t think that front-end development is a problem at all.

The future of infrastructure is bright, and new tools let us focus on who we’re building for instead of how we're building. At its heart, infrastructure exists to solve peoples' problems. The key to choosing the right tools is seeing infrastructure for what it is: A product used by people.

This talk presents the story of Moda—GitHub's internal service platform. Moda is a set of tools, practices, and ideas for running software on Kubernetes. We’ll share how we approached big infrastructure changes, what has worked well, and why we made the decisions we did. Our success is rooted in treating infrastructure like a product, remembering that we build tools to enable other developers, and focusing on what can help them build the future of software.

A common narrative in the Web 3.0 community is that we are in an infrastructure phase and the right thing to be working on right now is building out that infrastructure: better base chains, better interchain interoperability, better clients, wallets and browsers. The rationale is: first we need tools that make it easy to build and use apps that run on blockchains, and once we have those tools, then we can get started building those apps.

But when we talk to founders who are building infrastructure, we keep hearing that the biggest challenge for them is to get developers to build apps on top. Now if we are really in an infrastructure phase, why would that be?

I've been working on TypeScript for over two years now(!) so I thought I'd write a post or two to reflect. I should open with the standard disclaimer: I am just a random engineer at a company with tens of thousands of them, and others surely disagree with the opinions expressed here.

Google embraced web applications early. Can you believe it's been 14 years since Gmail was released? JavaScript back then was pure madness. Gmail engineers had to worry so much about Internet Explorer's poor garbage collection algorithm that they'd need to manually hoist string literals out of for loops to avoid GC pauses. I recently found a design doc from that era where they considered doing what today we'd call "minifying" the JavaScript but noted that some candidate tools were Windows-only. Today that feels unimaginable.

We asked the Smashing Community for their favorite tips and tricks when editing text and code. With so many great suggestions, we’ve decided to collect them all into one article so you can add it to your useful bookmarks. Thanks to everyone who took the time to reply and share their best-appreciated tools and techniques — we sincerely appreciate it!

There are two opposing narratives in the design tool space which have been evolving for many years. These narratives reflect two very different schools of thought when it comes to understanding the specific value our tools provide and which direction they should be headed.

The first narrative is selling the notion that design artefacts can and should be the Single Source of Truth™ for the product. In this narrative, code is secondary—its job is to reproduce the design artefacts as accurately as possible. Platform constraints are mostly ignored in favour of speed and boundless creativity.

I’m a web developer and blogger. These are the browser extensions that I actually use right now. It’s an ever-changing set, and I’m never afraid to try new ones, but I’m also fairly picky and uninstall anything I don’t find myself using.

Ghostery is a browser extension that shows you, and more importantly, helps you block third-party resources (mostly scripts). This is a big deal for a bunch of reasons. These two are the most important to me: 1/ It makes for a faster web. It’s not uncommon to see Ghostery block 50 scripts from a page. That’s a lot of scripts to download and run. But these are just advertising and tracking scripts! Typically Ghostery isn’t breaking the functionality of the site, just stopping those. 2/ By stopping them, it cleans up a lot of bad UX crap, like popups and in-your-face social sharing things.

Since launching this year's Front-End Tooling Survey in March, 5,097 front-end developers have taken the time to fill it in. Thanks to all of you who have taken part!

Each year the survey has a pretty straight-forward aim; to shed light on the the tools that front-end developers are using right now in our industry.

It's very easy to take for granted what tools are being used based on your own knowledge and habits. These results help to give an insight into the current trends in front-end tooling, as well as showing how usage is changing over time by looking at the figures from previous surveys.

This year the survey was made up of 24 questions – up from 19 questions in 2016 – covering a wide range of front-end tools and methodologies.

Better visual web tools are a given, but I expect, as with everything related to the industry, there will be vigorous debate about what tools are valuable, who should create them, who they’re for, and who should be responsible for them.

If visual design functions are seen as a superset of existing dev tools, then it’s a natural step to make the browser itself both a reader and a professionally capable authoring tool.

The advantages to this approach would be tight integration with the rendering engine, and avoiding the issue of proprietary file formats; it could use vanilla HTML, CSS and JS, maybe with some JSON or JSDocs for configuration and for things not well represented in other formats.

Today, we’re excited to launch the Figma Platform, a way to improve design workflows by connecting Figma to other tools, scripts and even web apps. We’re starting off with a new concept for the design space: A web API.

It’s crazy that a web API is groundbreaking in 2018, but to our knowledge, no one has ever created one for a professional design tool before. The reason? Design traditionally takes place in a world of siloed, offline desktop software, whereas Figma lives online where everything is connected.

By harnessing the open nature of the web, our API lays the foundation for unique forms of design collaboration. Companies are already using it to craft custom tools that meet their unique needs. For example, Uber created a live feed of what their design team is working on to raise visibility across the organization. GitHub automated part of their icon creation process to improve its efficiency.

I personally know some developers who are very talented and can create wonderful pieces of software with no or little struggle. Because of these gifted individuals, our industry is full of high expectations. But the sad truth is: not everyone is a ninja/guru/rockstar developer.

And that's exactly who I am: a mediocre developer. This article will guide you through surviving in the industry if you are not a genius.

I google the simplest things all of the time

I fail to remember a lot of the things. Like functions and methods from the standard library, arguments positions, package names, boilerplate code and so on.

You can't satisfy all libraries, frameworks in all world and galaxy far away, etc., because in such way you will loose readability of language itself. It is not how it's suppose to be.

Libraries must change their methods. Not opposite. Language on a first place. Authors of websites must stop using old libraries. This is evolution. Old must die. Period. Website made on 8 year old technologies will stop working? Ok. Fine. Goodbye. I don't believe that Google or Microsoft will not implement this feature, only because of users of MooTools. We even don't know what percent of websites uses MooTools. And, surprise, anyway you can use old browser for this site.

From command-line tools and webpack to TypeScript, Flow and beyond, let's talk about how to use JavaScript in 2018.

Last year many people, including myself, were talking about JavaScript fatigue. No, the ways to write a JavaScript application have not really slimmed down, BUT with a lot of command-line tools doing much of the heavy lifting, transpiling becoming less crucial and TypeScript trying to minimize type errors, we can relax a little.

I wrote a post where I talk about how a set of components living inside static design tools like Sketch isn’t itself a design system. Pardon my clickbait. Perhaps a better title would have been “Your Sketch library is not a(n entire) design system.”

No doubt tools like Sketch are super valuable, and having a set of reusable components inside them helps design teams establish thoughtful and consistent UIs. However, a Sketch library is just one piece of the design system puzzle. A design system also can include other puzzle pieces like:

Frontend web development has never been a hotter or more controversial topic.

Where once it was the server-side community that was embroiled in arguments over seemingly obscure topics, like whether ORMs were useful abstractions, now you can’t ask whether CSS belongs in JavaScript without raising everyone’s hackles.

The proliferation of frameworks and buzzwords in the JavaScript ecosystem has gotten so extreme that Medium thought pieces on JavaScript fatigue are the new lightning rod of the development world. We can’t even stare at our own navels without sparking off a ‘navel-gazing considered harmful’ trend on hackernews.

Over the recent months, we have been busy improving the Chrome debugging experience for Visual Studio Code, and today we are happy to release three new features that we think will make client-side JavaScript debugging in VS Code easier and more reliable.

If you aren't familiar with the Microsoft Debugger for Chrome extension, it allows you to debug your client-side JavaScript running in Google Chrome. This adds a new aspect to VS Code's existing JavaScript debugging experience, where out-of-the-box you can debug your server-side JavaScript in Node.js. Having both debuggers installed allows you to do seamless full-stack JavaScript debugging.

When I was a 17 year old noob, going to technical college in my home town, I was introduced to a browser called Firebird, which would later be renamed Firefox. I was immediately drawn to this new browser; Firebird was fresh, exuded excitement, but most of all, provided a few developer tools that made learning front-end development easier and more enjoyable. It was then that I knew I need to make it to Mozilla one day.

It took me a decade to get to Mozilla and I couldn't have been more excited, proud, and scared. In my almost six years at Mozilla I've worked on and contributed to a dozen exciting projects, from MDN to Firefox OS to WebVR to the ServiceWorker Cookbook and so on...but I never forgot what made me love that early browser so much, which makes announcing the following so emotional for me:

Update: Check out headless-devtools, a library for automating DevTools actions from code by leveraging the DevTools Protocol

Chrome DevTools is thego-toanalysistool for understanding what's going on under-the-covers of your app and conducting perf-audits. As you are interacting with the site like a real user would, you can use DevTools to drill-down to every tiny detail about the page. This is great for manual analysis. But if your goal is to monitor web performance over time, you might find that tools in that space are not as powerful. Automated synthetic monitoring services don't expose nearly as much information as there is in DevTools, and for the most part the only type of user interaction they emulate is waiting for the page to load.

There is a new weapon in the great war against JavaScript the struggle to allow developers to choose their favorite style of programming while improve performance and their productivity. That weapon is WebAssembly, that will revolutionize client-side web development.

WebAssembly, or wasm, is a low-level bytecode format for in-browser client-side scripting. If you are writing a compiler for a programming language one option is to target a platform, like the JVM or .NET, and compile your language to the target bytecode. WebAssembly occupies the same role, so when you compiling to WebAssembly you are making your software available for all platforms where it is supported, in other words all browsers.

Another twelve months have passed and I'm sure all of you have come across some interesting new coding techniques, technologies, CSS tricks (of course!), and other stuff that will make you more productive in 2018.

As some of you might know, I curate a weekly newsletter called Web Tools Weekly, in which I feature dozens of links every week to new tools, mostly focusing on stuff that's useful for front-end developers. So it's an understatement to say that I've come across lots of new tools over the past 12 months.

As I've done in years past, I've put together a brief look at some of my favorite finds in front-end tools.

When we’re looking to publish longform content, it can be tempting to just throw a long text field onto the page and call it a day — especially when our longform content is powered by a CMS, where a single layout does the heavy lifting for content ranging from 200-word blurbs to detailed, short-story-length tutorials.

But some designers and writers are heroically resisting the temptation and returning to the concept of feature stories — combining custom layouts with copy carefully tailored to the presentation to tell riveting, lengthy stories that enrich the narrative with video, sound, charts and graphs, maps, and much more.

Whether you’re a seasoned designer or just starting out, chances are, you’re still using a tool that wasn’t built for the job you’re currently doing. That’s not a bad thing, and the tool you’re using might be the perfect choice for your current context.

Introduction

We’ve already reviewed some of the most popular and modern wireframing and prototyping tools. It’s time to take a step in a slightly different direction and focus on the tools required for the actual design creation, which is also the most important step in the design process.

Let’s jump right in!

TL;DR

If you’re serious about UI design and own a device running Mac OS, you will find Sketch to be a great tool.

I can tell at least that in 3 years, JavaScript will gain more the status of a VM and lose the status of a language. Already today, not many people use raw JavaScript. You usually have some transpilation, at least e.g. Babel. In the future, Web Assembly will enable more innovation in that regards, and existing transpiling languages like Elm, TypeScript, PureScript will continue to improve.

The above is a comment by André Staltz on his Hashnode AMA. I’ve noticed similar comments made by other developers in 2017, ranging from those working on web frameworks to those working on new languages.

The popularity of TypeScript has really exploded recently. I like TypeScript, and I like static types. I don’t use TypeScript, but as type systems go, it’s got some great features. It’s structural rather than nominal, meaning that it works basically like automatic duck typing rather than name or identity based type checking. That is a good fit for dynamic languages like JavaScript.

What I don’t like is that a lot of people think that TypeScript solves a problem that it doesn’t actually solve — at least, not to any significant degree.

The famous marketing rhetoric is “large-scale web applications are hard without static types”. It’s true that static types power some really great developer tools such as jump to definition and automatic refactoring, and those tools

Testers: when we speak of “manual testing”, we help to damage the craft.

That’s a strong statement, but it comes from years of experience in observing people thinking and speaking carelessly about testing. Damage arises when some people who don’t specialize in testing (and even some who do) become confused by the idea that some testing is “manual” and some testing is “automated”. They don’t realize that software development and the testing within it are design studio work, not factory work. Those people are dazzled by the speed and reliability of automation in manufacturing. Very quickly, they begin to fixate on the idea that testing can be automated.

1. When you read here, you in fact read dozens of the best Node.JS articles - this is a summary and curation of the top-ranked content on Node JS best practices

2. It is the largest compilation, and it is growing every week - currently, more than 50 best practices, style guides, and architectural tips are presented. We welcome issues and PR to ever keep this live book updated. We'd love to see you contributing here, whether fixing some code mistake or suggesting brilliant new ideas - be part of the Node.JS best practices book