Dmitri Drevko

web Programmer

Useful tools for web programming

ISPSystem

Here I will talk about the tools that help you create a website, from the common ones like code editors to the small but useful ones. Some of them will turn out to be familiar, and some of them you can think of: “Wait, you could actually do it that way?” However, they are all useful in the work and save a lot of time.

A selection of code editors

Code creation begins with the editor in which the code is written. Here are several handy solutions:

VS Code — a popular editor by Microsoft, available for installation on Linux, Windows and MacOS. It supports quite a few plugins installed from its own repository for code completion, working with databases, FTP, eExcel documents and much more. It has built-in support forEmmet — a tool that speeds up the writing of code in various programming languages. There are even debugging modes to check if the code works. VS Code is completely free.

Screenshot of the VS Code development environment
Screenshot of the VS Code development environment

2. Sublime Text — an equally common editor. It also supports code completion, Emmet and all the VS Code features mentioned above. The developer's website points out:

“Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit for the evaluation”
Скриншот среды разработки Sublime Text
Screenshot of the Sublime Text development environment

Notepad++ — a minimalistic code editor, as the name suggests: Notepad is an ordinary notepad, and "++" indicates advanced features. The editor also has code completion depending on the file type. As in previous editors, there is syntax highlighting. Plugins are supported. For example, a very handy addon for working with FTP: you can immediately edit a file downloaded from FTP and upload it back by pressing "Save". The program is free and available only for Windows.

Screenshot of Notepad++ editor
Screenshot of Notepad++ editor

Tools for running a local web server

After creating a web application or a website, you will need to run it in order to test it. If it is a simple HTML file, you just have to open it in your browser. Nevertheless, often it is necessary to run the code on the server, and then these tools are useful:

1. OpenServer — a web programming environment. This is a local web server, which is installed as a normal software - through the installer. After installation, the built-in tools are immediately available: database management through phpMyAdmin,PHP version management, the ability to choose the version of Apache / NGINX, to save settings to different profiles. The program is available only for Windows.

A server started and running under OpenServer
A server started and running under OpenServer

2. WampServer — another quite popular web server. Easy to install and undemanding to the system, which means it can run even on a modestly powered computer. Supports all the components required for a web server. It allows you to install, delete, enable, and disable PHP extensions directly from the program interface, without having to write any text in the configuration files.

WampServer interface
WampServer interface

The NodeJS web server runs on the V8 engine, which compiles JavaScript into machine code. That is, the same language is used to write the server code for the backend as for the frontend. The syntax, of course, will be slightly different, but it is still the same familiar JavaScript. NodeJS is available for Linux, Windows and MacOS.

NodeJS download page
NodeJS download page

Working with the layout

1. The first thing that immediately comes to mind is the developer’s tool available directly in Chromium-based browsers (Chrome, Opera, Yandex Browser, etc.) and in FireFox. It can be opened by pressing F12 or with the key combination ctrl + shift + j, in MacOS (Option + ⌘ + j). Here you can immediately see the entire DOM layout (in other words, the HTML code of the page) and CSS styles. You can run and debug JavaScript, check the loading speed of page elements, etc.

DevTools available in the browser
DevTools available in the browser

2. PerfectPixel is a plugin for Chromium-based browsers and FireFox, allowing you to superimpose the design image of the website on top of its layout. It helps to see where the layout deviates from the given preset. You can adjust the position and appearance of elements directly in the browser.

3. PixelParallel is another useful extension for Chromium-based browsers. It shows a grid on top of the website page, over which the website elements are aligned. The grid parameters are customizable.

4. Better Ruler is an extension that works like a ruler and helps you measure the distance between objects on the page.

5. LambdaTest checks how the layout works in different browsers and on different OS. The service is paid, but a limited functionality is available for free to test the website in Windows and MacOS browsers, including mobile devices with different resolutions.

LambdaTest demo, the website is opened in Safari mode on MacOS
LambdaTest demo, the website is opened in Safari mode on MacOS

Tools for graphics

1.Online image converter — a very useful service for converting images into 12 different formats. For example, you can convert the image into ico format to create a favicon for the website. The service is not limited to just an image converter, it allows you to convert quite a large set of file formats: audio, video, documents.

A service for converting different file formats
A service for converting different file formats

2. ColorZilla — an extension for browsers that shows the color code of any element on the page with the Eye-Dropper tool.

Демонстрация работы расширения ColorZilla
ColorZilla extension Demo

3. Pixlr— a free online image converter. Allows you to edit images, supports most well-known image formats, including Photoshop PSD file format. Supports working with different layers.

Services for providing icons and pictures

1. Preloaders — a service of generating animated download icons. Allows you to adjust the parameters: color, size, and animation speed. The large list of animations contains free and paid pictures.

A catalog of free animated icons at Preloaders
A catalog of free animated icons at Preloaders

2. Unsplash — — a catalog of free images, which can be downloaded in various sizes.

3. Lorem Picsum — the service selects random pictures of any size, which can be set manually. For example, if the link is in the formathttps://picsum.photos/500/800, the service will randomly generate an image of 500 by 800 pixels. Very useful for prototyping or just for blank images on a website.

Flaticon — — a catalog of various icons for all occasions. Both free and paid icons are present.

Word processing services

1. Google Fonts — a service from Google that distributes free fonts. You can download fonts as a file or connect them to your project via a generated link.

A catalog of free fonts from Google
A catalog of free fonts from Google

2. Beautifier formats the code in a way that it is easy to read and edit.

Service for code formatting: Beautifier
Service for code formatting: Beautifier and Minimize

Once you have created your website, go ahead and manage it through ISPmanager

 

ISPmanager - a server and website control panel. It helps you set up the environment, deploy websites on a production server and maintain them. For example, you can use the ISPmanager web interface to:

  • Deploy an Apache, nginx, or OpenLiteSpeed web server;
  • install languages and alternative versions of PHP;
  • create a database;
  • configure the mail server;
  • install the CMS;
  • configure backups;
  • connect DDoS protection.

Try ISPmanager for free - we provide a trial version for 14 days.