› Frontend Babel
  • About




  • Top Angular Development Companies in 2022
    When choosing an Angular software development company that will implement the order, be careful - unscrupulous contractors do not delve into the context of the tasks and may interpret the requirements in a convenient way. As a result, there is a risk of getting a completely different product than the one you initially wanted.


    Top JavaScript Development Companies
    It is not surprising that there is a plethora of different development companies that claim to offer the best services out there. We have created the list of the top 10 most reliable JavaScript development companies based on several criteria.

    Yet another way to load SVG sprite

    During our experiments with inlining SVG icons at our company, we discovered that browsers responded to linking SVG set into a page differently. However, we would like to have a universal and stable method, which works in all the browsers with support SVG.

    Trials and errors led us to this scenario: to some variable in a variable in JavaScript.

    1. Add the JavaScript file in the bundle of all JavaScript files. Then, link this bundle in section.
    2. Before the first usage of SVG add an empty element (placeholder) and insert the content of SVG-string here.

    Thus, we achieved the caching of SVG pictograms similar to how it happens to other static files. Also, we overcame a problem of linking an external SVG file in IE.

  • Binary operations with unordered sets

    In this post I will do algorithmization of the array operations and describe the operations.

    Summary:

    • I. Intersection of sets
    • II. Différence of sets
    • III. Union of sets
    • IV. Symmetric difference of sets
    • conclusion

  • Styling placeholders with CSS. Syntax, tips & tricks, supported HTML5 styles

    Placeholder attribute is used to provide an action hint inside empty elements such as input or textarea. In this article, we consider the possibility of styling the placeholder text as well as some tricks to make it more usable and functional.

    Let's begin with an example for those who don't know what a placeholder is.

  • Why I wrote a plugin for Grunt to work with SVG

    Once upon a time my colleagues and I met a need to work up a lot of SVG icons. The prerequisites: over 30 colorless SVG images (the color are defined with CSS later). The task: generate their PNG+CSS fallbacks for the older browsers.

  • Generating CSS sprites with Gulp

    While working with one large project, my colleague and I were thinking about how to automate building the CSS sprites. Before, we used to build them manually or with different online services which anyway took a lot of time. Also, by that time we already used Gulp to build the project and so were looking for a gulp-friendly solution for sprites.

    Initially we were choosing from different variants:

    • css-sprite
    • gulp-sprite-generator
    • gulp-spritesmith
    • gulp.spritesmith

  • Some CSS tricks; or what we do at our Naked Fridays

    Our development department has a very nice tradition. Every 2 weeks we hold Naked Friday; this is a little conference where we share interesting knowledge gotten during our work. As a result, we have a lot of such information by now and so we decided to publish it.

    Thus, let me introduce a set of fascinating CSS and HTML tricks, which we hope are not yet well-known. We will be happy if everyone learn something new!

  • Tidying Up Your CSS: A Case Study From Yandex

    I work on a huge project — in fact, on nothing else than the Yandex SERP (Search Engine Results Page). As in any other large project, people here work with enourmously huge chunks of CSS code; a separate developer team does the maintenance.

    When different people create and edit CSS using different tools and approaches, the resulting code becomes complicated, messy and inconsistent. For example, different developers apply different order for vendor prefixes, some of them omit quotes around urls while others don't. I could even imagine that in a hotfix rush, one could add something like position: relative to a rule set which already has position: absolute buried deep inside between other definitions... a happy debugging session guaranteed!

    Regarldess of the aforementioned problems, our CSS repository shines with consistent code style and looks perfect, all of it.

    How do we do it?

  • Generating BEM selectors with CSS preprocessors

    The BEM methodology never assumed that its long CSS classes such as .block__element_modifier to be written manually. At Yandex they use special tools to produce HTML markup and styles. If you are using CSS preprocessors to generate your styles, you also do not have to repeat block names again and again. Here I'm going to demonstrate how to do this.

  • About the @viewport

    Once Opera’s guys proposed to use @viewport { ... } in CSS instead of tag. Regarding the reasons you’d better watch and listen to @ppk and I will explain why you should use this right now.

  • JSCS: JavaScript Code Style

    When nine months ago I wrote a small console utility for myself, I didn't suspect that soon it would become a serious and unique in its class tool, which would be used even by such famous teams as jQuery, Bootstrap and Angular. Now, as I'm writing this article, my project has 1010 stars on GitHub, and I'm very happy to think that so many people could make their work more comfortable with the help of my idea.

  • Bower: Why Front-End Needs a Package Manager

    Package managers simplify installing and updating project dependencies, which are libraries that it uses: jQuery, Fotorama, everything that is used on your site and isn't written by you.

  • SVG: Grouping and Re-using Elements

    SVG-figures can be grouped to structure a file in more convenient manner. There are several tags for this purpose: , and . Elements, element groups and symbols can be used repeatedly.

  • Acquaintance with SVG images

    SVG is quite a mature technology but it began to gain its popularity just recently. Mostly due to the fact that vector graphics perfectly suit for adaptive web sites. If you have just started to learn SVG, here is some information you can start with.

  • Developing Cross-Browser Extensions

    What do we do if we have to search for something? Of course, we fire up our favorite search engine web site. It is quite hard to push yourself to use another a different search engine rather than the usual one, even if you know that the result would be better. To change this UX pattern I developed Likeastore Chrome Extension. It adds social part to your search flow by showing relevant information from the article you liked. Besides Chrome we support Firefox and Safari. Despite the platform difference all these extensions are built from the same codebase.

  • What Every Frontend Developer Should Know About Webpage Rendering

    Today I'd like to focus on the subject of web page rendering and why it is important in web development. A lot of articles are available covering the subject, but the information is scattered and somehow fragmented. To wrap my head around the subject, for example, I had to study a lot of sources. That's why I decided I should write this article. I believe the article will be useful for beginners as well as for more advanced developers who want to refresh and structure what they already know.

  • Graphical interface

    Let me introduce myself. I am an Interface Designer at Yandex, and I've been involved with projects like Yandex.Maps and Search Engine Results Page, and also designed brand icons, promo materials, documentation, a project planner, a shared interface component library, and a fast prototyping system. Besides that, I follow my colleagues' projects such as Yandex Main Page and other Yandex portal services: Market, News, Images, Video, Disk, Auto, Realty. I see how these projects grow and evolve.