Javascript
18.2K subscribers
779 photos
111 videos
2 files
1.2K links
По всем вопросам - @workakkk

@itchannels_telegram -🔥лучшие ИТ-каналы

@ai_machinelearning_big_data - машинное обучение

@JavaScript_testit- js тесты

@pythonl - 🐍

@ArtificialIntelligencedl - AI

@datascienceiot - ml 📚

РКН: № 5153160945
Download Telegram
🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
Современный junior frontend developer на двух работах уровня middle с общей ЗП 400к. Реальность ли в 2023 году?
Wolfram Language JavaScript Frontend
«Нейрогород»: игра на знание JavaScript про фронтендерские баги
Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas. Часть 1. Прототип
Сайд эффект реактивности и апдейта компонента во Vue 3
Вышел Chrome 118
Что быстрее: Animated + useNativeDriver или Reanimated?
Как внедрить гайд по стилю кода в проект
My #30DayCodingChallenge
🔄 Displaying React Components in Reverse Order
Easily style active links in Tanstack Router
Weekly Dev Findings 9
🚀 Supercharge Your Next.js App with Stunning Images! Learn the Ultimate Cloudinary Image Upload Hack 🔥
Latest Newsletter: Exhausted (Issue #136)
Refactoring: Enhancing Code for Better Maintainability
Vanilla-Tilt Js
Understanding JavaScript Collections: Arrays, Sets, Maps, and More
Junior to Senior Web Developer Roadmap: Breakdown

Посмотреть:
🌐 How To Create The YouTube Home Page With Tailwind, React, and TypeScript ( 01:49:08)

Хорошего дня!
🖥 Remove the Adblock Popup from YOUTUBE

Данный репозиторий содержит JS-скрипт, предназначенный для удаления назойливого всплывающего окна "Блокировщик рекламы запрещен на Youtube". Для начала работы следуйте приведенным в репо инструкциям.

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

Github

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 5 недооцененных возможностей JavaScript

1. FlatMap
FlatMap в JavaScript — это отличная техника, с которой можно познакомиться здесь. FlatMap объединяет в себе функции map и метода массивов filter. Рекомендую использовать flatMap() вместо комбинации filter() и map().

2. Порядок использования методов массивов
Методы массивов — одни из самых важных методов, помогающих взаимодействовать с массивами. В JavaScript существует множество методов массивов.

3. Метод reduce
Я наблюдал эту проблему у многих фронтенд-разработчиков. Когда пакет типа react-charts запрашивает данные в объектоподобной структуре, а реализация react-charts запрашивает данные в формате, сгруппированном по ключу, большинство разработчиков применяют метод .forEach() или некорректно используют метод map().

4. Генераторы
Генераторы и итераторы, пожалуй, относятся к элементам кода, не используемым JavaScript-разработчиками, знания которых ограничиваются вопросами для собеседования по программированию. В сценариях извлечения данных можно столкнуться с огромным объемом данных в БД/API, которые придется передавать во фронтенд. В этом случае наиболее часто используемым решением в react является бесконечная загрузка.

5. Нативные классы JavaScript
В комплект поставки JavaScript входят нативные классы, с помощью которых можно довольно легко создавать/инстанцировать такие элементы, как URL, заголовки и т. д.

Подробнее о каждом
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Realistic 3D Photo Cards — всплывающие изображения. Реализована с помощью CSS и JavaScript

https://codepen.io/jouanmarcel/pen/JjjZRrW

@javascriptv
This media is not supported in your browser
VIEW IN TELEGRAM
Frantic maze — безумный лабиринт. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/Dillo/pen/jOQPWMe

@javascriptv
This media is not supported in your browser
VIEW IN TELEGRAM
3D Gallery - Смена карточек с 3D-эффектом, выполненная с помощью SCSS и JavaScript.

https://codepen.io/jsulpis/pen/GRMwBGR

@javascriptv
🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
Fusor vs React
JavaScript pattern CustomSwitch
CRUD React c Redux и Saga + typescript в 2023
Приглашаем на онлайн-митап «Гетерогенность, или Деплой JavaScript туда и обратно»
Next JS и Nginx
О чем расскажут на HolyJS 2023 Autumn: от архитектуры до карьеры
Vue.js 3 — шаблоны проектирования и лучшие практики
Небольшое React приложение со своим бекендом, запускаем с одного терминала
PiterJS: сентябрь/октябрь
Взаимодействие с Midjourney с использованием Discord API
Weekly Dev Findings 10
GraphQl Integration With React Native
Building Accessible Web Apps
Abstract Syntax Trees and Practical Applications in JavaScript
Creating and Styling Forms with HTML and CSS: A Comprehensive Guide
7 Github Repositories to Master React 😎
Proseso ng paggawa ng aking (dating) Website
Cranberry: The Cure for Your URI
JavaScript - Under the hood (Part 1 - Overview of Runtime Environment)
🤔My Underrated Nextjs Project 🔥

Посмотреть:
🌐 You Suck At Accessibility (But You Don't Have To) ( 13:23)
🌐 This New Node Feature Is Super Convenient ( 00:43)

Хорошего дня!
🗾 Полезный путеводитель по фронтенд-разработке получил обновления.

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

В нем собраны все актуальные инструменты и технологии, репо уже набрал более 250 000 звезд.

🐱 GitHub

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ List Styles — список. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/yexx/pen/OJzQNVN

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Идеи для проектов JavaScript:


Создайте игру Flappy Bird.
http://youtube.com/watch?v=Ltg1fl4Obgg

Игра "Хэнгмэн"
http://youtube.com/watch?v=hSSdc8vKP1I

Слайдер изображений -
http://youtube.com/watch?v=PsNaoDhzQm0

Переключение светлой/темной темы -
http://youtube.com/watch?v=CUEJkJ9HDbY

Цифровые часы
http://youtube.com/watch?v=lsoCv8Agg6E

Создание музыкального проигрывателя -
http://youtube.com/watch?v=oscPp3KghS8

Список дел
http://youtube.com/watch?v=kzHmtmCMUwk

Тетрис
http://youtube.com/watch?v=ZTHjT3bm-64

Создание 15 проектов на JavaScript -
http://youtube.com/watch?v=3PHXvlpOkf4

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🚀 Work scroll — изящная реализация прокрутки страницы. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/Zuraavl/pen/jOQEmzM

@javascriptv
🖥 Сайты вы найдете сниппеты кода Javascript:

➽ javascripting - http://javascripting.com

➽ codepen - http://codepen.io

➽ codemyui - http://codemyui.com

➽ jsfiddle - http://jsfiddle.net

➽ jsbin - http://jsbin.com

➽ 30secondsofcode - http://30secondsofcode.org/js/p/1/

➽ freefrontend - http://freefrontend.com

➽ snippit - http://snippit.io

➽ codesandbox - http://codesandbox.io

➽ glitch - http://glitch.com

➽ tabnine - http://tabnine.com

➽ github - http://github.com

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
Как мы заинжектили кнопку на Behance
Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде
Как можно использовать .NET из Javascript (React) в 2023 году
Простой пример ИИ для управления роботом. TensorFlow + Node Js
8 углубленных вопросов на собеседованиях на роль сеньора в JavaScript
React vs Vue vs Angular. Часть 3
Как выстроить удобные процессы в работе с монорепой
9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании
Особенности кодировки строк в Base64 в JavaScript
Service Workers против медленного интернета: Кэширование и улучшение UX
15 Reasons to Learn JavaScript: Unlocking the Power of the Web
Basic Pattern - Javascript Interview
Stylized Castle WebGL demo
why learn web (javascript) ML(machine learning) 2024
Score High in AWS SAA-C03 Dumps with Premium Quality Dumps
Latest Newsletter: Embarrassed to be Human (Issue #138)
Announcing the First Ever State of React Survey
Performing CRUD Operations in a React-Express-MongoDB Application
Pollyfill - PROMISE. ALL
React Search Using-Debounce

Посмотреть:
🌐 Did Josh Make A Mistake? ( 06:58)
🌐 This Experimental Chrome Accessibility Feature Is A Game Changer ( 00:48)

Хорошего дня!

@javascriptv
Распространенный вопрос на собеседовании по JavaScript:

Реализуйте метод кастомные .map():

[1,2,3].myMap((x) => x * x) // должно получиться [1,4,9].

Проверяется ваше понимание:
1⃣Prototypes
2⃣ this ключевое слово
3⃣Functional концепции программирования

Если вы понимаете, как работает обычная .map(), то реализовать собственную функциию несложно:

1. .map() - это метод массива
2. Он возвращает новый массив (не модифицирует существующий)
3. В качестве параметра принимает функцию
4. Выполняет эту функцию над каждым элементом массива
5. Результат функции помещается в новый массив, а затем возвращается.

Легко, правда?

Базовая реализация в изображении.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Представляем Material Web 1.0, библиотеку компонентов Google, которая работает везде, где есть рабочий HTML. 🌐

Подробный гайд о том, как начать работу с компонентами Material здесь → https://m3.material.io/develop/web

@javascriptv
This media is not supported in your browser
VIEW IN TELEGRAM
Создание отзывчивой регистрации с валидацией формы с помощью HTML, CSS и JavaScript 🚀

📌 Код

@javascriptv
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Slider — красивый слайдер с различными блюдами. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/kristen17/pen/BaGOOMm

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Anime.js V4.

Новый способ эффективного управления повторяющимися анимациями без лишних вызовов animate() или utils.set().

Идеально подходит для эффектов отслеживания мыши!
Подробности об API ниже 👇

https://libraries.io/npm/animejs-beta

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM