​Реализация быстрой сортировки на JavaScript

Пишем классический алгоритм эффективной сортировки на JavaScript.

Суть быстрой сортировки заключается в выборе "опорного" элемента и разделении массива на две части - меньше и больше опорного. Алгоритм рекурсивно повторяется для каждого подмассива, пока все элементы не будут отсортированы.

Подробнее: https://jem-space.ru/riealizatsiia-bystroi-sortirovki-v-javascript/

#javascript #algorithms

Как отлаживать чужой JavaScript код

Поиск ошибок в чужом коде может быть очень утомительным занятием. Автор статьи делится собственной техникой дебаггинга, которая основана на переопределении нужных свойств объектов с помощью Object.defineProperty.

Читать: https://itnext.io/how-i-debug-javascript-code-i-didnt-write-6c405a6a9103

#javascript #debugging

​Руководство по setTimeout: sleep, wait, delay и pause в JavaScript

В JavaScript нет нативного способа поставить выполнение кода на паузу, поэтому давайте реализуем его самостоятельно с помощью старого-доброго setTimeout и свеженького модного async/await.

Читать: https://www.freecodecamp.org/news/javascript-sleep-wait-delay/

#javascript

​50 бесплатных ресурсов для создания веб-интерфейсов

Большой список полезных бесплатных ресурсов для создания веб-интерфейсов: иллюстрации, фото и видео, шрифты, цветовые палитры, иконки, анимации и прочие элементы:

https://proglib.io/p/50-besplatnyh-resursov-dlya-sozdaniya-veb-interfeysov-2020-05-16

#assets

Познай тайны Flexbox

Видео-курс, посвященный Flexbox-модели в CSS. Наглядный детальный разбор всех свойств и примеры их использования.

Смотреть: https://www.youtube.com/playlist?list=PL_uwZ1gR-hzJob04JV6m7eksx_MPnvDws

#video #css #layout

​5 способов документировать React-компоненты

Компоненты делают код гибким и переиспользуемым. Документированные компоненты к тому же делают его понятным и поддерживаемым. Поэтому документируйте ваши компоненты - в 2020 это даже необязательно делать вручную!

Cтатья рассматривает 5 популярных сервисов для удобной работы с компонентами:

👉 Bit
👉 React Styleguidist
👉 React-Docz
👉 React-docgen
👉 Storybook

Примеры установки и использования прилагаются 😉

Читать: https://blog.bitsrc.io/5-ways-to-document-react-components-in-2020-ecf60f24dee8

#tools #components #react

​Все, что вы должны знать об атрибуте inputmode

Атрибут inputmode указывает браузеру, какую клавиатуру следует отображать на девайсе для введения данных, не меняя при этом тип поля ввода.

Очень полезная фича, особенно для специфических данных типа email или номера телефона, для которых приходится постоянно переключать наборы символов.

Самые популярные значения:
- none
- numeric
- tel
- email
- search

Узнать больше: https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/

#html #inputmode #interface

«Разработчик Node.js» - это онлайн-курс о разработке серверных приложений на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js. Хотите узнать больше?

10 июня в 20:00 присоединяйтесь ко Дню открытых дверей, бесплатно и online: https://otus.pw/jPya/
Преподаватель расскажет о программе курса, формате обучения и перспективах для выпускников.

Первые 20 участников, зарегистрировавшихся на этот вебинар, получат Сертификат на скидку на электронную почту в течение 1-2 дней после трансляции.

