#web developer tools

In lecture 7 we looked at Responsive Web Design and since then I have done a good bit of my own research into response and adaptive web design approaches to understand how they work better. This is an article that I came across that I found to be very helpful on this topic. 

This is an article by web.dev that goes into detail about the basics of responsive web design. 

The article explains how to create websites that respond to the needs and capabilities of the device the website is being viewed on by the user. 

The article goes on to discuss how mobile is the main device presently being used worldwide to surf the web. 

As smart phones come in many different shapes and sizes the display size constraints differ greatly, therefore an alternative approach needs to be used to accommodate how content is laid out on a screen. Also, desktop, laptop and tablet screens need to be taken into account too. The approach of today, however, is mobile first. 

The article discusses in detail the viewport, images, layout, FlexBox, the CSS Grid Layout, multiple-column layouts, CSS media queries for responsiveness, breakpoints and how to choose them, optimising text and Chrome Dev Tools too. 

The URL Link To The Article:

https://web.dev/responsive-web-design-basics/

Examples of Responsiveness: 

The right web design tools can streamline your workflow, helping you work smarter – rather than harder – and more efficiently. After all, you want to invest your energy in solving problems, delighting users and creating beautiful designs. You wouldn’t want to waste your time and energy on dull, repetitive and soul-sapping tasks. Let’s look at 30 essential tools for web developers that will help you become more productive in the coming year.

Where some are brand spanking new while others have been around for a while. But all of them have the potential to save you time, energy and budget in your web design projects.

Sketch

Rory Berry, creative director at Superb, rightly feels that using Photoshop for web design is a mistake. He made the switch to Sketch in 2017 and highly recommends it. “Having been a user of Photoshop for over 10 years, it was hard to change and learn something new,” he says. “But literally after the first day of using Sketch, there was no looking back. I’m a total convert.”

He offers a number of reasons why. “Compared to Photoshop, sorting all your documents that you have and making revisions on Sketch is much easier,” he begins. “Sketch has small documents whereas Photoshop has large ones. Due to it being a vector-based app, the file sizes are dramatically smaller compared to Photoshop.

The Sketch community offers hundreds of plugins to make designers workflow easier and smoother, he adds. “There’s basically a plugin for everything if you can find it. Photoshop/ Lightroom is still our go-to for photo editing, but Sketch is an all-around winner for web design.”

Figma

Figma is an interface design tool that enables multiple designers to collaborate in real-time. It’s available in the browser, or on Windows, Mac or Linux. Both free and paid versions are available depending on what you use it for.

Here are some of its outstanding features:

“Figma has a similar USP as Sketch with the exception of being cross-platform,” explains frontend designer Benjamin Read. “I recently used it to create a couple of icons for an article we’re publishing on our website and found the workflow incredibly smooth. It took me no time to learn and had the added benefit of being collaborative: you can share graphics with others within the app.“ I’ve been trying to switch to Linux for my work and sometimes we use Windows, so Figma makes sense to me from a practical standpoint,” he adds. “In comparison, I’ve found many tools for other platforms fall short.”

Content writer and art worker David Eastwood, who works for Co-op Electrical, also has good things to say about Figma. “We were recommended Figma by our web development agency and use it for landing page wireframes,” he explains. “This has included proposed changes to the homepage and specific sales landing page, especially around Black Friday. It’s also been a really useful tool when we’ve needed to quickly mock MVTs; sometimes small additions to an existing layout. We love that you can quickly create designs for desktop, tablet, and mobile.”

Affinity Designer

Serif’s Affinity Designer has been dubbed the ‘Photoshop killer’ by some, and it’s easy to see why,” says Dan Edwards, creative director at No Divide. “My first impressions are that the app is incredibly well designed and feels like it’s been made to be a dedicated web and graphic design tool.”

“There were few features I really enjoyed, including adjustable, non-destructive layers. This essentially means you can adjust images or vectors without damaging them.”

“When it comes to designing, the UI feels familiar. When moving from Photoshop, everyone seems to want to start over, which can pose a real challenge. What Affinity has done is to keep the layout familiar, while tightening everything up and hiding distractions. I was easily able to jump straight in and get designing.”

“Overall, Affinity feels like it could be a real competitor to Photoshop, Illustrator, and Sketch. And at just £48.99 it’s a real bargain!”

Anime

