Библиотека Splide для создания качественных каруселей

Splide.js — это легковесная, гибкая, доступная и универсальная библиотека для создания слайдеров и каруселей. С помощью неё вы сможете добавит карусель в ваше приложение несмотря на то, используете вы чистый JavaScript, TypeScript, React, Vue или ещё какое решение.

Познакомиться ближе можно тут:

https://splidejs.com/

#фронтенд #библиотека #javascript

​JavaScript-разработчик выбирает библиотеку для текущего проекта:

​Предотвратите цепочку прокрутки с помощью поведения Overscroll

CSS-свойство overscroll-behavior позволяет нам контролировать прокрутку отдельных элементов и непосредственно страницы веб-сайта, предотвращая нежелательное поведение. Если раньше это решалось с помощью хитрых манипуляций, то теперь достаточно одного свойства.

Посмотрите, как это работает:

https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/

#css

Ребята из Cedro Agency ищут разработчика с опытом от 3 лет, который разбирается в PHP и «1С-Битрикс»

Cedro — это диджитал-агентство из Питера. Делают цифровые продукты и сервисы. Успели поработать с «Леруа Мерлен», GeekBrains, «Группой ЛСР» и другими классными компаниями. Входят в топ-30 студий СПб и несколько раз выиграли на Awwwards.

Что требуется:
— писать свой код и редактировать чужой;
— участвовать в разработке корпоративных сайтов, интернет-магазинов и промо-страниц;
— работать с БУС;
— делать интеграции с внешними системами на php и python;
— натягивать вёрстку на код.

Что предлагают:
— заработную плату от 100 тысяч рублей;
— возможность работать удалённо или в лофтовом питерском офисе на Нарвской на ваш выбор;
— задачи напрямую от техлида без необходимости коммуникацией с клиентом и менеджерами;
— адекватный коллектив.

Подробности можно узнать на странице в Ноушен

#вакансия

​Большие, малые и динамические вьюпорты

CSSWG определила несколько дополнительных размеров области просмотра и сопутствующие единицы измерения , относящиеся к области просмотра, в дополнение к уже существующим vw/vh/vmin/vmax. Теперь можно определить значения для различных вьюпортов, например для различных способов отображения интерфейса мобильного браузера и прочего.

Подробнее:

https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/

#фронтенд #css

CSS Speedrun

Насколько хорошо вы знаете CSS и, в частности, умеете работать со списками? Предлагаем вам проверить свои знания в CSS Speedrun, где вам нужно выполнить 11 заданий на время.

Переходите по ссылке, выполняйте все задачи и делитесь скриншотом своего результата в комментариях:

https://css-speedrun.netlify.app/

#css

​Переменные CSS для разработчиков React

В этой статье Джош Камю показал, как применение современных кастомных свойств упрощает разработку приложения на React:

https://www.joshwcomeau.com/css/css-variables-for-react-devs/

#фронтенд #react #css

С этим сталкивался каждый начинающий фронтендер

​Великолепное Aspect Ratio

Для того, чтобы раньше обеспечить нужное соотношение сторон у блока необходимо было писать кучу костыльного CSS-кода. Но теперь, благодаря всего одному css-свойству, этот вопрос решается всего одной строчкой. Более того, это свойство крайне удобно использовать для самых разных целей.

Подробнее:

https://css-irl.info/aspect-ratio-is-great/

#css

Переключатель на чистом CSS

Красивый переключатель с качественной анимацией, выполненной без использования JavaScript. Эффект свечения достигнут благодаря грамотному использованию теней.

Изучить проект можно тут:

https://codepen.io/Wujek_Greg/pen/Bqvzbp

#codepen #css

​15 важных JavaScript методов для веб-разработчиков

Методы о которых пойдёт речь сегодня нужны для работы с DOM, поэтому, вероятно, вы будете часто обращаться к ним. Чем быстрее вы изучите и запомните их, тем скорее сможете эффективно манипулировать всем DOM-деревом.

https://tprg.ru/83xz

#javascript

​9 инструментов CSS, которые пригодятся в 2022 году

Написание хорошего кода CSS с нуля может занять много времени, особенно при разработке большого проекта. К счастью, в интернете есть множество бесплатных инструментов CSS.

Подробнее о них в этой статье:

https://nuancesprog.ru/p/15045/

#css

Создаём доступную якорную ссылку «skip-to-content» с помощью React

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

Как реализовать универсальный скиплинк на React рассказали тут:

https://levelup.gitconnected.com/build-an-accessible-skip-to-content-anchor-link-with-react-140903f3bd7e

#react

​Обновление больших массивов данных в Laravel

Иногда вам нужно обновить данные в вашей БД. Самый простой способ — просто запустить обновление в вашей базе данных MySQL. Но такой способ не всегда подходит.

В этой статье предлагается использовать метод chunk для обновления. Вот как это сделать:

https://42coders.com/how-to-update-large-data-in-laravel

#php #laravel

Лоадеры на чистом CSS

6 лоадеров для вашего проекта, выполненные на чистом CSS с использованием @keyframes. Забирайте скорее:

https://codepen.io/AlexWarnes/pen/jXYYKL

#css #codepen

​10 вопросов для интервью на начальном уровне React

В этой статье собран базовый список вопросов, которые могут задать во время интервью. Например, что такое виртуальный DOM, почему сейчас принято использовать стрелочные функции для компонентов, для чего нужно ключевое слово key и так далее.

Больше вопросов и ответов на них здесь:

https://javascript.plainenglish.io/10-entry-level-react-interview-questions-5a8ea74e2130

#react

​Инструкция по созданию круговой диаграммы на чистом CSS

Круговая диаграмма может пригодиться в самых разных случаях — уведомлять о статусе загрузке контента, для отображения какой-либо статистической информации и много чего ещё. В этой статье вы найдёте инструкцию по быстрому созданию такой круговой диаграммы с использованием только CSS:

https://www.freecodecamp.org/news/css-only-pie-chart/

#css

​5 приёмов в TypeScript, которые помогут вывести ваш код на новый уровень

В этой статье речь пойдёт о приёмах, которые помогут прокачать навык даже опытного TypeScript-разработчика. Здесь вы узнаете об улучшенной проверке с помощью includes, использовании обратного вызова для инкапсуляции кода и так далее.

Подробнее:

https://obaranovskyi.medium.com/top-5-techniques-in-typescript-to-bring-your-code-to-the-next-level-6f20be543b39

#typescript

​Комплексная разработка веб-приложений с помощью React и Node.js

Чтобы разработать полноценный сайт и настроить сервер достаточно всего одного языка программирования — JavaScript. Просто берём JS, добавляем Node.js для организации сервера и React для быстрого создания фронтенда.

Чем хороша такая связка и какие особенности имеет, узнаете тут:

https://nuancesprog.ru/p/15133/

#react #nodejs

​Адаптивная фавиконка

В этой статье и видео автор предлагает рассмотреть способ создания фавиконки, которая подстраивается под цветовую схему браузера пользователя. Таким образом она всегда выглядит органично независимо от предпочтений пользователя.

Подробнее в статье:
https://web.dev/building-an-adaptive-favicon/

Или в видео: https://youtu.be/4pJahmCR8kQ

​Колобок? Курочка Ряба? А может лучше...