Еще 10 сертификатов на скидку распределим в прямом эфире между теми, кто записался на вебинар. Запись на участие в акции закрывается в день проведения вебинара в 16:00 (полные правила акции читайте на сайте https://otus.ru/legal/promo/)

Применить Сертификат можно только после успешного прохождения вступительного тестирования.

Готовьте вопросы, сдавайте вступительный тест и присоединяйтесь!

​Правильный ответ: 1

О неявной конверсии типов в JavaScript и порожденных ей курьезах можно говорить бесконечно.
Однако она открывает огромные возможности для того, кто знает, с какой стороны подойти.

😲 Почти любой код на JS можно написать с помощью всего лишь 6 символов:

[]()!+

Не верите? Смотрите сами: https://javascript.christmas/2019/17

#javascript #coersion #core

Если вы разработчик полного цикла и жонглируете скриптами, как Илон Маск ракетами, клиенты оторвут вас вместе с компьютером. Вы уже молодцы. А для тех, кто только в начале пути, образовательный портал GeekBrains от Mail.ru Group запустил бесплатный интенсив  «Веб-разработка для начинающих». Всего 2 часа –– и билет в профессию у вас в кармане.

Чему научат:
⚡️Создавать небольшие сайты.
🔹Использовать хостинги и публиковать сайты в интернете.
❗️Работать с языком разметки HTML/CSS.
👍Быть молодцом.

Научитесь делать сайты и зарабатывать на этом!

Записаться на вебинар можно по ссылке https://geekbrains.ru/link/2dOJvN

Круглый прогресс-бар на JavaScript

Создание симпатичного динамического прогресс-бара.

Смотреть: https://www.youtube.com/watch?v=amrIqeOXQW0&feature=youtu.be

#video #javascript #snippets #interface

​Инструменты для работы с HTTP-запросами в Node.js

Практически любое интерактивное приложение предполагает взаимодействие между клиентом и сервером - а значит, HTTP-запросы. Существуют десятки решений, чтобы сделать работу с ними проще, но выбирать их нужно с умом.

Некоторые представляют собой высокоуровневые абстракции, скрывающие сам объект запроса. Другие считают любой статус ответа кроме 200 ошибкой. А как насчет прерывания запроса до его окончания?

Разбираемся в теме: https://medium.com/@tlivings/instrumenting-http-requests-in-node-5bf48c10f1c0

#node #http #tools

​​Когда деревья были большими, а смартфоны еще не изобрели, выход в интернет с любого устройства, помимо компьютера был пыткой. Помните, как сложно было пытаться прочитать на маленьком экране Моторолы или Нокиа хоть что-то, кроме названия сайта?
Но время идёт, и сейчас любая компания имеет сайт mobile-friendly, чтобы пользователю было удобно читать новости, делать покупки, используя только смартфон.

Спасибо за это стоит сказать frontend-разработчикам, придумавшим адаптивную вёрстку, которая подстраивается под экран телефона. Фронтенды вообще молодцы ー пользу приносят, да и зарплаты у них хорошие… Хочешь так же? SkillFactory предлагает стать фронтенд-разработчиком с нуля за 6 месяцев. Теоретические блоки по HTML и CSS, JavaScript и видам вёрстки чередуются с практическими заданиями в специальном тренажёре.
Курс рассчитан на новичков в разработке и на тех, кто хочет повысить свой скилл во фронтенде. В свою очередь, команда наставников и персональный ментор всегда придут на помощь.

🤩Подписчикам канала "Библиотека фронтендера" дарим спец.скидку –40% до 10 июня! Успейте записаться на курс по промокоду JUNE40: https://clc.to/C27YZQ

P.S. Просто шепните промо на ушко менеджеру, и он активируется😉

​Интересное использование псевдоэлементов :before и :after

Псевдоэлементы в CSS существенно расширяют возможности стилизации, превращая один элемент в целых три.
Статья рассказывает о простых и сложных кейсах их использования:

👉 добавление иконок
👉 кавычки для цитат
👉 создание форм и фигур
👉 вывод значений атрибутов
👉 сложная анимация

Подробнее: https://zendev.com/2019/03/28/cool-uses-of-before-after-pseudoelements.html

#css

​Микробраузеры повсюду

Веб давно не ограничивается привычными нам браузерами - ведь повсюду микробраузеры! Они не учитываются в вашей аналитике, но вносят огромный вклад в привлечение пользователей.

Статья рассказывает, почему микробраузеры важнее, чем google-бот и как адаптировать для них ваш сайт.

Читать: https://24ways.org/2019/microbrowsers-are-everywhere/

#browser #seo

​Правильный ответ: 160px

Если величина паддинга задана в процентах, она рассчитывается от *ширины* родительского блока, которая равна 320px.

Описание свойства на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom

Понимание относительных единиц измерения в CSS часто становится проблемой для  верстальщиков. Однако в условиях современного веба они очень важны.

Не забываем про зум и пользовательские настройки при тестировании страницы: https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/

#css #responsive