10 fantastic web design tools for July 2018

[Rss Bot 1]

This month’s roundup of the best web design tools roundup includes a CSS preprocessor that scopes styles to components, and a jobs board that puts applicants first. You'll also find some great learning resources and lots of other interesting things that make life as a web designer or developer much easier. Let's get started!

01. Honest Work

On this jobs site, salary and hiring info are mandatory

Whether you’re on the hiring or applying end of things, the recruitment process is typically frustrating and arduous. In a bid to make things easier, two tech hiring consultants have created Honest Work, a jobs board that does everything a bit better than the rest. 

Their rationale makes sense: currently jobs boards are built with employer-focused features, because they’re the ones paying to advertise. But if you build a site focused on the needs of applicants, you’ll attract more people, which of course is what employers actually want most of all. 

Honest Work requires that employers include information about salary and interview process, which makes things more transparent for applicants. It also has more focused, accurate job search filters as well as a bunch of other features that makes things simpler for everyone.

02. The Experimental Layout Lab of Jen Simmons

Learn cool layout effects and techniques with Jen Simmons

Flexbox and CSS Grid give us the power to break away from boring frameworks and make our own exciting layouts, which will hopefully usher in a new era of creativity on the web. If you want to get inspired and find out what’s possible, this is a great place to start. Jen Simmons has been busting web layout myths for some time now, and her Experimental Layout Lab shows off some of her most impressive work.  

With the newer web technologies we can run text vertically or at an angle, and have it fit around images; we can use proper art direction and tailor our layouts to our content. In short, we are much more able to use graphic design the way we do in print publications. It’s time to get excited about the web again.

03. VS Code can do that?!

Handy tips and tricks for Visual Code Studio 

If you’re a Visual Code Studio user this site is for you. Someone noticed that this code editor has many little-known but very powerful features that don’t get much attention, so they’ve rounded up a collection of great tips that will transform your working relationship with this software. 

Did you know that you can easily see which npm packages are out of date with the Version Lense plugin? Or that VS Code can refactor your JavaScript to ES6? Have a quick skim of the homepage to pick up some gems.

04. Vue Native

Build native mobile apps with JavaScript

Vue Native is a framework for building cross-platform native mobile apps using JavaScript. It compiles to React Native and gives you all the advantages of the Vue ecosystem. Its creators say they wanted to bring the support for templating, styling and state-management of Vue to the app-building process. Take a look at this blog post to find out more.

05. Wired Elements

Create sketchy mockups, wireframes or final interfaces with this tool

These sketchy UI elements with a hand-drawn look are fun; you can use them for wireframes, mockups, or even a final site if that’s the look you’re going for. You might expect that each one is a static file, but not so; they are implemented as web components and redrawn especially for you. That means no two implementations will be exactly the same – just like the real thing. Try out the example on the homepage; that’s not an image, it works!

06. The Service Worker Cookbook

Browse the list of recipes to find out how to do useful things with service workers

Service Workers provide an elegant means of getting all kinds of useful functionality, and this site from Mozilla is a collection of practical examples of Service Workers as used on modern websites. There’s a list of 'recipes' that demonstrate how to accomplish various tasks with Service Workers, and if you have something to add they welcome contributions from any developer. All code is available on GitHub. 

07. Stylable

Heal the problems that come with global CSS styles

Stylable is an open source CSS preprocessor that that extends CSS so that styles are scoped to components to prevent them leaking or clashing with other styles in your app. At build time, the Stylable CSS is converted into normal CSS that works in any browser, making it a neat solution to the problems that come with global styles. If you’re unsure whether it’s for you, Bruce Lawson has created a helpful song to explain the benefits.

08. Interneting is hard

An enormous collection of good web development tutorials

Whether you want to teach yourself web development from scratch, hone your responsive web design skills or boost your skillset by learning some of the newer technologies, this huge, free repository of tutorials will help you. The earlier chapters assume that you’re a complete beginner but you can jump in at a later stage if you want to learn about things like Flexbox. It’s written in a concise style with lots of clear diagrams and code examples to aid understanding. 

09. React App Manager

Jump straight into React without any terminal or npm tinkering

RAM enables you to create and run React applications without doing a lot of setup or dealing with the command line. The idea behind it is that npm and the terminal are barriers to entry for beginners, so this offers a way to dive straight into React without those intimidating elements. It’s currently in beta and hasn’t been tested on Linux or Windows, but if the concept appeals we’d say give it a whirl.

10. Conversational Design

Learn how to build great conversational interfaces

Erika Hall is one half of Mule Design, and has decades of experience as a designer and technologist. Her latest book looks at using conversational interfaces to create human-centred systems that will engage your audience. Hall explains how to create a personality that will appeal to your users, how to choose the right kind of language for them and how to become a more competent writer. 

Read more:

• 20 cutting-edge web tools to try now
• How to multitask like a pro
• Create a dashboard app with React

View the full article