Jump to content

Best web development tools of 2018


sincity

Recommended Posts

Traditionally, when we think of web development, we picture some coder typing furiously on a keyboard into the wee hours of the night while slurping coffee, sitting in a dark basement next to the flashing LEDs and whirring hard drives of a stack of servers.

While that may have been true in the last millennium, these days that is hardly the case. Web development in 2018 is generally done with lots of planning and collaboration between teams, and it has come out of the basement and into the light of day.

To facilitate all this activity, there are plenty of web development tools to do the heavy lifting of planning, optimizing and coding a website. Let’s go through the best choices to get your site up and running, and growing traffic in a jiffy.

Sketch

Sketch

Great websites are more than just code, as they embody great design elements, including logos and images. Sketch endeavors to handle the design elements, and bills itself as a “design toolkit.” It has features including the ability to add simple animations and creation of clickable prototypes. It also lets the user create a master symbol, that can then be used anywhere in the document, and be resized as needed- such as for an icon or an avatar. Furthermore, text and images can be manipulated into dynamic designs.

There is also a cloud component, that is termed Libraries, that allows collaboration as symbols can be shared, and worked on together. Finally, custom fonts can be designed to give the website a truly custom look, in the FontRapid tool that can be then exported into an OpenType font file.  

A limiting factor is that Sketch only supports a single OS - the Mac OS El Capitan (10.11.2) and higher, leaving Windows and Linux users out in the cold. The pricing is based on a single user license, which is $99 (£76) for a year of updates, and then can be renewed annually for $69 (£53); there are education and bulk discounts available. A 30-day free trial is available. 

InVision Cloud

InVision Cloud

With the list of top technology companies that use InVision Cloud including the likes of Amazon, SoundCloud, Evernote and Netflix, it clearly validates the method of using a digital product design platform.

This approach includes a number of traditional design elements and processes, and takes them into the virtual age, with tools including an Element Library, a photography board, navigation flows, a web prototype for desktop sites, and the requisite in design, inspiration board. Their Prototype tool will be of interest to web developers as it can make a prototype website with clickable elements for desktop or mobile use.  

While it offers multiple tools, the other plus is that there is also a free tier, that can handle a single prototype. For more ambitious needs, the Professional plan can take on unlimited prototypes for a $25 (£19) monthly charge. 

Sublime Text 3

Sublime Text 3

Sublime Text 3 is a popular code editor that is a useful tool for web design, and is available as a small download for Windows, Mac and Linux. Useful features include the GoTo Anything command for finding a piece of code, the Multiple Selections command that can make changes to recurring sections of code, and Split Editing that can maximize the display of code across a widescreen monitor, or even multiple monitors. 

Sublime Text is free to download and evaluate, and then is available to purchase for $80 (£61). This is the price for the individual license which is not time limited, and then allows the user to install this on all the systems where you are the primary user.   

Foundation 6

Foundation 6

As a general principle, it is often easier to design something once the basics have been laid down. Foundation 6 takes this approach, offering “a family of responsive front-end frameworks,” that can be applied for website design and emails, and each are customizable to get just the right look. From the list of sites that use it, there are some serious heavyweights including Disney, HP and Adobe.  

They offer a series of HTML templates, each optimized for a specific application, such as a blog, or a real estate website. Then, this can be built upon, with ‘Building Blocks’ that get added to the website, including a full screen hero page, a subscription form, a star rating block, and rounded social buttons - the choices are quite expansive and really include just about anything you would see on a web page. A series of webinars, called Foundation Classes is offered to teach new users how to use all of it.

Pricing is opaque, but there is a free demo. Users also indicate that there is a steep learning curve for novice users. 

Chrome DevTools

Chrome DevTools

Chrome continues to be a popular choice for web surfers, and it includes Developer Tools right in the browser, and they are ready for your web development needs. The tools included are for debugging JavaScript, applying styles to HTML elements, messages to indicate how a page is running, and optimization for website speed.  

There is no charge to use these tools, and there is support available via an active DevTools community

4hCyoNZgh6k

View the full article

Link to comment
Share on other sites

I just wish Sketch was for PC too 😕

 

also, have you tried Atom vs Sublime 3? I’ve heard it’s up and coming and gaining lots of steam in the text editor scene (developed by GitHub people I think).

Link to comment
Share on other sites

Meh, call me old fashioned but I am still the guy who does everything from scratch by hand. 

 

Never had a good experience using these types of software, always bloated and messy.  No thank you!

  • 100 1
Link to comment
Share on other sites

  • 2 weeks later...
On 7/8/2018 at 3:55 PM, Chuckun said:

Meh, call me old fashioned but I am still the guy who does everything from scratch by hand. 

What do you mean by scratch by hand? At some point you have to use a text-editor to code, correct?

Link to comment
Share on other sites

6 hours ago, bang bang said:

What do you mean by scratch by hand? At some point you have to use a text-editor to code, correct?

Yes typing in a text editor like notepad is classed has hand-coding.  I would simply never use things like Dreamweaver or any of these types of 'builders' as a programmer because they are just terrible - if you're a novice and not looking to improve more than necessary then they are absolutely a great idea but for us guys who started with nothing more than text-editors, we prefer to hand-code rather than let a program do what it thinks is the right way :)

Link to comment
Share on other sites

On 7/8/2018 at 6:22 PM, bang bang said:

I just wish Sketch was for PC too 😕

 

also, have you tried Atom vs Sublime 3? I’ve heard it’s up and coming and gaining lots of steam in the text editor scene (developed by GitHub people I think).

 

This is what I use for PC.  Works fantastic!

 

https://affinity.serif.com/en-us/designer/

 

Edited by n3g4n
Link to comment
Share on other sites

47 minutes ago, n3g4n said:

 

This is what I use for PC.  Works fantastic!

 

https://affinity.serif.com/en-us/designer/

 

The affinity products are fantastic for the price.   Serif have always been good.   Again I tried their Page Plus system a few years ago to see if I could knock out templates faster than by hand, to make things cheaper for my clients, but nope, it was heavy, bloated, and glitchy.  Faster by hand lol. 

BUT the affinity suite is awesome so far for graphic / photo work.

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.