Although web page animations have at times got a bad rap, developers are always looking for ways to make things easier. CSS animations and transitions have been a huge step forward, but more complex interactions often require a library. Anime is a new animation engine you’ll want to take a look at if you need to add complex animated components to your apps.

This code defines the objects you want to animate, along with specifics of the animations. The API allows you to target elements using CSS selectors, DOM elements or even JavaScript objects.

Avocode

Avocode makes it extremely easy for front-end developers to code websites or apps from Photoshop or Sketch designs. It’s built by the same team that brought us CSS Hat and PNG Hat, so it’s not surprising they’ve taken the exporting process one step further. Although previous apps have allowed you to export assets, what makes Avocode really special is that you can use its Photoshop plugin to sync your PSD file into Avocode with just one click.

Avocode quickly and automatically analyses your PSD or Sketch files and brings everything into a beautifully designed UI. You then have full control over how you export assets, including SVG exporting as standard.

You can also click elements in the design, and copy & paste the code into a text editor of your choice. “It gives users everything they need for coding – a preview of the design, and access to all layers and export assets,” says Avocode co-founder Vu Hoang Anh. “The best thing is that developers won’t need Photoshop or Sketch at all. The current workflow really sucks and that’s why we created Avocode.”

Pattern Lab

Pattern Lab is a beautiful pattern-driven design tool created by Dave Olsen and Brad Frost. It’s based on the concept of atomic design, which says that you should break your design down into its smallest parts – atoms – and combine them to form bigger, reusable components – molecules and organisms – that can then be turned into usable templates.

Although at its core it’s a static site generator that stitches together the UI components. There’s much more to Pattern Lab than that. It’s language-and-tool-agnostic enables you to nest the UI patterns inside each other and design with dynamic data. It features device-agnostic viewport resizing tools to help you ensure your design system is fully responsive and fully extensible so that you can be sure that it’ll expand to meet your needs.

Vivaldi

Sometimes the best tool can be something as simple as a new browser. Vivaldi is a fast, customisable web browser for power-users built by some of the people who started Opera. Dubbed ‘a browser for our friends’, Vivaldi is built using web technologies like JavaScript and React that are used to make the user interface, along with Node.js and lots of NPM modules.

Vivaldi is the most customisable browser out there, and it offers other cool features such as command line control, a panel for taking notes, tab stacking, tiling and web panels that enable you to put all your favourite sites in one place for easy access.

Canva

Do you want to mock up something like an infographic quick and easy? Then Lawrence Harmer, founder of Solve Media, recommends Canva.  It’s a free, browser-based tool that’s used by both designers and non-designers, to make graphics for both print and the web.

“Canva is pretty good for making nice images,” says Harmer. “Images are the window into the soul of your website and social media, so a tool like this can be key to success.”

Web Designing Proposal Tool

It’s essentially a simple ‘Proposify’ tool, which allows you to quickly and easily churn out proposals,” explains BeeWits’ David Attard. “It’s essentially a glorified form that allows you to enter and change pre-set text and then creates a Word document ready for sending directly to the client.” If you sign in to the free service, you can save your current version, such that next time around, you’ve got a bunch of fields already filled in with your details. It’s simple, but it gets the job done, and what more do you really want? It’s not officially been launched yet, as BeeWits are currently canvassing feedback, but it’s otherwise ready to use.

Site Stack

Here is another browser-based tool that’s both simple and brilliant. Type in the URL of any website to this Chrome extension and it lets you look at its tech stack. It’s fast, smooth and reliable and provides coverage for over 40,000 products. It prides itself on both the accuracy and exhaustiveness of its data.

“We built this extension to be a simpler way to access this data,” says its makers, “while also protecting your privacy and running all operations on our own servers so that your browsing isn’t slowed down.”

Codepen Project

Founded in 2012 by Alex Vazquez, Tim Sabat, and Chris Coyier. CodePen has grown to become the web’s largest and liveliest communities for testing and showcasing HTML, CSS and JavaScript code snippets. For the last five years, it’s functioned as both an online code editor and an open-source learning environment, where developers can create code snippets (“pens”), test them and get feedback.

Recently CodePen took another big leap forward by launching its own IDE (Integrated Development Environment), CodePen Projects, which lets you build websites within your browser.

You can drag and drop your website files, organise them into tabs, and preview your site as you build it. There are templates to help you create sites more quickly if you choose, as well as built-in debugging tools.

Bootstrap

Bootstrap is certainly not a new tool. But the new version of the world’s most popular front-end framework is tabbed as ‘a major rewrite of almost the entire project’, so I think it warrants a mention. Some notable changes include the following:

