DEV Community: Alex

Help the job offer to be closer to you 🎉

Alex — Thu, 22 Aug 2019 20:45:42 +0000

As a front-end team leader in a growing department, I have to interview a lot. Often some small details can make a big difference. And I’ll try to share some tips with you to help you get your dream job (you don’t need any other).

1. Modify your CV to fit position description

Of course, there are a lot of desriptions, that are written badly and you can see something like databases experience in front-end position. Or jQuery in 2019.
But let's imagine that description is written by somebody, who really wants a candidate like he or she described. It really saves time and makes you look more confident when interviewer looks at Summary section and first four rows are a perfect match. And in opposite, when I see CV and in first paragraph I read about one’s great DevOps experience when candidate applied to a Full-stack developer position it makes me Hmmmm... even if in front of me sits really great dev.

2. Let your CV be a two-page document

I have almost 10 year of experience in field of web development and it is really hard not to brag about it in 5 pages. But also I understand, that almost nobody cares about things I coded in 2012 with some fancy jQuery plugins and how my grid looked perfect with lots of float: left (though it wasn't always easy). Because technology have changed. Because I have changed. And simply because it is unrelevant to modern reality. Imagine that you are on a fast date party and you have to impress quickly.

3. Don't be afraid to say “I don't know”

Just because, if you speak with genuine confidence about some internal PHP method that doesn't exist, you lose your points. And the more you continue, the more it looks like stupidity. Lifehack to handle it: you always can say something like “oh, I forgot how it can be done in pure langName, but I’ve always used library X* earlier to achieve this — probably it’s not the best way”.

4. Discern general questions and specific questions

When I ask people to tell me everything they know about performance optimization, too often I hear 2 or 3 sentences. C’mon! This is SOOO big field to walk on. Just enumeration of tools and services can make interviewer’s heart melt. But what’s strange is that I hear 2 or 3 sentences with no clear answer when I ask how to clone an array (even from devs with over9000 years of experience).

5. Pay attention to “As a plus” section

It will take you about an hour to read a couple of articles — you’re already on DEV.to — about things that are mentioned there. Often interviewer asks about something from this section as a one of general questions. “As a plus” almost always means that it’s not your daily job to develop with these technologies or team just started to use them, but it’s a part of infrastructure, working environment etc. This is really low-hanging fruit, don’t miss it.

As always, thank you for reading and I hope this info will help you to be a developer that every company desires.

*lodash if you’re front-ender.

Mastering :focus-within

Alex — Sat, 29 Jun 2019 09:38:59 +0000

Dropdown-on-hover pattern is used in interfaces for a very long time. And most of that time, these dropdowns are not fully acccesible. For example, if you navigate via keyboard there is no chance that you will get into this dropdown and select something hidden in it.

But everything has changed when :focus-within landed in browsers. And according to caniuse.com this code is enough for about 81% of users to make them a little happier:

<div class="dropdown" tabindex="0">
  <p class="dropdown__title">This is dropdown</p>
  <div class="dropdown__wrapper">
    <a href="#">Some hidden link</a>
  </div>
</div>

.dropdown {
  position: relative;
}
.dropdown__wrapper {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}
.dropdown:hover .dropdown__wrapper,
.dropdown:focus-within .dropdown__wrapper {
  width: 100%;
  height: auto;
  overflow: visible;
}

Note that you have to add tabindex="0" to the dropdown container, so it become focusable.

So, we’re done. But what about that near 19% of browsers that doesn’t support :focus-within? Javascript all the things!

// so here is module pattern begins
;(function () {
  // get all of dropdowns on page and define active class
  const dropdowns = Array.from(document.querySelectorAll('.dropdown'))
  const dropdownActiveClass = 'dropdown--active'

  // add event listeners to focusin and focusout to our dropdowns
  dropdowns.forEach(dropdown => {
    dropdown.addEventListener('focusin', focusinListener)
    dropdown.addEventListener('focusout', focusoutListener)
  })

  // if focus is inside dropdown, add active class
  function focusinListener (event) {
    event.target.closest('.dropdown').classList.add(dropdownActiveClass)
  }

  // if focused element is not dropdown, remove active class from all dropdowns
  function focusoutListener (event) {
    if (!document.activeElement.classList.contains('dropdown')) {
      dropdowns.forEach(dropdown => {
        dropdown.classList.remove(dropdownActiveClass)
      })
    }
  }
}())

And we have to update CSS:

.dropdown:hover .dropdown__wrapper,
.dropdown:focus-within .dropdown__wrapper,
.dropdown--active .dropdown__wrapper {
  width: 100%;
  height: auto;
  overflow: visible;
}

And then just enjoy this accessible dropdown! Full demo to play (use your Tab button):

Minify, generate WebP and lazyload images in your Vue & Nuxt application

Alex — Tue, 28 May 2019 14:34:14 +0000

I wouldn't have written this post if standard image optimization flow hadn't been so tough to me. At first, all I wanted is to apply my favourite lazysizes to the app I'm developing now. I was stuck in this concept of modules and plugins and couldn't figure out what it actually is. Next step was image optimization and transforming current PNGs and JPEGs into WebPs — and that became a pain in the ass.

We all read posts like this to see a working example, so here it is!

Inject lazysizes

npm i lazysizes — no need to explain.

Then create a vue-lazysizes.client.js file and put it into @/plugins/ folder. .client in the name signalizes server that this plugin shouldn't be run on server — it's important! This file shoud contain just two lines:

import lazySizes from 'lazysizes'
export default lazySizes

Configure nuxt.config.js:

module.exports = {
  build: {
    extend (config, { isDev, isClient, loaders: { vue } }) {
      if (isClient) {
        vue.transformAssetUrls.img = ['data-src', 'src']
        vue.transformAssetUrls.source = ['data-srcset', 'srcset']
      }
    }
  },
  plugins: [
    '~/plugins/vue-lazysizes.client.js'
  ]
}

You can see that our "plugin" is inserted and in build key we extend Webpack config, so vue-loader can transform aliases in data-srcset, data-src and srcset attributes in <img> and <source> tags — we'll need it in future.

That's all! Now you can make images "lazy" as you usually do:

<figure class="picture">
  <img data-src="~assets/images/image.png" class="lazyload" alt="Alternate text for the image">
</figure>

Image optimization & convertation to WebP

But what about making images smaller and loading WebP images + fallback? After hours of struggling and many attempts with whole bunch of npm-packages I found brilliant module nuxt-optimized-images. I prefer to use mozjpeg and pngquant for JPEG and PNG optimization respectively.

And this is how it should be cooked:

npm i @bazzite/nuxt-optimized-images imagemin-mozjpeg imagemin-pngquant webp-loader --save-dev — installation of dependencies.

Configure nuxt.config.js:

module.exports = {
  modules: [
    '@bazzite/nuxt-optimized-images',
  ],

  optimizedImages: {
    inlineImageLimit: -1,
    handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
    optimizeImages: true,
    optimizeImagesInDev: false,
    defaultImageLoader: 'img-loader',
    mozjpeg: {
      quality: 85
    },
    optipng: false,
    pngquant: {
      speed: 7,
      quality: [0.65, 0.8]
    },
    webp: {
      quality: 85
    }
  }
}

Settings in optimizedImages key are arguable, but this is my choice.

After all these manipulations you can use this snippet finally:

<figure class="picture">
  <picture>
    <source data-srcset="~assets/images/image.png?webp" type="image/webp">
    <source data-srcset="~assets/images/image.png" type="image/png">
    <img data-src="~assets/images/image.png" class="lazyload" alt="Alternate text for the image">
  </picture>
</figure>

Note that WebP image source is added with ?webp.

With this great module you can go further and create, for instance, small SVG-fallback and use it while big image is loading. You can create responsive images, generate fallback color and (probably) much more. But let it be your homework for today.

Thanks for reading and I hope you'll find this post with Google before you spend couple of days on experiments like me.