Projections

В JS изменяются значения CSS переменных, которые используются для создания эффекта drop-shadow.

👉 @seniorFront

Single digit

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

Примеры:
5665 --> (binary) 1011000100001
1011000100001 --> (sum of binary digits) 5

123456789 --> (binary) 111010110111100110100010101
111010110111100110100010101 --> (sum of binary digits) 16
16 --> (binary) 10000
10000 --> (sum of binary digits) 1

👉 @seniorFront

Samokat.teсh Meetup — QA

Когда: 31 августа (четверг), 18:00 – 19:30
Формат: онлайн
Бесплатно для всех желающих

Приходите на Samokat.teсh Meetup про QA! Послушаем спикеров из Samokat.teсh и Яндекс Финтех.

В программе — сравнение заглушек, оценка возможности дебага и мониторинга итогового решения, опыт внедрения стратегии тестирования карт для водителей Яндекс Такси и встраивания проекта в существующий релизный процесс. Только конкретные примеры из практики и личный опыт спикеров.

Доклады:

18:00-18:45 — Единый заглушечный контур для тестирования — Ирина Лифанова, SRE, Samokat.teсh

18:45-19:30 — Построить тестирование и не сломать себя и бизнес — Роман Радин, Lead QA, Яндекс Финтех

Будет интересно тестировщикам и разработчикам.

✅ Регистрация и чат митапа.


Реклама ООО «Умное пространство» ИНН
7811554010 erid: LatgBXGvT

3D Globe with location pointer

Создано при помощи библиотеки gsap. Логика создания точек реализована в JS.

👉 @seniorFront

​На что стоит обратить внимание при разработке мультиязычных сайтов?
При разработке мультиязычных сайтов необходимо обратить внимание на следующие аспекты:

1. Выбор подходящей системы управления контентом (CMS). Некоторые CMS, такие как WordPress и Drupal, предоставляют встроенную поддержку мультиязычности, что может значительно упростить разработку и управление мультиязычными сайтами.

2. Кодирование текста и использование правильных языковых символов. Кодировка должна соответствовать требованиям языков, на которых будет отображаться сайт. Например, для языков, использующих кириллицу, должна быть выбрана кодировка UTF-8.

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

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

5. Тестирование и отладка. Необходимо тщательно протестировать все языковые версии сайта, чтобы убедиться, что контент отображается корректно, а функциональность работает правильно на всех языках.

6. SEO-оптимизация для каждого языка. Для каждой языковой версии сайта необходимо провести SEO-анализ и оптимизировать контент, мета-теги и другие аспекты для местных поисковых систем и языковых запросов пользователей.

👉 @seniorFront

Яндекс Практикум запустил бесплатный курс по алгоритмическим собеседованиям. Курс поможет студентам подготовиться к таким интервью, чтобы устроиться на работу в крупные IT-компании.

Уроки сделаны на основе курса «Алгоритмы и структуры данных»‎, но здесь полностью бесплатны.
Курс будет полезен тем, кто знаком с алгоритмами, и тем, кто только планирует их изучать:
→ знатоки смогут применить умения на практике;
→ новички смогут сориентироваться и понять, на что стоит обратить внимание.

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

Авторы курса — опытные разработчики, которые прошли, провели и оценили не одну сотню алгоритмических интервью. Они собрали всю нужную информацию об алгоритмических собеседованиях в одном месте и на русском языке.

Начинайте готовиться вместе с Практикумом

Реклама АНО ДПО "Образовательные технологии Яндекса", ИНН:7704282033, erid: LjN8KAkbm

Glowing Blob Effect

Анимация и генерация букв реализованы в JS.

👉 @seniorFront

Как я стал фронтендером

1. Смотрел уроки на ютубе
2. Делал портфолио на гитхаб
3. Начал читать Frontend || Vollex

Frontend Vollex выжимает воду из курсов, книг, видеоуроков и заботливо делится самым главным. Гайды, готовый код, тесты и никакой копипасты.

Вы знаете, что делать: @vollex_frontend

Inner Radius Design Tip with CSS Custom Properties

Меню параметров создаётся при помощи библиотеки dat.gui. В JS задаются значения CSS переменных.

👉 @seniorFront

Menu Hover Effects

В этом видео создается кастомный курсор и эффект свечения при наведении на CSS и JS.

👉 @seniorFront

🇪🇸 Лучшая страна в Европе для переезда для IT специалистов 🇪🇸

Хотите жить в спокойной стране и дружелюбной среде?
Если ваша цель получения ВНЖ в Европе, рекомендуем скорее воспользоваться шансом!

Наши друзья из Outbox, сделают за вас всю неприятную работу от оформления шенгенской визы, сбора всех документов до подачи документов на ВНЖ и подбором жилья.
С ними ваш переезд будет без стресса, т.к ребята прошли весь процесс релокации сами и получили бесценный опыт!

