Toolkit for front-end development for Linux
Good day, gentlemen developers! In this article I will tell how to make development under Linux really comfortable and convenient, so that it brings only pain and pleasure.
What we want:
We view the page in the browser and edit it in a text editor HTML and CSS / SASS. The code is extracted directly from the PSD, simultaneously adjusting to PixelPerfect directly in the browser. When you save, SASS is automatically converted to CSS and uploaded to the server. The necessary pictures from the PSD template are cut in two clicks, after which they are also automatically uploaded to the server. How to achieve this in less than half an hour? I'll tell you!
I just want to warn you that if you have more than a few years of experience and you are a fairly experienced front-end, you will not find anything new in this article. It is intended for people who have relatively recently joined the GNU / Linux community or have just decided to join it.
')
For convenient development, we need a browser that has most of the built-in useful tools in order to bother as little as possible with additional settings after installation.
For these purposes, Firefox Developer Edition is perfect, which, according to its developers, is built “for those who are building the Internet”. Why him, and not loved by all Google Chrome, for example? And here is why:
We seek the freedom of software, right? And why pay for some things, if we have a decent free alternative ?!
By pressing the magic button F12, the browser istransformed into development mode, in which editing CSS page styles is available, changing HTML and debugging JavaScript right on the page, adaptive design mode, as well as monitoring page loading speed.
You can read more on the official page .
Firefox Developer Edition supports e10s - multiprocessing right out of the box, which speeds up page loading by up to 400%, according to developers. Again, if desired, this mode is easily disabled in the settings. (He eats a lot of RAM, to which we will return later)
Of course, although FDE has a large number of additional functions, it will become even more convenient after installing additional plug-ins, but here’s a list of the most basic ones:
Of course, Pixel Perfect Layout has become the standard, and this plugin allows you to overlay site layouts with an overlay, which greatly simplifies development.
Sometimes it is necessary to review, change or delete some cookies, and this plugin is a great solution for these purposes. He also allows you to add your cookies.
A great solution for changing the User-Agent, as the name implies. Press the button, select the browser, operating system and device. Done! You are gorgeous.
Addon from the author of the previous expansion. Allows you to add custom User-Agents, which, in fact, can also be seen from the name
That is, in fact, dealt with the main extensions for the browser and we can safely proceed to the selection and configuration of our text editor.
Of course, there are a huge number of different text editors and development environments, but I would like to highlight a significant leader among all of them - this is Sublime Text 3. Its basic functionality is not much different from the others, but after installing the Package Control (package manager for Sublime) - its the functionality increases many times.
Further extensions will be installed with the help of Package Control , and you can find installation instructions here .
In the first place, of course, Emmet , familiar to many. Plugin that allows you to speed up the writing of HTML-code in a few times. You can read more about it here , and Emmet Css Snippets allow you to create the same magic with your CSS files.
Highlight all colors in CSS (such as "#FFFFFF", "rgb (255,255,255)", "white", etc.)
Significantly accelerates development when combined with the pipette.
Sass syntax support for Sublime. If you are not using preprocessors yet, I recommend starting. And we will consider work with Sass below.
Sometimes it becomes necessary to edit files on the server or any other work with FTP. This plugin will help you without installing additional software to edit files remotely, download them to your computer, or vice versa, upload to the server with great speed and convenience.
So we smoothly approached the most interesting, optimizing the system and installing additional applications.
The browser is, the text editor is also ready to work. What remains? View PSD files and image slicing. Under Linux. Seriously?
This process can be carried out with pleasure, and this will help us a great program Avocode , which supposedly created specifically for us. And don't let the price per subscription bother you, her trial for one email lasts two weeks, and no one bothers us to have a BIG number of e-mail addresses.
The program allows you to view PSD files, extract CSS properties of objects like Adobe Extract , but it is much more convenient, as well as save the necessary layers directly into a separate file.
So how do we automate the conversion of SASS to CSS and the gluing together of sprites from images? This will help Node.js and Gulp .
About the functionality of these great applications, you can read on the official sites, and I will tell you how to configure this whole thing.
Installing NVM is the Node.js version manager, which is installed using a regular bash script. Open the terminal emulator and write the following:
Or with Wget:
Restart the terminal window and check the installation with:
If everything is set correctly, you will see the inscription "nvm" in the console. Now we are ready to install Node.js and Gulp. Install Node.js using the terminal:
Wait until the end of the installation and install Gulp, sequentially executing the following commands:
Then go to the project folder and prescribe:
It remains only to configure the Gulp-file for the correct operation of all that we have installed above. Create a gulpfile.js document and put it in the root of the project. I attach my gulpfile.js content below:
I will not go into detail in the meaning of each line, but I can describe the work with Gulp in another article if I see that it will be interesting to you.
Small tips for optimizing your work:
As a result, we have a fully optimized system in which most routine actions take place automatically, without distracting us from the exciting process of creating something new and interesting.
What we want:
We view the page in the browser and edit it in a text editor HTML and CSS / SASS. The code is extracted directly from the PSD, simultaneously adjusting to PixelPerfect directly in the browser. When you save, SASS is automatically converted to CSS and uploaded to the server. The necessary pictures from the PSD template are cut in two clicks, after which they are also automatically uploaded to the server. How to achieve this in less than half an hour? I'll tell you!
I just want to warn you that if you have more than a few years of experience and you are a fairly experienced front-end, you will not find anything new in this article. It is intended for people who have relatively recently joined the GNU / Linux community or have just decided to join it.
')
Summary
- Browser selection
- Installing Firefox Extensions
- Text editor selection
- Required Extensions for Sublime Text 3
- Additional tools and system optimization
Most good programmers do their work not because they expect payment or recognition, but because they enjoy programming.
- Linus Torvalds
Choose a browser
For convenient development, we need a browser that has most of the built-in useful tools in order to bother as little as possible with additional settings after installation.
For these purposes, Firefox Developer Edition is perfect, which, according to its developers, is built “for those who are building the Internet”. Why him, and not loved by all Google Chrome, for example? And here is why:
pros
Totally free
We seek the freedom of software, right? And why pay for some things, if we have a decent free alternative ?!
Embedded Developer Tools
By pressing the magic button F12, the browser is
You can read more on the official page .
Multiprocessing without shamanism
Firefox Developer Edition supports e10s - multiprocessing right out of the box, which speeds up page loading by up to 400%, according to developers. Again, if desired, this mode is easily disabled in the settings. (He eats a lot of RAM, to which we will return later)
Firefox Extensions
Of course, although FDE has a large number of additional functions, it will become even more convenient after installing additional plug-ins, but here’s a list of the most basic ones:
Pixel perfect
Of course, Pixel Perfect Layout has become the standard, and this plugin allows you to overlay site layouts with an overlay, which greatly simplifies development.
Advanced Cookie Manager
Sometimes it is necessary to review, change or delete some cookies, and this plugin is a great solution for these purposes. He also allows you to add your cookies.
User-Agent Switcher
A great solution for changing the User-Agent, as the name implies. Press the button, select the browser, operating system and device. Done! You are gorgeous.
User-Agent Switcher
Addon from the author of the previous expansion. Allows you to add custom User-Agents, which, in fact, can also be seen from the name
That is, in fact, dealt with the main extensions for the browser and we can safely proceed to the selection and configuration of our text editor.
Choose a text editor
Of course, there are a huge number of different text editors and development environments, but I would like to highlight a significant leader among all of them - this is Sublime Text 3. Its basic functionality is not much different from the others, but after installing the Package Control (package manager for Sublime) - its the functionality increases many times.
Further extensions will be installed with the help of Package Control , and you can find installation instructions here .
Extensions for Sublime Text 3
Emmet and Emmet Css Snippets
In the first place, of course, Emmet , familiar to many. Plugin that allows you to speed up the writing of HTML-code in a few times. You can read more about it here , and Emmet Css Snippets allow you to create the same magic with your CSS files.
Color highlighter
Highlight all colors in CSS (such as "#FFFFFF", "rgb (255,255,255)", "white", etc.)
Significantly accelerates development when combined with the pipette.
SASS
Sass syntax support for Sublime. If you are not using preprocessors yet, I recommend starting. And we will consider work with Sass below.
SFTP
Sometimes it becomes necessary to edit files on the server or any other work with FTP. This plugin will help you without installing additional software to edit files remotely, download them to your computer, or vice versa, upload to the server with great speed and convenience.
System optimization
So we smoothly approached the most interesting, optimizing the system and installing additional applications.
The browser is, the text editor is also ready to work. What remains? View PSD files and image slicing. Under Linux. Seriously?
This process can be carried out with pleasure, and this will help us a great program Avocode , which supposedly created specifically for us. And don't let the price per subscription bother you, her trial for one email lasts two weeks, and no one bothers us to have a BIG number of e-mail addresses.
The program allows you to view PSD files, extract CSS properties of objects like Adobe Extract , but it is much more convenient, as well as save the necessary layers directly into a separate file.
So how do we automate the conversion of SASS to CSS and the gluing together of sprites from images? This will help Node.js and Gulp .
About the functionality of these great applications, you can read on the official sites, and I will tell you how to configure this whole thing.
Installing NVM is the Node.js version manager, which is installed using a regular bash script. Open the terminal emulator and write the following:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash Or with Wget:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash Restart the terminal window and check the installation with:
nvm --version If everything is set correctly, you will see the inscription "nvm" in the console. Now we are ready to install Node.js and Gulp. Install Node.js using the terminal:
nvm install v[vesrion] // [vesrion] , v4.5.0 Wait until the end of the installation and install Gulp, sequentially executing the following commands:
npm install --global gulp-cli Then go to the project folder and prescribe:
npm init npm install --save-dev gulp It remains only to configure the Gulp-file for the correct operation of all that we have installed above. Create a gulpfile.js document and put it in the root of the project. I attach my gulpfile.js content below:
My gulpfile.js
var gulp = require( 'gulp' ); // Gulp var gutil = require( 'gulp-util' ); var ftp = require( 'vinyl-ftp' ); // FTP SFTP var sass = require( 'gulp-sass' ); // Sass var notify = require( 'gulp-notify' ); // var spritesmith = require('gulp.spritesmith'); // function getFtpConnection() { return ftp.create({ host: '_', user: '_', password: '', parallel: 10, log: gutil.log, }); } var LocalScssFiles = ['./sass/style.scss']; var LocalFiles = ['./css/*.css', './index.php', './templateDetails.xml']; var FullPathFTP = '/public_html/autodiagnostic/templates/autodiagnostic'; gulp.task('sprite', function() { var spriteData = gulp.src('./psd/assets/*.*') // , .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css', cssFormat: 'css', algorithm: 'binary-tree', cssVarMap: function(sprite) { sprite.name = 's-' + sprite.name } })); spriteData.img.pipe(gulp.dest('./built/images/')); // , spriteData.css.pipe(gulp.dest('./css/')); // , }); gulp.task('sass', function () { return gulp.src(LocalScssFiles) .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) .pipe(gulp.dest('./css')) }); gulp.task('watch', function() { var conn = getFtpConnection(); gulp.watch(LocalScssFiles, ['sass']); gulp.watch(LocalFiles).on('change', function(event) { return gulp.src( [event.path], { base: '.', buffer: false } ) .pipe( conn.dest( FullPathFTP ) ) .pipe(notify({ message: "Updated <%= file.relative %>", title: "Gulp FTP [<%= options.hours %> Hours, <%= options.mins %> Min, <%= options.secs %> Sec]", templateOptions: { hours: new Date().getHours(), mins: new Date().getMinutes(), secs: new Date().getSeconds() } })); ; }); }); I will not go into detail in the meaning of each line, but I can describe the work with Gulp in another article if I see that it will be interesting to you.
System optimization
Small tips for optimizing your work:
- All the programs installed above, and in particular, Firefox, require a large amount of RAM, which zRam or zSwap can help us with.
- Convenient work with the terminal will provide Guake
- Instead of Sublime and Avocode, you can use Adobe Brackets with its built-in Extract, but, to be honest, font support in Debian and Ubuntu leaves much to be desired.
- I give you the choice between SFTP and VinylFTP, I use both tools as needed.
Result
As a result, we have a fully optimized system in which most routine actions take place automatically, without distracting us from the exciting process of creating something new and interesting.
Source: https://habr.com/ru/post/312508/
All Articles