​Анимированная таблица Менделеева на JavaScript

В этом проекте каждый элемент анимирован в зависимости от агрегатного состояния вещества: твёрдого, жидкого или газообразного. Посмотрите, как это реализовано с точки зрения кода:

https://codepen.io/dilums/pen/oNzyeEv

#codepen #javascript

Ну конечная цель ведь достигнута

​Как стать известным в мире программирования

В новом выпуске подкаста Frontend Weekend компанию Анрдею Смирнову составил Никита Дубко. Никита крутой фронтенд-разработчик и ведущий не менее крутого подкаста «Веб-стандарты». Они обсудили работу в Минске, как Никита стал Google Developer Expert, борьбу с синдромом самозванца и многое другое.

Посмотреть или послушать можно тут:

https://youtu.be/6Gx_nP2u-jU

#подкаст

​Парсинг сайтов с использованием библиотеки Goutte

Сегодня для парсинга всё чаще используется Python, но это не единственный язык с помощью которого можно эффективно извлечь данные с сайта. Благодаря библиотеке Goutte эффективно заниматься парсингом можно и на PHP. О том как это сделать, читайте в статье:

https://tproger.ru/articles/skraping-s-goutte-crawler-parsing-sajtov-s-ispolzovaniem-biblioteki-goutte/

#парсинг #goutte #php

​Создание реального приложения dApp с помощью React, Solidity и Web3.js

Сегодня как никогда остро стоит вопрос децентрализованного интернета и сейчас самое время познакомиться с технологиями, которые позволяют реализовать сервис для интернета нового поколения.

Эта статья покажет вам азбуку того, как создать децентрализованное приложение с нуля и настроить среду разработки:

https://habr.com/ru/post/653679/

#web3 #react #solidity

​Создание индикатора прогресса чтения в React и TailwindCSS

Такой индикатор — это отличная фича для сайта, где могут быть размешены лонгриды или иные материалы с объёмным содержанием. Он позволяет лучше следить за временем и понимать сколько вам осталось до конца текста.

В этой статье вы научитесь реализовывать собственную версию такого индикатора:

https://javascript.plainenglish.io/creating-a-read-progress-bar-in-react-and-tailwindcss-34f84435ab79

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

"" — то, за что мы "любим" JS

Продавите кнопку, чтобы отправить данные

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

Попробуйте сами:

https://codepen.io/aaroniker/pen/NWqyego

#codepen

​Генератор компонентов Vue.js

В этой статье вы познакомитесь с инструментом, который называется VGENT. VGENT (Vue Agent) — это CLI (Command Line Interface) приложение, которая генерирует компоненты для фреймворка Vue.js или Nuxt.js. Данный инструмент можно гибко настроить под нужды проекта, и генерировать компоненты командами в терминале.

О том, как он работает, можно узнать здесь:

https://habr.com/ru/post/653537/

#vue #инструменты

​Практический пример использования CSS Layer

Держите понятный пример правильного использования CSS Layer. Теперь вы будете наверняка знать, когда его стоит применить:

https://habr.com/ru/post/652047/

#фронтенд #css

​React Drag & Drop: «Игра в бутылки»

Да, на праздниках многие играют в другую игру с бутылками, но и с пользой проводить время тоже нужно. Держите руководство по созданию головоломки из Гарри Поттера на React. Вы сможете реализовать не только логику игры, но и красивый дизайн и интересный UI.

https://habr.com/ru/company/kts/blog/647241/

#react

И ведь не пофиксишь

​Резиновая вёрстка: универсальная сетка под все брейкпоинты, примеры и правила

Благодаря этой статье дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. А верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток. Убедитесь сами:

https://tproger.ru/articles/rezinovaja-verstka-universalnaja-setka-pod-vse-brejkpointy-primery-i-pravila/

#фронтенд

​Как использовать nextTick() в Vue

Изменение данных компонента Vue (реквизиты или состояние) не сразу отражается в DOM. Скорее, Vue обновляет DOM асинхронно. Вы можете поймать момент, когда Vue обновляет DOM, используя Vue.nextTick() или vm.$nextTick() функции. 

Давайте подробно рассмотрим, как работают эти функции:

https://dmitripavlutin.com/vue-next-tick/?utm_campaign=how-to-use-nexttick-in-vuenexttick

#vue

Легаси-код в наследство

​Как наглядно понять работу Kubernetes?

Ну, например, можно настроить управление им в Minecraft и смотреть какие процессы при этом происходят на примере окружения и животных. Звучит безумно? А выглядит ещё безумнее:

https://www.youtube.com/watch?v=IzgsgDADdyc

#видео #devops #kubernetes

​Как инженеру не умереть со скуки во фронтенде?

В новом выпуске подкаста Frontend Weekend Андрей Смирнов пообщался с Полиной Гуртовой, фронтенд-разработчиком компании «Злые Марсиане» и обсудил, сложный ли фронтенд или его просто усложняют ради веселья разрабов, а также остановился ли он в своём развитии и имеет ли ещё место быть Hype Driven Development.

Смотрим:

https://youtu.be/5e2Pma2b2yQ

#видео #подкаст

​NoJS — делаем калькулятор с использованием только чистого HTML и CSS

Самый логичный способ создания калькулятора, работающего на веб-странице — JavaScript, верно? Но автор этой статьи явно не ищет легких путей, поэтому сделал калькулятор с помощью чистых HTML и CSS (даже без препроцессоров), используя радио-кнопки, хитрость и немного магии.

Что в итоге получилось, можно узнать тут:

https://blog.scottlogic.com/2022/01/20/noJS-making-a-calculator-in-pure-css-html.html

#html #css

Анимация логотипа GitHub на CSS

Эта анимация выполнена без использования JavaScript. Вместо этого все элементы написаны на HTML-препроцессоре Pug, а сама анимация настроена в CSS-препроцессоре Stylus.

Подробнее код можно изучить здесь:

https://codepen.io/toshiya-marukubo/pen/qBPryZb

#codepen #css