Javascript
18.6K subscribers
800 photos
117 videos
2 files
1.24K links
По всем вопросам - @workakkk

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

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

@JavaScript_testit- js тесты

@pythonl - 🐍

@ArtificialIntelligencedl - AI

@datascienceiot - ml 📚

РКН: № 5153160945
Download Telegram
🖥 8 продвинутых вопросов для собеседования по JavaScript

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

1. Подробнее о свойствах операторов + и —
console.log(1 + '1' - 1);
Можете ли вы предположить,
как поведут себя операторы + и — в ситуациях, подобных приведенной выше?

Когда JavaScript имеет дело с выражением 1 + '1', то обрабатывает его с помощью оператора +. Интересным свойством этого оператора является то, что он предпочитает конкатенацию строк, когда один из операндов является строкой.

В нашем случае ‘1’ является строкой, поэтому JavaScript неявно преобразует числовое значение 1 в строку. Следовательно, 1 + '1' становится '1' + '1', в результате чего получается строка '11'.

Теперь у нас есть выражение '11' - 1. Поведение оператора — прямо противоположно. Приоритет отдается числовому вычитанию независимо от типа операндов. Если операнды не относятся к числовому типу, JavaScript выполняет неявное принуждение для их преобразования в числа. В данном случае '11' преобразуется в числовое значение 11, и выражение упрощается до 11 - 1.

Собираем все вместе:

'11' - 1 = 11 - 1 = 10
2. Дублирование элементов массива
Рассмотрите следующий JavaScript-код и постарайтесь найти в нем какие-либо проблемы:

function duplicate(array) {
for (var i = 0; i < array.length; i++) {
array.push(array[i]);
}
return array;
}

const arr = [1, 2, 3];
const newArr = duplicate(arr);
console.log(newArr);

В этом фрагменте кода требуется создать новый массив, содержащий дублированные элементы входного массива. При первоначальном рассмотрении кажется, что код создает новый массив newArr, дублируя каждый элемент исходного массива arr. Однако в самой функции duplicate возникает критическая проблема.

Функция duplicate использует цикл для перебора каждого элемента конкретного массива. Но внутри цикла она добавляет новый элемент в конец массива, используя метод push(). В результате массив каждый раз становится длиннее, что создает проблему, при которой цикл никогда не останавливается. Условие цикла (i < array.length) всегда остается истинным, поскольку массив продолжает увеличиваться. В результате цикл может продолжаться бесконечно, что приводит к зацикливанию программы.

Чтобы решить проблему бесконечного цикла, вызванного ростом длины массива, можно перед входом в цикл сохранить начальную длину массива в переменной. Затем эту начальную длину можно использовать в качестве ограничения для итерации цикла. Таким образом, цикл будет выполняться только для исходных элементов массива и перестанет зависеть от роста массива за счет добавления дубликатов. Вот модифицированная версия кода:

function duplicate(array) {
var initialLength = array.length; // Сохранение начальной длины
for (var i = 0; i < initialLength; i++) {
array.push(array[i]); // Дублирование каждого элемента
}
return array;
}

const arr = [1, 2, 3];
const newArr = duplicate(arr);
console.log(newArr);

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

[1, 2, 3, 1, 2, 3]

📌Читать дальше

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍265🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Movie Poster Interaction - Стильные карточки с анимацией и эффектом размытия.

https://codepen.io/pleasedonotdisturb/pen/oNQLVXB

@javascriptv
12🔥4👍2🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
Card — анимированная карточка. Реализована с помощью CSS и JavaScript

https://codepen.io/BlogFire/pen/yLRgbwO

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

Почитать:
Миграция с Webpack и react-scripts на Vite: Путь к Быстрому и Легковесному React
Откройте свое будущее: Изучите 15 бесплатных курсов IBM прямо сейчас
Юриспруденция и программирование: что общего?
Heretic: full stack фреймворк на основе Marko.js
Как типизировать Vuex Store
Кулинарный гид по Vue.js: всё о props
Как декораторы могут упростить разработку веб-форм
React Fiber & Concurrency Part 2 (2)
DOMPurify,增加網站對 XSS 攻擊的防護力
After changing the usage of axios, my work efficiency increased by 3 times
Latest Newsletter: Walled Gardens and Reality Interfaces (Issue #135)
I need issues for my Repo 😐
The Ultimate Guide to Java Testing Frameworks: JUnit and TestNG
Buy Google Voice Accounts
Veracity Accounting in Canada: Navigating Financial Clarity
Concrete Estimator Canada and USA: Calculating Costs with Precision
Turning my codepen into an actual app - Brick 1100
Connect With Customers From Email List on LinkedIn With Automation

Посмотреть:
🌐 How To Create 3 Levels Of React Image Sliders - Beginner, Intermediate, Expert ( 37:25)
🌐 This New CSS Property Is Simple Yet Useful ( 00:54)

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

@javascriptv
👍13🔥31
This media is not supported in your browser
VIEW IN TELEGRAM
Transparent Sidebar | CSS - Выдвижное меню с кнопками + карточки

https://codepen.io/ecemgo/pen/yLGeKXE

@javascriptv
👍21🔥31
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Cinematic Animation — красивая кинематографическая анимация. Реализована с помощью CSS и JavaScript

https://codepen.io/team/keyframers/pen/LYRmXBX

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
9👍5🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Flipping Neon - Анимированная сцена, выполненная на чистом CSS, без использования JavaScript

https://codepen.io/danwilson/pen/abqGjVp

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥53
🔥 Дайджест полезных материалов из мира 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)

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

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

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

Github

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🤔21🔥1😁1
🖥 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
👍123🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Realistic 3D Photo Cards — всплывающие изображения. Реализована с помощью CSS и JavaScript

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

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

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

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

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

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

@javascriptv
👍112🔥2
🔥 Дайджест полезных материалов из мира 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)

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

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

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

🐱 GitHub

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥53
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
👍12🔥42
🖥 Идеи для проектов 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
👍17🔥51
This media is not supported in your browser
VIEW IN TELEGRAM
🚀 Work scroll — изящная реализация прокрутки страницы. Реализована с помощью CSS и JavaScript

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

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

@javascriptv
11👍3👎1🔥1
🖥 Сайты вы найдете сниппеты кода 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
👍12🔥21