about_javascript | Unsorted

Telegram-канал about_javascript - JavaScript

1630

➡️ Сотрудничество: @haarrp https://t.me/itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @JavaScript_testit- js тесты @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml

Subscribe to a channel

JavaScript

GSAP Flip Cart - Анимация добавления в корзину, выполненная с помощью Pug, CSS и библиотеки GSAP.js

https://codepen.io/hexagoncircle/pen/RwLQLop

@about_javascript

Читать полностью…

JavaScript

🖥 Scroll animation — красивая анимация текста при прокрутке. Реализована с помощью CSS и JavaScript

#код #css #javascript

https://codepen.io/Tiopayo/pen/QWZbqZz

@about_javascript

Читать полностью…

JavaScript

Вышел GigaChat нового поколения. Разработчики @gigachat_bot качественно обновили его, изменив свой подход к обучению. Благодаря этому сервис стал лучше отвечать на запросы пользователей — примерно в два раза. При этом GigaChat также запустили в VK, аудитория сервиса уже достигла более 1 млн пользователей.

Попробовать.

@vistehno

Читать полностью…

JavaScript

Не нужно учить Svelte, потому что... угадайте что?

Вы уже знаете его! Это всё JavaScript, только в более крутом исполнении. По крайней мере, так считает автор статьи.

🔍Что такое Svelte?

UI-фреймворк: быстрый, простой и довольно популярный.
Встроенный компилятор, преобразующий .svelte-файлы в чистый JavaScript-код. Итоговый результат работы фреймворка представляет собой код без намека на этот самый фреймворк, перекладывая всю тяжелую работу на этап сборки приложения.
Лаконичный: только HTML, CSS и JS.
Полный: встроенное управление состоянием и стили, ограниченные компонентами.

🤖Svelte vs React

Эффекты/Реактивность: Svelte автоматически отслеживает зависимости.
Управление состоянием: Svelte предлагает простое решение "pub-sub".
Жизненный цикл: в отличие от React, Svelte предоставляет более явные методы для управления жизненным циклом компонентов.

🎨Примеры: в то время как в React вам нужны обертки, Svelte позволяет вам напрямую работать с библиотеками, такими как Chart.js.

🚀Начало работы с Svelte

Основы: обязательно начните с документации.
Создайте проект: попробуйте создать свой собственный проект на Svelte — идеи для проектов также есть в статье.

🌟Заключение

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

🔗Читать статью

Читать полностью…

JavaScript

⚡️Маст-хэв список для программистов, каналы с последними книжными новинками, библиотеками, разбором кода и актуальной информацией, связанной с вашим языком программирования.
Лучший способ получать свежие обновлении и следить за трендами в разработке.

Машинное обучение: t.me/ai_machinelearning_big_data
Python: t.me/pythonl
C#: t.me/csharp_ci
C/C++/ t.me/cpluspluc
Data Science: t.me/data_analysis_ml
Devops: t.me/devOPSitsec
Go: t.me/Golang_google
Базы данных: t.me/sqlhub
Rust: t.me/rust_code
Javascript: t.me/javascriptv
React: t.me/react_tg
PHP: t.me/phpshka
Android: t.me/android_its
Мобильная разработка: t.me/mobdevelop
Linux: t.me/+A8jY79rcyKJlYWY6
Big Data: t.me/bigdatai
Хакинг: t.me/linuxkalii
Тестирование: /channel/+F9jPLmMFqq1kNTMy
Java: t.me/javatg

💼 Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy

Папка машинное обучение: /channel/addlist/_FjtIq8qMhU0NTYy

📕 Бесплатные Книги для программистов: /channel/addlist/YZ0EI8Ya4OJjYzEy

🎞 YouTube канал: uproger" rel="nofollow">https://www.youtube.com/@uproger

😆ИТ-Мемы: t.me/memes_prog

🇬🇧Английский: t.me/english_forprogrammers

Читать полностью…

JavaScript

Scroll driven gallery — изящная галерея с необычным скроллом. Реализована с помощью CSS.

https://codepen.io/jh3y/pen/VwBgPxP

@about_javascript

Читать полностью…

JavaScript

❗️ Хотите начать писать автотесты на JS?