Bootstrap has revolutionised development and there’s no doubt the ubiquitous framework will continue to shape how we build stuff on the web.

Dropped support for IE8 and iOS6

CSS source files move from Less to Sass (‘.scss’)

Switched from px to rem for primary CSS units

Increased the global font size to 16px from 14px

Added support for Flexbox in the grid

A new, all-encompassing ‘cards’ component to replace older components

Nearly all components refactored to use classes without child selectors

Ally.js

No list of web development tools would be complete without at least one accessibility tool. Accessibility is one of those often-neglected aspects of design and development, and ally.js can simplify it for you.

Now a stable product, Ally.js is a JS library that gives you fine control over focusable and non-focusable elements. For example, using its API you can prevent elements outside a modal window from receiving focus until the modal is closed. You can also find out exactly which elements are focusable or tabable, and identify focus changes within the shadow DOM.

Type Nugget

Type Nugget addresses a need you’ll have on just about every frontend project: dealing with CSS typography. Still, in beta with more features in pipeline, it’s an online typesetting tool that gives you fine control of typestyles.

The tool displays a diverse set of text samples on the page, which can be live-tweaked in a panel on the right. The panel lets you select font size, weight, style, colour, letter spacing, text decoration and more for individual aspects of the page (global styles, headings, paragraphs, links and HTML lists).

This tool also allows you to register for an account, log in and save the progress of your work. After specifying all your settings, you can hit the ‘Generate Code’ button and Type Nugget will produce a link to a style sheet hosted on its CDN. If you find CSS typography tedious and repetitive, you’ll benefit greatly from adding this tool to your workflow.

ARkit

Augmented reality is as blending digital object and information with the environment around you. It is a space that’s generating a lot of excitement in the web and app development community today. Not least because in June at WWDC17, Apple released ARKit, a new framework that allows you to easily create AR experiences for iPhone and iPad running on iOS 11. To get started, simply download iOS 11 and the latest version of Xcode 9, which includes the iOS 11 SDK.

Vue.js

What would a list of new web tools be without the hottest new JavaScript framework? Vue.js, like React, is a framework for building user interfaces and utilises a virtual DOM. As the name suggests, Vue’s core library is focused on the view layer.

Look at a code example, taken from Vue’s docs, that utilises user input and demonstrates the library’s elegance. We’ll start with the HTML

There is a custom v-on handler that calls the reverse Message method. Vue is great for those who are less-experienced with complex libraries, but also has a number of plugins to help with the development of complex single-page web apps.

Hologram

Hologram is a new all-in-one tool for WebVR creation. This free desktop app requires no previous coding knowledge, and its native Google Blocks integration enables you to play with lots of free 3D objects right off the bat. Under the hood, Hologram takes full advantage of the power and simplicity of A-Frame, Mozilla’s WebVR framework.

This means that developers can download projects created with Hologram and use them in their A-Frame workflows. It’s currently available on Mac and a Windows version is promised soon.

Parallax SVG Animation Tool

Created by Gareth Battensby of Parallax, SVG Animation Tools has a range of SVG animation tools in the form of a Python script. “I built the tools as a response to the frustrations you get when creating complex or long sequence SVG animations,” he says in this explanatory blog post.

“The biggest of these being overwritten edits whenever you re-export from Illustrator. These tools completely eliminate that issue – they’re perfect for front-end developers who animate SVG graphics with GSAP or similar animation libraries.”

Github  Notifier

Hate wading through emails? Prefer the idea of getting GitHub notifications in your browser? This Chrome extension does exactly that.

This straightforward but effective tool was created by Stacy Goh. It enables to get real-time push notifications whenever someone creates an issue, comments on an issue, pushes code, creates a pull request, forks your repository or stars your repository. You can learn more about how and why Goh created it in this blog post.

Quill

Quill is billed as a WYSIWYG rich text editor ‘for the modern web’. There are lots of different contexts in applications where a rich text editor is needed. So it’s no wonder Quill has exploded in popularity since its version 1.0 beta release in mid-2016.

Now a stable product, Quill lets you convert a basic div element into a powerful rich text editor with a few lines of JavaScript:

But the most powerful features in Quill are its flexibility and extensibility by means of modules and a powerful API. Quill offers themes and modules that include a toolbar, keyboard, clipboard, and history. You can test-drive many of these features in the Quill playground and of course, the documentation is a must-read if you intend to use its advanced features.

