Modern tools for Front End development. Front-End Developer Tools. What the statistics say
Web Developers Front End’a are responsible for ensuring that the page exactly matches the designer’s layout and displays the same in all browsers. This has become easier over time with the advent of more advanced browsers and more development tools.
While everyone knows about HTML and CSS, fewer people know about Sass and Haml. Frontend development continues to advance every year. One of the main tasks of a developer is to always be aware of the latest innovations.
If you've been feeling a little unsure of your front-end skills or just want to learn about newer techniques, I recommend reading this short article for you. I offer you several popular tools and resources that every Front End developer should use or at least know about their existence.
CSS preprocessors
Perhaps the most famous CSS preprocessor is SASS, also somewhat similar to LESS. Thanks to these two libraries, you can create more dynamic code.
The term “SASS” can be applied to both technology and syntax. SASS files can also be SCSS files, there are no special differences between them, in some places SCSS is just more similar to regular CSS. LESS is the same thing just with a different syntax.
SASS and LESS are not languages per se, but they are small extensions for CSS. SASS/LESS code compiles to plain CSS.
The biggest difference between SASS and LESS, other than the syntax, is how they work. SASS is compiled using Ruby, while LESS is compiled using JavaScript (or Node.js).
Note that CSS pre-processing does require a little knowledge of Terminal/CLI commands. You don't have to be an expert, but you should have at least basic knowledge of the command line. For example, the most quick way to build the SASS files is to use something like this in the terminal:
sass input.scss output.css
But once you get some practice, it becomes your second way to write CSS.
Here are some resources to learn more about CSS preprocessors:
GIT (Distributed Version Control System)
Control for project and version control is necessary for large web projects. A community like GitHub has made “GIT” a common part of technology.
But how does it work, and why should you use it?
GIT is a version control system that allows developers to write code without rewriting previous work. This is possible through transition, where different parts of the project can be saved as an archive. With GIT it is possible to fork your current project, try to add new option and save if you like it, or delete the branch that doesn't work.
GIT installation is very lenient for everyone operating systems. Easy, fairly detailed training, during which you will learn how everything is transmitted, branched and controlled.
But with an introductory guide and big amount GIT practices will slowly become part of your Front End workflow.
One of the biggest obstacles that can happen is using GIT through command line. This is the preferred method of most programmers who already use the CLI on a daily basis. However, if you still haven’t been able to learn how to use it, then an application from GitHub comes to your aid and which this moment is free.
My advice if you decide to start learning GIT is that you learn it not in a hurry, but in stages. It's easy to get discouraged when version control is a completely unfamiliar concept. So learn at your own pace and don't give up!
Here are some excellent websites for learning the basic features of GIT:
JavaScript libraries
Front End development has undoubtedly moved towards full support JavaScript. From dynamic page elements to animation, JavaScript is one of the main tools of every web project.
But recently, it seems like more and more developers are turning to JavaScript libraries that make writing code quite easy. This is great because libraries sometimes contain simplified concepts that can make interacting with methods like AJAX easier. Negative side this phenomenon - with so many different libraries, it can be hard to know where to start.
A good rule of thumb is to learn only what you need and when you need it. If you are someone who just likes to write code for fun, it is better to master only a few libraries. jQuery - maybe the best choice to get started, as it is one of the top five most used JavaScript libraries.
But you should also consider more modern tools such as Backbone.js or Angular.js. They are both publicly available libraries that were written to structure core JS web applications. They are incredibly powerful, but can serve as a small addition to a simple WordPress blog.
Developers, looking for a problem, might consider learning one of the tools a pre-processing language such as CoffeeScript, TypeScript or LiveScript. All three languages are compiled into JavaScript, but offer slight differences to the original syntax.
The true power of JavaScript is only now being discovered. With a tool like Node.js, it becomes possible to install it on the server. It's worth noting that raw JavaScript can be executed in the browser console, giving even more capabilities to Front End developers.
Whether you're a complete beginner or a seasoned developer, there's always something you can learn with JavaScript if you're passionate about web development. The following resources may be extremely helpful:
HTML preprocessors
Popularity CSS preprocessors, also enabled the emergence of preprocessors for HTML Front End. This works exactly like SASS/LESS, where you write the code and compile it to get regular HTML.
HTML preprocessors can save you from repetition identical lines code, closing tags. While this is obviously useful, it does require some adjustment sometimes.
Haml and Jade are the two most popular preprocessors with very different styles syntax. Slim is the third option. All three are open access and are improving all the time thanks to public support.
Haml and Slim run on Ruby, Haml is an alternative to ERB templates. Haml is now a great tool for Rails developers. For Front Enders, it can be just as useful whether you write Back End code or not.
Jade is a template engine that runs on Node.js. It is better used for Node applications or can also be used as a standalone solution for Front End developers who like Jade's syntax.
There is no prohibition or wrong choice, since they are both quite similar. The general consensus among Ruby enthusiasts is to stick with Haml development. But many Front End developers are leaning towards Jade because Node.js has become a hot trend in web development.
True, few developers find preliminary HTML processing. You may prefer to write static HTML, but some developers prefer Haml/Slim/Jade. So if you can at least understand the syntax, it will give you a big advantage.
I encourage you to check out these detailed learning resources to dig deeper:
JS task manager
Automated task managers - the latest Front tools End'a. The concept is often confusing at first, but task managers can greatly improve your technological process and give great potential.
Two large task managers are Gulp and Grunt. You'll notice that they both run JavaScript, but they also require a terminal. So how does it all work?
Gulp and Grunt are installed via Node Package Manager (NPM) on the command line. The libraries themselves can be controlled by JS commands from separate files, gulpfile.js and gruntfile.js respectively.
These files can be very small or very large depending on how many tasks you want to automate. Take a look at this standard Gulpfile.js to see what this might look like.
If you've never done anything like this before, you're probably a little confused. Don't worry about the syntax for now, instead you can focus on the concepts and features provided by these .js files.
You can add JS code that automates some tasks such as processing SASS files, Haml, even JS languages, one of which is CoffeeScript. You'll notice that each of those links points to an NPM package pre-written for Gulp. This means that you don't have to write the same thing as your own SASS autocompilers, because it's all already written!
Learning to use the task manager requires step-by-step work. The concepts may seem unfamiliar and, like learning SASS, can be difficult to understand for beginners. However, once you understand the basics and see how it affects your development as a whole, you won't even think about going back to the old ways.
To get started, just choose Gulp or Grunt and force yourself to practice.
Here are some ways to get started:
Finally
All of these tools are fairly new or have grown a lot over the past few years. The world of Front End development offers so many impressive tools to make coding easier, and I hope this article gives you a starting point.
So, friends, have you decided to take the path of programming? I shake your hand, this decision will change your life. This is always interesting and in demand work at the intersection of intelligence and creativity, work on how to benefit people and make the world a little better. The possibilities for its implementation are endless.
There is a lot in programming different areas: web development, mobile, desktop applications, OS development, hardware drivers. Web development is one of the most interesting and in-demand areas. Its advantages include the fact that your product is on the Internet, and to see it, you just need to type the address in the browser of any device; you don’t need to download or install anything. In addition, with the help of modern tools, and knowing the web, you can develop both mobile and desktop applications at once. The web consists of a frontend (what the client sees in the browser) and a backend (the server part that stores, processes and displays data). I suggest starting to get acquainted with the web from the front end.
Oh, by the way, my name is Roman Latkin, I’ve been working in web development for almost 10 years. When I started, everything was simple and difficult at the same time. Simple, because you didn’t need to know much to build the application: here’s HTML, a little CSS, a little JavaScript - and you’re done. It’s difficult because the development was carried out through pain. Nowadays, a lot of this pain has been cured with the help of a huge ecosystem of tools, but it is very scary for beginners; they don’t know how to approach the frontend, which side to approach it from. I was lucky, I watched the development of the frontend almost from the beginning, and everything fit well in my head. And I want to convey this understanding to help novice developers. I hope that after reading this article, you will clearly know which way to go, where to dig and according to what plan to develop.
Three components of the frontend
The entire frontend consists of three components: HTML (content and markup), JavaScript (logic) and CSS ( appearance, positioning). HTML describes the content of the page and looks something like this:
If you have to somehow manually use these tools to make a more or less complex project, then you are going to experience a lot of pain. Fortunately, the world is developing, complex things are being simplified, people are coming up with more and more new tools and technologies that make this creative process more enjoyable and faster.
Any process of cognition can be represented in the form of the letter “T”, where the horizontal line is a broad understanding, the vertical line is a deep one. U ideal specialist the letter T is large and beautiful, uniform. If it is stretched to one side, it is ugly, ugly; such a specialist is of little use in combat matters. He can either have a deep understanding of one thing, but take a little step to the side and he is unsuitable; or understand everything superficially, but at the same time be unable to do anything. First of all, it is necessary to develop the broad component as much as possible, which is what we will do now - we will try to cover all aspects of the frontend as broadly as possible, without going deeper. And then you will work on the deepening, which will be left for you to work on independently.
To have a good idea of the reasons for the current state of affairs, you need to know at least a little about the history of the development path of the frontend, and indeed web applications in general. There are so many tools now that not only a beginner will break his leg. Therefore, in order to have a good understanding of all this, let’s start with history, with a short excursion of how it all began, and then smoothly move on to modern approaches.
First sites
In the beginning, people wrote in pure HTML, drew the appearance on pure CSS, made logic in pure JavaScript. A typical old-fashioned application is where server-side logic generates HTML (in response to a visitor's request, the server takes data from the database and inserts it into HTML) and serves it along with static files of styles and client-side logic in JavaScript, which at the time (about 10 years old) ago) there was not much. When making a transition to another page, this entire process was repeated. That is, previously there was no division into front-end and back-end; there was one complete application that simultaneously worked with the database and generated HTML.
jQuery
I got tired of writing in pure JavaScript and appeared good tool- jQuery, which, using a convenient syntax, allowed you to access page elements and perform some actions with them. Various plugins and ready-made solutions appeared, it became easier and more interesting.
But applications developed, the volume of client logic grew, and gradually all this turned into a big noodle. To unravel it, some form, architecture was needed.
MVC
Smart Guys tried to move it to the frontend architectural template from the server side - MVC (model-view-controller). This pattern dictates that there is a model that describes the data. For example, user model, movie model, review model. There is a controller that processes requests, for example, “show a page with a list of movies at such and such an address.” And there is a view that is responsible for displaying data in HTML, to which the controller passes ready-made data received from the database/API.
This is where the history of single page applications began, SPA - applications that are downloaded once, and then, when moving through the pages, they contact the server for data via the API. This approach is called AJAX. Instead of generating HTML on the server side, the server serves the application's client logic once. When navigating to another page, for example from the main page to the hotel search page, the application requests data from the server in pure form(for example, information about hotels), without HTML tags(usually in JSON format), and generates the representation itself.
The front-end MVC pattern was good, worked great, but was unnecessarily complex. Angular, Backbone are representatives of this milestone in history. By the way, they still live today, but I didn’t understand them deeply.
Processors and assemblers
Applications began to grow in size, and now it's time to talk about assemblers, preprocessors and package managers. I will try to briefly go over them, despite the fact that they deserve a separate article.
Speed is important on the web, so you can’t just give it to your visitor. large files, they will take too long to travel through the network. Therefore, all resources are compressed using different minifiers. JavaScript most often using uglify (it removes spaces, makes variable names shorter and much more interesting things). CSS removes whitespace and can still merge some properties. And all this is collected into one or several files instead of 10-20, downloading one file is much faster, and the load on the server is less.
CSS
Regarding CSS, so-called preprocessors appeared. They are expanding CSS syntax, add a bunch of them there different possibilities- nested blocks, variables, loops. Even just the absence of semicolons helps a lot and speeds up writing code?
A preprocessor is a program that runs and compiles this sugar syntax into pure CSS. Using preprocessors avoids reuse code, builds an architecture, and essentially turns the style description language into a programming language. Learn any instrument and you will understand. I have now chosen Stylus for myself; there are a few more, for example - LESS, SASS.
React, although it has gained great popularity and a developed ecosystem, in practice turned out to be too bare, complex, and verbose. In order to do simple form, you need to write a lot, a lot of extra code and install a bunch of add-ons. In order to create a simple application, you still need to install a lot of things, and there are a lot of options for simple things, you can easily get lost - although the ecosystem is huge, it is difficult to navigate; externally identical applications can be arranged quite differently inside. But the concept of JSX - the intertwining of code and markup, does not look so successful, it is difficult to then understand what the author of the code wanted to say, and it is difficult to change the markup.
Vue.js
Here comes Vue.js - a flexible, efficient and easy-to-learn web framework that carries all the same concepts, but they look much better in it. It combines the best of Angular and React and more clearly answers the question “what is what.” Out of the box Vue already contains a large number of tools and capabilities that allow you to write voluminous logic in a few lines. Development has been greatly simplified.
Vue brought a few more interesting concepts, such as single-file components - files that contain logic, markup and styles at once, and they are not intertwined, as is the case with React and JSX. Vue out of the box allows you to use any preprocessors that fit very seamlessly into single-file components. And it has many ready-made built-in solutions, even its own Flux implementation. Vue has excellent documentation in Russian that will teach you best practice in the frontend, from application assembly to autotests.
Isomorphic applications, SSR
In talking about single page applications, we missed one important detail: when search robot accesses the single page application, it sees nothing - just a blank page with body tags with no content. In old-fashioned applications, the server would go to the database, generate a view, and serve ready HTML with page text. In the case of a single-page application, the server returns a blank page, which only after initialization pulls up the data and shows the view, which of course the search robot will not do. Thus, using Single Page Applications for content driven SEO websites is not acceptable.
This avoidance was overcome with many hacks and crutches until the concept of SSR - Server-Side Rendering appeared. The Smart Guys taught all the JavaScript that ran in the browser to run on the server using NodeJS (a technology for creating server applications using a browser JavaScript language). This, of course, introduced its limitations, but life became easier. Now it was possible to write the logic once in one language, and it immediately worked both on the server (at the first visit of the visitor/robot, HTML was generated with the page content) and in the browser (subsequent transitions of the visitor). This is called an isomorphic, universal application.
The scheme is simple: on the first visit, the visitor sends a request to the NodeJS server, which contacts the API server, takes the data in the form of JSON and renders it in HTML, returning it to the visitor. Then the application lives in the browser; during subsequent page transitions, it directly accesses the API server for data and renders the view directly in the browser.
In React, the implementation of this scheme is done in different and complex ways. As ready-made solutions There is, for example, the Next.js framework for this. The Vue documentation has an entire section dedicated to SSR. The Nuxt framework is listed there - Vue + SSR. With its help, you can write such universal applications quite easily.
CSS frameworks, adaptability
Now we will change the topic to a simpler one and talk about layout.
Historically, to create a page grid, its frame, in the early days, layout designers used tables. Then they started using blocks, or containers, and container layout appeared. The position of the blocks was set using the positioning property float: right/left .
Nowadays everything is simplified, almost all browsers support Flexbox and CSS Grid - modern ones convenient ways layout the page grid. Their skillful combination allows, using several properties, to achieve positions of containers that would have required a lot of sweat with old methods, allowing you to easily perform almost any design delights.
This is the ability of a page to look equally good on all devices, be it a laptop, tablet or mobile phone. Adaptability is achieved using media queries - blocks of conditions in CSS, at which screen resolutions which CSS properties should work. It can also be achieved through the skillful use of flexbox containers.
All web applications are basically typical, consisting of rows, columns, tables, buttons and other UI elements. In order not to write them every time, CSS frameworks were created to help site builders, where all the markup was already thought out - just apply the desired class. They contain many ready-made UI elements. The most popular is, of course, Bootstrap, now in its 4th version. There is also Bulma, which is also quite good. And many more less popular ones. Usually in CSS frameworks, adaptability comes out of the box; it is only important to use the offered tools correctly. CSS frameworks will be an excellent basis for almost any web application you have and good start mastering the skills of correct layout. They should be used when typical elements are needed user interface, adaptability, and this is 99% of cases on the web.
Cross-browser compatibility
This word refers to the ability of a website to display the same in different browsers. Typically, CSS frameworks take care of this, but I'll briefly explain how this is achieved. First you need to reset all the properties of standard elements ( different browsers display standard elements- lists, tables, etc. in different ways). In CSS frameworks you can often see a special file for this -
On this beautiful Friday, I dare to suggest the habra community small selection applications designed to increase productivity while working with the front end. If your favorite app is not represented here, welcome to the comments!
This wonderful form generator will help you create beautiful CSS login boxes and other input things, with minimal time investment. In addition to forms on the site of this project, you can create others no less beautiful CSS elements, including buttons and ribbons.
For lovers Twitter Bootstrap this generator was created, thanks to which you can easily change initial settings styles and start prototyping.
Switches and toggle switches in pure CSS. Very high quality and simple.
Colllor generates a harmonious color palette based on specified color. Allows you to avoid the “gouging-out” effect in your projects, and at the same time use a wide range of colors.
Compression for your CSS and JavaScript files without worries and problems.
Useful utility, which synchronizes changes made via FireBug with CSS files. You can imagine how much time you will save yourself.
This site will help you sort CSS by given criteria, priorities, selectors and so on. Very convenient thing.
Loading indicator generator for AJAX and jQuery. Easy to use and customize.
This tool will help you generate a cute ribbon. Well, you know what I mean - they're everywhere these days.
The typecast project is intended for font experiments. 30 seconds to register, and you have a pretty powerful tool in your arsenal that allows you to do all kinds of operations with fonts, and once you find your ideal combination, everything is exported to CSS. Well, isn't it wonderful?
Lots of icons and pictograms for CSS usage on your website. Select the ones you are interested in, watch the preview and download. It's simple.
The most convenient app for creating sprites. Just drag and drop required images, click Generate and get a sprite sheet. For now it only works in Chrome Firefox.
If you are making a responsive project, then here you can check how it will look on the screens various devices.
Want to create animations with CSS easily and effortlessly? Then follow the link. Set the direction, coordinates, watch the animation and download the source code.
Another tool for working with CSS sprites. Also a drag"n"drop interface, but I think it's prettier.
If you are a lover of the LESS preprocessor, then you might be interested in this tool that converts from CSS to LESS in one click.
Great background generator. Huge selection textures, effects and possibilities for their modification.
SnipSave 
This site offers you to store all your CSS snippets in one place. In my library, that is. Nice interface, it's a pleasure to work with.
Prefixr
An app from Jeffrey Way helps you quickly resolve cross-browser issues. You can write CSS code for only one browser, then run it through Prefixr, and it will generate the missing code to display correctly in other browsers.
HTML5 PLease 
You can call this project an online HTML5 assistant. Confused about using a specific new tag? The site will tell you whether it is worth using. And if so, then how exactly.
The other day I prepared a README for a project, which I hope will be interesting and instructive for other developers. So, when I wrote it, I realized that a few years ago I would have been scared to death if I had come across something similar, with all sorts of references to Node and its package manager, the Homebrew and Git systems, all kinds of tests, test and final builds.
Once upon a time, the bulk of a front-end developer's workflow consisted of editing files, testing them locally (to the best of their ability), and uploading them to the server via FTP. We measured our coolness by the ability to bend IE6 to our will or achieve pixel-matching in different browsers. Many members of our community - myself included - lacked traditional programming experience. HTML, CSS and JavaScript - usually in the form of jQuery - were self-taught.
Over the past few years, some things have changed. Perhaps the reason for this is that people began to take front-end development seriously; maybe it's that browser developers, for the most part, have finally brought order to their creations; or maybe it was just the front-end developers, again including myself, who finally understood the essence of the software development process.
Whatever it is, I think we've seen a shift in emphasis from the value of little things to the value of tools. Now, to be a successful front-end developer, you need to have a set of basic skills, and those developers who do not meet these requirements will soon begin to increasingly feel how far behind they are as information sources begin to take some knowledge for granted. .
Here are some things we'd like everyone to be familiar with and some resources you can use to brush up on your skills. (Thanks to Paul Irish, Mike Taylor, Angus Croll and Vlad Filippov for their contributions.)
JavaScript
This may be obvious without words, but simply knowing a JavaScript library is no longer enough. I'm not saying that you have to be able to implement all the features of the library using simple JavaScript, but you should understand when the library is really appropriate to use, and be able to work with good old JavaScript if necessary.
This means that you have read JavaScript: Strengths, preferably more than once. That you understand how data structures like objects and arrays work; features, including how and why you need them call And apply; know how to work with inheritance through prototypes; and you can handle asynchrony.
If your skills with simple JavaScript leaves a lot to be desired, here are some resources that will help you out:
- Eloquent JavaScript: A great book (also available in print) covering the basics of JavaScript
- Test assessment of JS proficiency: a selection of tests with errors on various topics in JavaScript; can you rewrite the test code so that it works?
- - an oldie but a mighty piece from Paul Irish that demonstrates what you can learn from reading other people's code.
Git file versioning system (and GitHub profile)
If you're not on GitHub, you generally can't participate in a large open source community. source code, which grew up around front-end development technologies. Cloning a repository to try out its capabilities should become commonplace for you, and you should understand how to use branches in collaborative projects.
Want to improve your Git skills?
Modular organization, dependency management and test builds
The days when managing dependencies was as simple as adding an extra script or styling tag to a page are long gone. Even if you haven't had the opportunity to implement great tools like RequireJS into your development process at work, you should take the time to explore them in your personal project or a project like Backbone Boilerplate, as the benefits they bring can't be overstated. RequireJS in particular makes it possible to develop using small, modular JS and CSS files, and then concatenate and minify them with its optimization tool for further use.
Skeptical about module-based development? This is not a reason to do nothing. At the very least, you should be familiar with tools like UglifyJS or Closure Compiler, which intelligently compress your code and then concatenate those compressed files before issuing the result.
If you're writing pure CSS—that is, not using a preprocessor like Sass or Stylus—RequireJS can also help you organize your CSS files in a modular fashion. Use @import statements on the main file to load development dependencies and then run the RequireJS optimizer on the main file to create a ready-to-use file.
Developer tools built into the browser
The developer tools built into browsers have improved dramatically over the past few years, and they can greatly improve your development experience if you learn how to use them correctly. (Hint: If you're still debugging your code using alert , you're wasting your time.)
You should probably choose one browser whose developer tools you will use on permanent basis- I'm currently leaning towards the Developer Tools in Google Chrome - but don't completely give up on the tools in other browsers as they add new useful features from time to time based on developer feedback. Opera's Dragonfly in particular has added some features that make its developer tools stand out from others, such as an (experimental) CSS profiler, customizable hotkeys, remote debugging without the need for a USB connection, and the ability to save and use custom colors palettes.
If you're not very familiar with browser developer tools, the presentation "Fixing jQuery Code" is an excellent (and not too jQuery-focused) overview of debugging, which includes a walkthrough of the step-by-step debugging process - something that will change your life if you're into it. We are not familiar with the presentation yet.
Command line
When it comes to the command line, using it confidently is already a must - you're missing out on a lot if you're not ready to immediately jump into a terminal window and dive into work. I'm not telling you what you should do All via the terminal - you can continue to use the Git GUI, although I think in the end you'll be better off if you give it up - but of course you should always have a terminal window open for the project you're working on. There are several tasks that you should perform via the command line without a second thought:
- ssh to connect to another machine or server
- scp to copy files to another machine or server
- ack or grep to search for files in a project by string or pattern
- find to find files whose names match a given pattern
- git to perform at least basic actions like add , commit , status and pull
- brew to use Homebrew to install packages
- npm to install Node packages
- gem for installing Ruby packages
If there are some commands you use especially often, edit your .bashrc , .profile or .zshrc (or whatever) and create alternative names for them so you don't have to type the commands by hand every time. You can also add alternative names to your ~/.gitconfig file. Gianni Chiappetta's dot files are a great source of inspiration.
Note: If you are using Windows, I don't know how to help you, other than I can recommend Cygwin. Maybe I'm wrong, but getting involved in the front-end developer community with open source on a Windows machine it is much more difficult. On the bright side, MacBook Air laptops are inexpensive, powerful, and surprisingly portable, and there's Ubuntu or Unix.
Client-side templating
Not long ago it was common for servers to respond to an XHR request with a snippet of HTML code, but over the past 12-18 months the front-end developer community has seen the light and started demanding raw data from the server. Converting such data into HTML, which can then be added to the document tree, can be a time-consuming and inconvenient process when dealing directly with the code. That's where client-side templating libraries come in: they allow you to use templates that, once you add data, turn into HTML string. Do you need help choosing a templating tool? The template selection chart from Garann Means will help you find the right one.
CSS preprocessors
Original article: A Baseline for Front-End Developers Article proofread by:In this material, I want to present a list of tools that help me when developing the client side of an application or website. It's about about Front-End development.
Who is a Front-End Developer?
After generating required template The time has come to layout and work with the style sheet.
Working with CSS.
There are a lot of tools and generators for working with CSS. Some of them are collected in this article “Selection of CSS generators”.
Website: http://habrahabr.ru/post/118056
In my work I use only one generator, this is the CSSsir browser extension Mozilla Firefox. A simple and easy-to-use tool that allows you to generate cross-browser code for basic CSS properties in a few clicks. This CSS3 generator will be useful not only for webmasters and designers, but also for ordinary users.
Website: https://addons.mozilla.org/ru/firefox/addon/csssir
CSS Reference
Working with website dynamics JavaScript and jQuery
Services for working with the jQuery API.
jQuery Cheatsheet - Oscar Otero
JQuery Cheatsheet in HTML with links to the original API documentation. It’s convenient because everything is collected in one mset, you can choose jQuery versions libraries and see which version supports what. Description of functions opens the original documentation in a new window.
