This media is not supported in your browser
VIEW IN TELEGRAM
Визуализированный JavaScript: движок JavaScript
Мы с вами знаем, что код, написанный на JavaScript, обрабатывается движком. В Chrome это, например, V8. Но это лишь общие слова. Куда интереснее понять, как именно это происходит и какие процессы в этом задействованы.
Вообще, это достаточно сложная тема, но благодаря этой статье и понятным анимациям всё становится в разы проще. Убедитесь сами:
https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf
#javascript
Мы с вами знаем, что код, написанный на JavaScript, обрабатывается движком. В Chrome это, например, V8. Но это лишь общие слова. Куда интереснее понять, как именно это происходит и какие процессы в этом задействованы.
Вообще, это достаточно сложная тема, но благодаря этой статье и понятным анимациям всё становится в разы проще. Убедитесь сами:
https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf
#javascript
👍30🔥6
Полное руководство по CSS анимации для начинающих
В этом руководстве по анимации с помощью @keyframes будет рассмотрен весь синтаксис, включая каждое из свойств. Здесь также присутствуют интерактивные демонстрации, чтобы вам было проще понять как и что работает.
https://themeisle.com/blog/css-animations-tutorial/
#css #фронтенд
В этом руководстве по анимации с помощью @keyframes будет рассмотрен весь синтаксис, включая каждое из свойств. Здесь также присутствуют интерактивные демонстрации, чтобы вам было проще понять как и что работает.
https://themeisle.com/blog/css-animations-tutorial/
#css #фронтенд
👍37
Интеграция SvelteKit с Backendless
Вы когда-нибудь работали с Backendless? Это платформа Backend as a Service, которая позволяет без какого-либо кода настроить бэкенд приложения.
В этой серии статей вы изучите полное руководство по интеграции SvelteKit с Backendless, настроите вход и регистрацию, маршрутизацию и многое другое:
https://dev.to/brewhousedigital/integrating-sveltekit-with-backendless-3gip
#svelte #backendless
Вы когда-нибудь работали с Backendless? Это платформа Backend as a Service, которая позволяет без какого-либо кода настроить бэкенд приложения.
В этой серии статей вы изучите полное руководство по интеграции SvelteKit с Backendless, настроите вход и регистрацию, маршрутизацию и многое другое:
https://dev.to/brewhousedigital/integrating-sveltekit-with-backendless-3gip
#svelte #backendless
👍7
Что такое TCP/IP: Объясняем на пальцах
Ну хорошо, допустим, вы умеете верстать страницы. Даже можете выложить свой сайт на Heroku или куда-то ещё. А знаете ли вы, как при этом пользователи получают доступ к вашему сайту? Что за IP такой, зачем он нужен и как по нему вычисляют обидчиков?
Все подробности в этом видео:
https://youtu.be/2I1HnSN1H9o
#видео #сеть
Ну хорошо, допустим, вы умеете верстать страницы. Даже можете выложить свой сайт на Heroku или куда-то ещё. А знаете ли вы, как при этом пользователи получают доступ к вашему сайту? Что за IP такой, зачем он нужен и как по нему вычисляют обидчиков?
Все подробности в этом видео:
https://youtu.be/2I1HnSN1H9o
#видео #сеть
🔥18👍6😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Создавайте 3D-визуальные эффекты в Vue с помощью Lunchbox.js
Lunchbox.js — это пользовательский рендерер для Three.js, который упрощает работу с ним. И он отлично сочетается с Vue. В этой статье вы узнаете всё, что нужно, чтобы начать создавать крутые 3D-визуальные эффекты:
https://blog.logrocket.com/build-3d-visuals-vue-lunchbox-js
#vue #lunchbox
Lunchbox.js — это пользовательский рендерер для Three.js, который упрощает работу с ним. И он отлично сочетается с Vue. В этой статье вы узнаете всё, что нужно, чтобы начать создавать крутые 3D-визуальные эффекты:
https://blog.logrocket.com/build-3d-visuals-vue-lunchbox-js
#vue #lunchbox
👍8
Обратные вызовы JavaScript за 5 минут
Обратные вызовы, или коллбэки — неотъемлемая часть JavaScript, без понимания которой вам будет сложно развиваться в качестве JS-разработчика. И многим поначалу эта тема может показаться сложной, но на самом деле при правильном объяснении понять её можно буквально за 5 минут.
По этой ссылке вы найдёте статью и видео, где простыми словами объясняется принцип работы функций обратного вызова — выбирайте сами в каком формате вам будет изучить этот вопрос:
https://jamesqquick.hashnode.dev/javascript-callbacks-explained-in-5-minutes
#javascript
Обратные вызовы, или коллбэки — неотъемлемая часть JavaScript, без понимания которой вам будет сложно развиваться в качестве JS-разработчика. И многим поначалу эта тема может показаться сложной, но на самом деле при правильном объяснении понять её можно буквально за 5 минут.
По этой ссылке вы найдёте статью и видео, где простыми словами объясняется принцип работы функций обратного вызова — выбирайте сами в каком формате вам будет изучить этот вопрос:
https://jamesqquick.hashnode.dev/javascript-callbacks-explained-in-5-minutes
#javascript
👍18
Рекурсия против Циклов в JavaScript
Многие боятся рекурсию, потому что не понимают её из-за сложности восприятия. Но в некоторых ситуациях она может не только облегчить написание кода, но даже сделать его более читаемым по сравнению с решением на циклах.
В этой статье приведено пять примеров, где наглядна показана эта разница в подходах. Возможно, так вам станет понятнее как правильно работать с рекурсией и где она может быть применена.
https://dev.to/thawkin3/recursion-vs-loops-in-javascript-14em
#javascript
Многие боятся рекурсию, потому что не понимают её из-за сложности восприятия. Но в некоторых ситуациях она может не только облегчить написание кода, но даже сделать его более читаемым по сравнению с решением на циклах.
В этой статье приведено пять примеров, где наглядна показана эта разница в подходах. Возможно, так вам станет понятнее как правильно работать с рекурсией и где она может быть применена.
https://dev.to/thawkin3/recursion-vs-loops-in-javascript-14em
#javascript
😁3👍2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Ужасный UX с непослушными кнопками
В представленном проекте автор реализовал мечту всех блогеров: здесь кнопка для отписки никогда не дастся вам в руки, зато кнопка «подписаться» так и просится, чтоб её нажать.
Посмотреть как это реализовано и попробовать победить кнопки можно тут:
https://codepen.io/jh3y/pen/KKvvPrP
#codepen
В представленном проекте автор реализовал мечту всех блогеров: здесь кнопка для отписки никогда не дастся вам в руки, зато кнопка «подписаться» так и просится, чтоб её нажать.
Посмотреть как это реализовано и попробовать победить кнопки можно тут:
https://codepen.io/jh3y/pen/KKvvPrP
#codepen
👍44😁33🤩4🤣3🎉1
Новые JavaScript-API для работы с аппаратным обеспечением
До недавнего времени работа с аппаратным обеспечением из веб-приложения была сложной, запутанной, с кучей подводных камней и компромиссов. К счастью, это направление не стоит на месте и в современных браузерах появилась поддержка некоторых новых API, которые позволяют без труда решать задачи взаимодействия с NFC, USB и специфической периферией.
Подробнее о существующих сегодня API и их возможностях можно узнать тут:
https://habr.com/ru/company/ruvds/blog/562532/
#javascript
До недавнего времени работа с аппаратным обеспечением из веб-приложения была сложной, запутанной, с кучей подводных камней и компромиссов. К счастью, это направление не стоит на месте и в современных браузерах появилась поддержка некоторых новых API, которые позволяют без труда решать задачи взаимодействия с NFC, USB и специфической периферией.
Подробнее о существующих сегодня API и их возможностях можно узнать тут:
https://habr.com/ru/company/ruvds/blog/562532/
#javascript
👍12🔥2
Как работает неточное сравнение строк
В языках программирования строки сравниваются очень просто — если строка отличается хотя бы на один символ, то возвращает false. Но что делать, если нам нужно не просто true/false, а значение, которое бы показывало разницу строк в процентах. Для этого существует множество алгоритмов и о самых популярных пойдёт речь в этой статье:
https://habr.com/ru/post/671136/
#javascript
В языках программирования строки сравниваются очень просто — если строка отличается хотя бы на один символ, то возвращает false. Но что делать, если нам нужно не просто true/false, а значение, которое бы показывало разницу строк в процентах. Для этого существует множество алгоритмов и о самых популярных пойдёт речь в этой статье:
https://habr.com/ru/post/671136/
#javascript
🔥11👍6😁1
Пет-проект на React, или как озвучить интернет
Многие пет-проекты так и остаются пет-проектами без дальнейшего продолжения. Так произошло и с этим проектом. Но несмотря на это оно было доступно в AppStore и в целом выполняло свою задачу. Это было что-то вроде сервиса подкастов, но вместо подкастов там были озвученные сайты и другой текстовый контент.
В этой статье автор решил рассказать о том, как происходила разработка, с какими трудностями он столкнулся и на какие компромиссы был вынужден пойти:
https://tproger.ru/articles/pet-proekt-na-react-kak-my-ozvuchivali-internet/
#react #фронтенд #бэкенд
Многие пет-проекты так и остаются пет-проектами без дальнейшего продолжения. Так произошло и с этим проектом. Но несмотря на это оно было доступно в AppStore и в целом выполняло свою задачу. Это было что-то вроде сервиса подкастов, но вместо подкастов там были озвученные сайты и другой текстовый контент.
В этой статье автор решил рассказать о том, как происходила разработка, с какими трудностями он столкнулся и на какие компромиссы был вынужден пойти:
https://tproger.ru/articles/pet-proekt-na-react-kak-my-ozvuchivali-internet/
#react #фронтенд #бэкенд
👍7💩3
ReSvelte — инструмент разработчика Svelte и визуализатор дерева компонентов
Svelte — крайне удобный инструмент для создания сайтов. Однако он имеет две важные проблемы, а именно трудно выявляемый повторный рендеринг компонентов и их некорректное размещение в дереве. Чтобы избавиться от этих проблем команда Hoon Park создала инструмент, включающий визуализатор дерева компонентов и решающий проблему повторного рендеринга ReSvelte.
В этой статье вы найдёте подробный обзор библиотеки:
https://nuancesprog.ru/p/15780/
#svelte #resvelte #фронтенд
Svelte — крайне удобный инструмент для создания сайтов. Однако он имеет две важные проблемы, а именно трудно выявляемый повторный рендеринг компонентов и их некорректное размещение в дереве. Чтобы избавиться от этих проблем команда Hoon Park создала инструмент, включающий визуализатор дерева компонентов и решающий проблему повторного рендеринга ReSvelte.
В этой статье вы найдёте подробный обзор библиотеки:
https://nuancesprog.ru/p/15780/
#svelte #resvelte #фронтенд
🍾12👍4🔥2🐳2
Микрофронтенды: достоинства, недостатки и нюансы
Термин «микрофронтенды» стал входить в обиход с ростом популярности микросервисов. Но даже сейчас далеко не все понимают, что это такое и как это работает. Смысл микрофронтендов в том, что сайт представляет собой набор функций, которые могут разрабатывать отдельные команды, при этом функции могут быть абсолютно разные, но полностью готовыми начиная от базы данных до UI. Таким образом их удобно изменять, подключать или отключать независимо от другого функционала.
Подробнее:
https://habr.com/ru/post/585912/
#микрофронтенд
Термин «микрофронтенды» стал входить в обиход с ростом популярности микросервисов. Но даже сейчас далеко не все понимают, что это такое и как это работает. Смысл микрофронтендов в том, что сайт представляет собой набор функций, которые могут разрабатывать отдельные команды, при этом функции могут быть абсолютно разные, но полностью готовыми начиная от базы данных до UI. Таким образом их удобно изменять, подключать или отключать независимо от другого функционала.
Подробнее:
https://habr.com/ru/post/585912/
#микрофронтенд
👍14😐6🤮3❤2🎉2
Как разработчику заработать на продаже грибов, или создаём генератор 3D-грибов для NFT-коллекции
NFT-коллекции пережили бум своей популярности и сейчас они говорят не так много. Однако, они всё ещё пользуются спросом и стоят уйму денег. Так почему бы не подзаработать на этом, потратив минимум времени?
В этой статьей автор показал, как с помощью кода, библиотеки Three.js и креативности можно быстро создать целую пачку произведений цифрового искусства:
https://habr.com/ru/post/651267/
#threejs #nft
NFT-коллекции пережили бум своей популярности и сейчас они говорят не так много. Однако, они всё ещё пользуются спросом и стоят уйму денег. Так почему бы не подзаработать на этом, потратив минимум времени?
В этой статьей автор показал, как с помощью кода, библиотеки Three.js и креативности можно быстро создать целую пачку произведений цифрового искусства:
https://habr.com/ru/post/651267/
#threejs #nft
❤9🥴4🐳4👍2👎2🔥1😁1🍓1🍾1
Адаптивная вёрстка: что это и как использовать
От того насколько адаптирована ваша вёрстка, будет зависеть то, как сайт будет выглядеть на различных устройствах пользователей. Если вы не уделили должное внимание адаптивности, то будьте готовы, что сайт откроется нет так, как вы ожидаете на каком-нибудь смартфоне 5-летней давности с не самым актуальным разрешением или ещё каком устройстве с нестандартным экраном.
Сегодня уже редко когда необходимо реализовывать разную вёрстку под разные экраны, поэтому уметь правильно адаптировать одни и те же элементы крайне важно. О том, как это делать и на что в первую очередь нужно обращать внимание мы рассказали здесь:
https://tproger.ru/translations/responsive-web-design-tips/
#фронтенд #адаптивнаявёрстка
От того насколько адаптирована ваша вёрстка, будет зависеть то, как сайт будет выглядеть на различных устройствах пользователей. Если вы не уделили должное внимание адаптивности, то будьте готовы, что сайт откроется нет так, как вы ожидаете на каком-нибудь смартфоне 5-летней давности с не самым актуальным разрешением или ещё каком устройстве с нестандартным экраном.
Сегодня уже редко когда необходимо реализовывать разную вёрстку под разные экраны, поэтому уметь правильно адаптировать одни и те же элементы крайне важно. О том, как это делать и на что в первую очередь нужно обращать внимание мы рассказали здесь:
https://tproger.ru/translations/responsive-web-design-tips/
#фронтенд #адаптивнаявёрстка
👍27❤3❤🔥2🥰2😍1
Строим взаимодействие систем на PHP с помощью GraphQL
Простая ситуация: у вас есть сервер на PHP и какой-то фронтенд в виде сайта или приложения, который взаимодействует с этим сервером. Ничего сложного, здесь подойдёт одно из множества решений, которое можно реализовать один раз и затем совершенствовать по мере необходимости.
Но как быть, если таких серверов десятки, а интерфейсов и вовсе больше сотни? Здесь нужен особый подход и выбор инструментов для их взаимодействия. Вот, например, автор этой статьи рассказал, как в его компании пришли к использованию GraphQL.
Почему, зачем и как:
https://tproger.ru/articles/stroim-vzaimodejstvie-sistem-na-php-s-pomoshhju-graphql/
#php #graphql #бэкенд
Простая ситуация: у вас есть сервер на PHP и какой-то фронтенд в виде сайта или приложения, который взаимодействует с этим сервером. Ничего сложного, здесь подойдёт одно из множества решений, которое можно реализовать один раз и затем совершенствовать по мере необходимости.
Но как быть, если таких серверов десятки, а интерфейсов и вовсе больше сотни? Здесь нужен особый подход и выбор инструментов для их взаимодействия. Вот, например, автор этой статьи рассказал, как в его компании пришли к использованию GraphQL.
Почему, зачем и как:
https://tproger.ru/articles/stroim-vzaimodejstvie-sistem-na-php-s-pomoshhju-graphql/
#php #graphql #бэкенд
👍4
Рисуем QR-коды, которые не только роботу понятны, но и приятны человеческому глазу
QR-коды сегодня всё плотнее входят в нашу жизнь — спасибо пандемии и отключению популярных способов оплаты. Но все они скучны и однообразны (не для компьютера, разумеется). Вот было бы здорово, если бы QR-код привлекал внимание и развлекал, а не просто данные предоставлял, правда?
Что ж, раз есть запрос, найдётся и решение. Кстати, вот оно:
https://habr.com/ru/post/590587/
#javascript #react
QR-коды сегодня всё плотнее входят в нашу жизнь — спасибо пандемии и отключению популярных способов оплаты. Но все они скучны и однообразны (не для компьютера, разумеется). Вот было бы здорово, если бы QR-код привлекал внимание и развлекал, а не просто данные предоставлял, правда?
Что ж, раз есть запрос, найдётся и решение. Кстати, вот оно:
https://habr.com/ru/post/590587/
#javascript #react
👍24😐1
Превращаем сайт на Django в PWA-приложение
Верстать веб-страницы не так уж сложно, разместить сайт на сервере тоже не самая сложная задача. Но давайте пойдём дальше и, несколько усложнив себе задачу, сделаем не просто сайт, а полноценное приложение на примере Django-проекта! Фронт есть, бэк — тоже. Так что дело за малым, добавляем необходимый код к тому, что уже имеется и всё готово.
Подробнее:
https://habr.com/ru/post/682790/
#django #pwa
Верстать веб-страницы не так уж сложно, разместить сайт на сервере тоже не самая сложная задача. Но давайте пойдём дальше и, несколько усложнив себе задачу, сделаем не просто сайт, а полноценное приложение на примере Django-проекта! Фронт есть, бэк — тоже. Так что дело за малым, добавляем необходимый код к тому, что уже имеется и всё готово.
Подробнее:
https://habr.com/ru/post/682790/
#django #pwa
👍6❤1