⚠️ Приходите 8 июня в 20:00 на открытый урок в преддверии старта онлайн-курса «JavaScript QA Engineer» в OTUS.

📌 На занятии мы познакомимся с основами популярного фреймворков для написания тестов на JavaScript — mocha и библиотеки утверждений — chai.

Для этого мы:
— Рассмотрим основные принципы написания тестов
— Узнаем, как использовать chai для создания автоматизированных тестов на JavaScript
— Напишем пару unit и API тестов.

Урок пройдет в рамках онлайн-курса OTUS “JavaScript QA Engineer”. После занятия полный курс можно приобрести удобным для вас способом.

👉 Готовьте вопросы и записывайтесь на вебинар!
РЕГИСТРАЦИЯ https://otus.pw/9bJS/

Нативная интеграция. Информация о продукте www.otus.ru

Читать полностью…

JavaScript

CSS animation-delay demo 🤓

Демонстрация задержки анимации, реализованная с помощью css, js.

#анимация #css

https://codepen.io/jh3y/pen/qBdzbGb

@about_javascript

Читать полностью…

JavaScript

CSS Rooster Animation

Анимированная сцена, выполненная на чистом CSS, без использования JavaScript.

#css

https://codepen.io/mdusmanansari/pen/GRxKNKP

Читать полностью…

JavaScript

Полезная библиотека для понимания работы JS

js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

#js

Читать полностью…

JavaScript

Click To Zoom Calendar

Этот проект представляет собой интерфейс календаря с интересной анимацией — при выборе конкретной даты, происходит зум на эту ячейку для просмотра подробностей, а повторный клик возвращает исходный вид календаря.

Посмотреть, как это реализовано с точки зрения код можно тут:

https://codepen.io/Hyperplexed/pen/qBVPaNV

#codepen

Читать полностью…

JavaScript

🔥Тест по JavaScript от OTUS 🔥

Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе - «JavaScript Developer. Professional»

👉 ПРОЙТИ ТЕСТ https://otus.pw/sDRg/

💣 Пройдете тест и получите
:
✔️ Живое общение с экспертами JavaScript-сообщества
✔️Получите видео-курс по Git в подарок
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+
✔️ Скидку на прохождение онлайн курса «JavaScript Developer. Professional»

Курс доступен в рассрочку.

Реклама. Информация о рекламодателе на сайте www.otus.ru

Читать полностью…

JavaScript

Fontstorage — гигантская библиотека шрифтов

На главной странице вам будет предложено выбрать один из четырёх стилей шрифта: Sans Serif, Serif, Decorative и Monospace

Затем вам на выбор будет предложено огромное количество вариантов, которые можно скачать

Сервис поддерживает поиск по тегам, а также простенькую сортировку

Стоимость: #бесплатно

#шрифт #web

Читать полностью…

JavaScript

Как отследить событие закрытия браузера и вкладки с помощью JavaScript

Небольшой туториал для начинающих фронтенд-разработчиков. Изучайте, сохраняйте и берите на вооружение:

https://nuancesprog.ru/p/16673/

#javascript

Читать полностью…

JavaScript

HoverZoom – Расширение для браузера, которое позволяет масштабировать изображения / видео на всех ваших любимых веб-сайтах

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

🖥 Github

@about_javascript

Читать полностью…

JavaScript

3D glass weather icons - Анимированные иконки погоды, выполненные с помощью SVG и SCSS, без использования JavaScript

https://codepen.io/onediv/pen/MWQKgmv

@about_javascript

Читать полностью…

JavaScript

🔥Ищите вдохновение для дизайна футера? Тогда ловите ресурс с множеством идей, на котором можно фильтроваться по стилю и типу.

Читать полностью…

JavaScript

Choose Ticket — адаптивная страница с функцией выбора билетов на чистом CSS.

https://codepen.io/ig_design/pen/Bajogxq

@about_javascript

Читать полностью…

JavaScript

Подробный разбор вопросов с собеседований на должность фронтенд-разработчика

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

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

Ссылка: https://tprg.ru/Mbsq

#видео #фронтенд

Читать полностью…

JavaScript

Мяукающее пианино

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

По ссылке вы сможете поиграть на пианино, а так же подробно изучить код и на его примере создать что-нибудь своё:

https://codepen.io/laurenvast/pen/jOrWXej

#codepen

Читать полностью…

JavaScript

Условный border-radius в CSS

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

Вот об этой формуле, а также способе её применения и пойдёт речь в этой статье:

https://webformyself.com/uslovnyj-border-radius-v-css/

#фронтенд #css

Читать полностью…

JavaScript

Погружение в фундаментальные основы реактивного программирования: разберемся в том, что React.js всё же является реактивным, и рассмотрим кейсы, при которых целесообразно применять паттерны реактивного программирования.

Читать

Читать полностью…

JavaScript

❗️Что такое REST?

⚠️ На открытом уроке «Построение Rest API с Express» 5 июня в 20:00 мы рассмотрим общие стандарты создания и принципы построения API. А также проанализируем технологии аутентификации в веб приложениях.

После вебинара еще больше продвинутых навыков fullstack-разработчика будет ждать вас на онлайн-курсе «JavaScript Developer. Professional» от OTUS.

👉 Готовьте вопросы и записывайтесь на вебинар!
https://otus.pw/Vjxy/

Нативная интеграция. Информация о продукте www.otus.ru

Читать полностью…

JavaScript

Четыре полезных встроенных веб-API JavaScript

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

В этой статье вы узнаете о четырёх встроенных веб-API JavaScript, которые вы можете использовать в своих проектах: Notification API, Geolocation API, History API и Barcode Detection API. Подробнее:

https://blog.openreplay.com/four-useful-built-in-javascript-web-apis/

#javascript

Читать полностью…

JavaScript

⚡️Можно ли быстро овладеть Vue.js на продвинутом уровне? ⚡️Ответ экспертов OTUS — да! Приглашаем JS- и backend-разработчиков, желающих стать Fullstack, в новый поток онлайн-курса «Vue.js разработчик» в OTUS. Вас ждут живые вебинары, обмен опытом и много практики!

🔥За 4 месяца вы научитесь:
• Использовать возможности Vue, Vue-router, Vuex
• Создавать SPA-приложения и оптимизировать их для production
• Писать чистый и лаконичный код на ES6/ES8/TypeScript
• Писать интеграционные и юнит-тесты с Jest, Cypres
• Работать с GraphQL, Firebase, Electron, NativeScript
В конце вы закрепите навыки выпускным проектом и пополните им свое портфолио.

👉🏻 Пройдите вступительный тест и присоединяйтесь к группе https://otus.pw/Hffy/

Курс доступен в рассрочку.

Реклама. Информация о рекламодателе на сайте www.otus.ru

Читать полностью…

JavaScript

Что выведет в консоль, если запустить код в браузере?

Читать полностью…

JavaScript

Pixi.js — красивые 2D анимации

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

https://pixijs.com/

#js

Читать полностью…

JavaScript

Эксперты Sber Al оценят знания более 100 школьников, которые вышли в финал Национальной технологической олимпиады по искусственному интеллекту.

Финал стартовал накануне 27 февраля и закончится 3 марта. За первое место будут бороться более 100 школьников из 27 регионов России и Казахстана. Изначально желание учувствовать в Олимпиаде по ИИ заявили 6150 школьников из России, Белоруссии, Индии, Казахстана, Киргизии, Молдавии, Таджикистана и Узбекистана.

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

По результатам профильного тура команды-победители пригласят на оплачиваемую стажировку в Сбер и компании-партнеры по направлению «Машинное обучение».

Призовой фонд Олимпиады 4 млн рублей.

Читать полностью…

JavaScript

Embold — платформа для анализа исходного кода и выявления в нём проблем

Работать с инструментом достаточно просто. Для начала нужно подключить к нему свои репозитории. Затем Embold отсканирует их (автоматически или вручную ). В том числе запросы и коммиты внутри них

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

Стоимость: #бесплатно (но есть платные тарифы)

#web #баги

Читать полностью…

JavaScript

Сегментированный прогресс-бар

Ловите анимированный прогресс-бар, который разделён на отдельные сегменты, позволяя отмечать конкретные этапы взаимодействия с вашим сервисом. Код для реализации аналогичного элемента доступен здесь:

https://codepen.io/jkantner/pen/poPWVbV

#codepen

Читать полностью…
Subscribe to a channel