URL TO PDF

Brought to you by Alvar Carto, this self-hosted API enables you to convert the HTML into PDFs. Hence it’s handy for rendering receipts, invoices, or any other HTML content. The API ignores a page’s @media print CSS rules by default and sets Chrome to emulate @media screen, to make the default PDF look more like the actual site. You can set it to operate automatically at regular intervals and best of all, it’s free.

iota CSS Architecture

iotaCSS is a CSS framework that’s been purposely crafted to be design-agnostic. It was created by consultant front-end architect Dimitris Psaropoulos, who found that other CSS frameworks were imposing a lot of limitations on the designers he worked with. This was forcing him to either write a lot of code on top or ask the designer to compromise. So instead, he created his own framework, which works a little differently.

While most CSS Frameworks behave as a unit, iotaCSS is a set of individual, small and flexible modules that don’t depend on each other. You can use one independently or you can combine them to build more complicated user interfaces.

Launchpad

Launchpad is a tool from Anima that lets you publish websites directly from Sketch, with no coding required.

The entire interface is integrated into Sketch and can be used to create landing pages and static websites, although at the moment it doesn’t support dynamic web pages using JavaScript. But it does let you include links, add responsive breakpoints, set up forms, embed videos and integrate analytics tools. So it could be an ideal tool for setting up a quick and easy promotional website, for example.

React sketch. Aap

React Sketch.app provides a super-easy way to manage Sketch assets in a large design system. Built by the team at Airbnb to help bridge the gap between designers and engineers. It’s basically an open-source library that allows you to write React components that render to Sketch documents.

Because React Sketch app uses Flexbox, its components can have the same rich layout as your real components. That means no more dragging rectangles by hand; everything works like your target layout engine.

React Sketch app, then, makes it simple to fetch and incorporate data into your Sketch files. It also provides an easy way to build your own custom design tools on top of Sketch.

SVGito

SVGito is a free web app that cleans up your SVG files, to save you the bother of manually editing them.

Created by Peter Nowell, this neat little app automatically optimises your SVGs at the touch of a button, and will typically reduce their size and complexity without changing what they actually look like on screen.

Sizzy

Sizzy is a tool that allows you to preview multiple screens at once while you’re testing out your responsive web apps.

Creator Kristijan Ristovski had previously been using react-storybook to switch between the different variations of each component. But he got annoyed having to go back and forth between so many devices. Hence, he built Sizzy, which allows you to see all the changes simultaneously, making it much quicker and easier to spot and fix layout bugs.

Foundation for emails 2

Foundation for Emails is a framework from ZURB formerly known as Ink. It is used for creating responsive HTML emails that work on just about every platform and service, bundling together email coding best practices. The latest iteration uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.

Form

RelativeWave’s Form is a prototyping tool like no other we’ve tried. It’s not a typical design tool in that there’s no tools or layers palette. Using the app feels like a mix of design and code.

While you can’t actually create graphics in the app, you can insert them and use what Form calls ‘patches’ to add gestures and interactions. The Mac app requires you to also use the iOS app so you can view your prototype in real time and interact with it.

“Form is an app design and prototyping tool with the goal of producing designs that are closer to what you get in production,” explains RelativeWave creative coder Max Weisel. “We want designers to work directly on the production side of an app, and at the same time free up engineers to focus on more complex problems.”

There are some great tutorials on how to use Form, but the process is rather complex if, like us, you are used to creating visuals in Photoshop. Moving an image to the centre of your device, for example, is achieved using Superview variables and Match Patches. Once in place, you use maths to divide the width and height and connect them to the X and Y positions in Image View. Group those together, rename the variables and adjust the X and Y anchor points. We found this process fairly complex.

20 Best Chrome Extensions for Developers & Web Designers

Are you puzzled to find the best chrome extensions for developers & web designers? Is this question revolving in your mind for a long time? If yes, then it is the right place where you will get all the answers. No one denies the fact that Chrome is one of the most amazing web browsers available around the globe. It not only supports tons of extensions but also gives a boost to the productivity of…

Comparison of Sublime text Editor and Atom Text Editor

To any developer in this world, text editor is an important tool to improve the coding efficiency. Over the last few years a number of new text editors has come into the market in both free and paid model, but unfortunately not all of them were able to stand in the developer community. Some of them remained as most commonly used text editors such as Atom, Sublime, Vim, and Visual Studio code.

Le…