❗️До 7 сентября осталось 4 места на бесплатную консультацию по получению ВНЖ в Испании! Успейте записаться по ссылке
@outbox_tm

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

👉 @seniorFront

image sider

В JS отслеживается значение input с type="range",которое устанавливается в CSS переменную.

👉 @seniorFront

Ripple Loader

Оригинальный загрузчик на чистом CSS.

👉 @seniorFront

Glowing Letter Effects

В этом видео создаётся эффект при движении курсора на CSS и JS.

👉 @seniorFront

Range Sliders

Создано на React, стилизовано в CSS.

👉 @seniorFront

Generate Chat Room Names

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

1. Если в чате находится только один человек с уникальным именем, то должно отображаться только имя.
John Smith -> John

2. Если в чате два человека с одинаковым именем, но инициал фамилии у них разный, то отображаем имя с инициалом.
John Smith -> John S
John Adams -> John A

3. Если в чате два человека с одинаковыми именами и инициалами, то отображаем полностью fullName
John Smith -> John Smith
John Simms -> John Simms

👉 @seniorFront

Magnetic Pastel button

В JS создан listener на событие mousemove, в котором устанавливаются стили кнопки.

👉 @seniorFront

В чём разница между inline и inline-block?

Значение display: inline используется для элементов, которые отображаются в группе слов рядом с другими элементами, например в параграфе. Размеры строчных элементов определяются содержимым, так что установить их через CSS-свойства не получится. Так же не выйдет указать для них вертикальные margin и padding. Пример строчных элементов это <span> и <a> — свойство display: inline устанавливается для них браузером по умолчанию.

Элементы с display: inline-block также располагаются в потоке текста, но вы можете установить размеры такому элементу, а так же любые значения margin и padding. Это позволит элементу отображаться в строке, но занимать пространство как блочному элементу. Примеры элементов со значением display: inline-block по умолчанию: <button> или <textarea>.

👉 @seniorFront

Loader

Разделение клеток сделано при помощи библиотеки Splitting.js, анимировано библиотекой gsap.

👉 @seniorFront

​Вавилонское сайтотворение: как фронтендеры и дизайнеры понимают друг друга

Дизайнер и фронтенд-разработчик — не чужие друг другу люди. Оба делают части одного большого дела и общаются если и не постоянно, то регулярно. И всё же их языки во многом отличаются. Да и не только языки — сами образы мышления.

Временной разлом
Если взглянуть на дорожную карту проекта, разработчик и дизайнер существуют в разных точках по оси времени и общаются между собой, используя Доктора Кто в качестве курьера. Для дизайнера продукт готов, он в настоящем и даже немножко в прошлом, в этаком Present Perfect. Для фронтендера такое же состояние проекта — это более или менее отдалённое будущее.
В идеале все вопросы надо обсудить сразу, пока открыт временной разлом, объединяющий дизайнера и фронта. Но это не всегда возможно. Разработчик должен перенестись в будущее и заранее представить все проблемы, с которыми он может столкнуться.
Решение — поддерживать связь. Пока идёт общение, временной разлом не затянется. Ну и отличная идея — все мутные моменты прояснять сразу же, а не копить на свой или чужой дедлайн.

Есть ещё гриды в гридницах
Грид — очень распространённая абстракция в веб-дизайне, да и не только в веб. Но у дизайнеров и разработчиков гриды разные.
Грид дизайнера измеряется в пикселях. Грид разработчика — в процентах, в долях блока. У разработчика в голове — адаптивность, универсальность. У дизайнера — конкретная картинка. В результате нередко оказывается, что пиксель пёрфект не очень-то пёрфект.
Свобода творчества — это, безусловно, хорошо, но когда твоё творчество потом высекают в HTML/CSS — хорошо бы подумать о комфорте скульптора.

Вупсень и Пупсень… в смысле, пэддинг и марджин
Ни один фронтендер в здравом уме не перепутает padding и margin. И не потому что на фартуках разное количество ягод, а потому что — ну совсем разные же вещи. Допустим, padding входит в box-sizing, а margin — нет. С помощью margin можно центрировать элемент, а с помощью padding — нет. Не говоря уже про margin collapse и другие нюансы, тьма их.
Для дизайнера отступ есть отступ. Конечно, хороший дизайнер должен что-то понимать в вёрстке. Но всё это внешнее, наносное, мышление такими категориями чуждо дизайнерскому художественному восприятию.

Буква Г — лоГика
Даже когда речь идёт о статичной странице, существуют проблемы взаимопонимания. Интерактив — это проблемы в квадрате.
Дизайнер методично прорисовывает каждое состояния элемента. Логика, стоящая за этими состояниями, для него вполне очевидна. Он отдаёт макет фронтендеру. Фронтендер смотрит — да, логика действительно очевидна. И немедленно имплементирует её. То, что очевидность у них разная, становится ясно сильно потом, когда уже закрылся временной разлом.

👉 @seniorFront