This media is not supported in your browser
VIEW IN TELEGRAM
Custom Tooltip
Меню при нажатии на которое появляется пользовательская подсказка.
https://codepen.io/Adir-SL/pen/VwXGPmy
@javascriptv
Меню при нажатии на которое появляется пользовательская подсказка.
https://codepen.io/Adir-SL/pen/VwXGPmy
@javascriptv
👍8❤4🔥2
🔥 Top it channels
🖥 Java
@javatg - выучить Java с senior разработчиком по профессиональной методике.
@javachats - чат для ответов на вопросы по Java
@java_library - библиотека книг Java
@android_its - Android разработка
@java_quizes - тесты Java
@Java_workit - работа Java
@progersit - шпаргалки ит
👣 Golang
@Golang_google - восхитительный язык от Google, мощный и перспективный.
@golang_interview - вопросы и ответы с собеседований по Go. Для всех уровней разработчиков.
@golangtests - интересные тесты и задачи GO
@golangl - чат изучающих Go
@GolangJobsit - отборные вакансии и работа GO
@golang_jobsgo - чат для ищущих работу.
@golang_books - полезные книги Golang
@golang_speak - обсуждение языка Go
🖥 Linux
@linux -топ фишки, гайды, уроки по работе с Linux.
@linux chat - чат linux для обучения и помощи.
@linux_read - бесплатные книги linux
🖥 SQL базы данных
@sqllib - библиотека баз данных
@sqlhub - повышение эффективности кода с грамотным использованием бд.
@chat_sql - чат изучения бд.
⭐️ Нейронные сети
@data_analysis_ml - data science
@vistehno - chatgpt ведет блог, решает любые задачи и отвечает на любые ваши вопросы.
@aigen - сети для генерации картинок. видео, музыки и многого другого.
@neural – погружение в нейросети.
🖥 Machine learning
@ai_ml – погружение в нейросети, ai, Chatgpt, midjourney, машинное обучение.
@machinelearning_ru – машинное обучении на русском от новичка до профессионала.
@machinelearning_interview – подготовка к собеседованию.
@datascienceiot – бесплатные книги Machine learning
@ArtificialIntelligencedl – канал о искусственном интеллекте
@machinee_learning – чат о машинном обучении
@datascienceml_jobs - работа ds, ml
@Machinelearning_Jobs - чат работы мл
🖥 Python
@pythonl - главный канал самого популярного языка программирования.
@pro_python_code – учим python с ментором.
@python_job_interview – подготовка к Python собеседованию.
@python_testit - проверочные тесты на python
@pythonlbooks - современные книги Python
@python_djangojobs - работа для Python программистов
@python_django_work - чат обсуждения вакансий
🖥 Javascript / front
@react_tg - - 40,14% разработчиков сайтов использовали React в 2022 году - это самая популярная библиотека для создания сайтов.
@javascript -канал для JS и FrontEnd разработчиков. Лучшие практики и примеры кода. Туториалы и фишки JS
@Js Tests - каверзные тесты JS
@hashdev - погружение в web разработку.
@javascriptjobjs - отборные вакансии и работа FrontEnd.
@jsspeak - чат поиска FrontEnd работы.
👷♂️ IT работа
@hr_itwork -кураторский список актуальных ит-ваканнсии
🤡It memes
@memes_prog - ит-мемы
⚙️ Rust
@rust_code - Rust избавлен от болевых точек, которые есть во многих современных яп
@rust_chats - чат rust
#️⃣ c# c++
C# - объединяет лучшие идеи современных языков программирования
@csharp_cplus чат
С++ - Универсальность. Возможно, этот главный плюс C++.
📓 Книги
@programming_books_it - большая библиотека. программиста
@datascienceiot -ds книги
@pythonlbooks - python библиотека.
@golang_books - книги Golang
@frontendbooksit - front книги
@progersit - ит-шпаргалки
@linux_read - Linux books
@java_library - Java books
🖥 Github
@github_code - лучшие проекты с github
@bigdatai - инструменты по работе с данными
🖥 Devops
Devops - специалист общего профиля, которому нужны обширные знания в области разработки.
📢 English for coders
@english_forprogrammers - Английский для программистов
💡 ChatGpt bot
@Chatgpturbobot - бесплатный бот ChatGpt
@javatg - выучить Java с senior разработчиком по профессиональной методике.
@javachats - чат для ответов на вопросы по Java
@java_library - библиотека книг Java
@android_its - Android разработка
@java_quizes - тесты Java
@Java_workit - работа Java
@progersit - шпаргалки ит
@Golang_google - восхитительный язык от Google, мощный и перспективный.
@golang_interview - вопросы и ответы с собеседований по Go. Для всех уровней разработчиков.
@golangtests - интересные тесты и задачи GO
@golangl - чат изучающих Go
@GolangJobsit - отборные вакансии и работа GO
@golang_jobsgo - чат для ищущих работу.
@golang_books - полезные книги Golang
@golang_speak - обсуждение языка Go
@linux -топ фишки, гайды, уроки по работе с Linux.
@linux chat - чат linux для обучения и помощи.
@linux_read - бесплатные книги linux
@sqllib - библиотека баз данных
@sqlhub - повышение эффективности кода с грамотным использованием бд.
@chat_sql - чат изучения бд.
@data_analysis_ml - data science
@vistehno - chatgpt ведет блог, решает любые задачи и отвечает на любые ваши вопросы.
@aigen - сети для генерации картинок. видео, музыки и многого другого.
@neural – погружение в нейросети.
@ai_ml – погружение в нейросети, ai, Chatgpt, midjourney, машинное обучение.
@machinelearning_ru – машинное обучении на русском от новичка до профессионала.
@machinelearning_interview – подготовка к собеседованию.
@datascienceiot – бесплатные книги Machine learning
@ArtificialIntelligencedl – канал о искусственном интеллекте
@machinee_learning – чат о машинном обучении
@datascienceml_jobs - работа ds, ml
@Machinelearning_Jobs - чат работы мл
@pythonl - главный канал самого популярного языка программирования.
@pro_python_code – учим python с ментором.
@python_job_interview – подготовка к Python собеседованию.
@python_testit - проверочные тесты на python
@pythonlbooks - современные книги Python
@python_djangojobs - работа для Python программистов
@python_django_work - чат обсуждения вакансий
@react_tg - - 40,14% разработчиков сайтов использовали React в 2022 году - это самая популярная библиотека для создания сайтов.
@javascript -канал для JS и FrontEnd разработчиков. Лучшие практики и примеры кода. Туториалы и фишки JS
@Js Tests - каверзные тесты JS
@hashdev - погружение в web разработку.
@javascriptjobjs - отборные вакансии и работа FrontEnd.
@jsspeak - чат поиска FrontEnd работы.
👷♂️ IT работа
@hr_itwork -кураторский список актуальных ит-ваканнсии
🤡It memes
@memes_prog - ит-мемы
⚙️ Rust
@rust_code - Rust избавлен от болевых точек, которые есть во многих современных яп
@rust_chats - чат rust
#️⃣ c# c++
C# - объединяет лучшие идеи современных языков программирования
@csharp_cplus чат
С++ - Универсальность. Возможно, этот главный плюс C++.
📓 Книги
@programming_books_it - большая библиотека. программиста
@datascienceiot -ds книги
@pythonlbooks - python библиотека.
@golang_books - книги Golang
@frontendbooksit - front книги
@progersit - ит-шпаргалки
@linux_read - Linux books
@java_library - Java books
@github_code - лучшие проекты с github
@bigdatai - инструменты по работе с данными
Devops - специалист общего профиля, которому нужны обширные знания в области разработки.
@english_forprogrammers - Английский для программистов
@Chatgpturbobot - бесплатный бот ChatGpt
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2🔥1
🕘 Дата и время в JavaScript
JavaScript определяет класс Date для представления и оперирования числами с целью отображения даты и времени.
Объект Date создается с помощью конструктора Date(). Этот объект можно использовать, чтобы отображать год, месяц и день на веб-странице в виде таймера.
Результат работы конструктора Date() зависит от переданных ему аргументов.
▪ Читать дальше
@javascriptv
JavaScript определяет класс Date для представления и оперирования числами с целью отображения даты и времени.
Объект Date создается с помощью конструктора Date(). Этот объект можно использовать, чтобы отображать год, месяц и день на веб-странице в виде таймера.
Результат работы конструктора Date() зависит от переданных ему аргументов.
▪ Читать дальше
@javascriptv
👍12❤1🔥1
Шпаргалка по символам и иконкам для фронтенд-разработчика
AmpWhat — это интерактивный справочник с символьными объектами HTML, символами Unicode и 8859-1, кавычек, математических символов, а также греческих букв.
Если вам нужно вставить иконку или найти нужный символ не в формате изображения для вставки в HTML или для псевдоэлементов, то AmpWhat может помочь сгенерировать варианты за несколько секунд:
https://www.amp-what.com/
@javascriptv
AmpWhat — это интерактивный справочник с символьными объектами HTML, символами Unicode и 8859-1, кавычек, математических символов, а также греческих букв.
Если вам нужно вставить иконку или найти нужный символ не в формате изображения для вставки в HTML или для псевдоэлементов, то AmpWhat может помочь сгенерировать варианты за несколько секунд:
https://www.amp-what.com/
@javascriptv
👍12❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Download interaction
Анимация статуса загрузки, реализованная с помощью CSS и JavaScript.
#анимация #css #javascript
https://codepen.io/milanraring/pen/jOEOmbv
@javascriptv
Анимация статуса загрузки, реализованная с помощью CSS и JavaScript.
#анимация #css #javascript
https://codepen.io/milanraring/pen/jOEOmbv
@javascriptv
👍17❤2🔥1
8 неэффективных практик JavaScript, которых лучше избегать
Самая большая ответственность каждого программиста заключается в том, чтобы написанный им код был легко тестируемым и сохранял работоспособность с течением времени.
Даже незначительные мелочи могут оказывать негативное влияние на код, а в итоге — и на программный продукт. Подобные проблемы я испытал на собственном опыте. Поэтому решил рассказать о непродуктивных практиках программирования и о том, почему следует избегать их любой ценой.
▪ Читать
@javascriptv
Самая большая ответственность каждого программиста заключается в том, чтобы написанный им код был легко тестируемым и сохранял работоспособность с течением времени.
Даже незначительные мелочи могут оказывать негативное влияние на код, а в итоге — и на программный продукт. Подобные проблемы я испытал на собственном опыте. Поэтому решил рассказать о непродуктивных практиках программирования и о том, почему следует избегать их любой ценой.
▪ Читать
@javascriptv
👍15❤2👎2🔥2
Flexbox Zombies — тренажёр для изучения
Любите игры про зомби? В этой игре нужно установить арбалет и пережить атаки зомби в каждом разделе игры с помощью Flexbox. Flexbox Zombies поможет изучить основы и применить их на практике. Сейчас игра бесплатна после небольшой регистрации:
https://mastery.games/flexboxzombies/chapter/1/level/1
#css #web
@javascriptv
Любите игры про зомби? В этой игре нужно установить арбалет и пережить атаки зомби в каждом разделе игры с помощью Flexbox. Flexbox Zombies поможет изучить основы и применить их на практике. Сейчас игра бесплатна после небольшой регистрации:
https://mastery.games/flexboxzombies/chapter/1/level/1
#css #web
@javascriptv
👍11❤3🔥2
MyJavaScript — полезный ресурс для начинающих фронтенд-разработчиков
На MyJavaScript собраны руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker.
Информация на сайте постоянно обновляется, поэтому вы также можете проверить все обновления и релизы в ЯП. Сохраняйте в закладки, чтобы не потерять:
https://my-js.org/
#фронтенд
@javascriptv
На MyJavaScript собраны руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker.
Информация на сайте постоянно обновляется, поэтому вы также можете проверить все обновления и релизы в ЯП. Сохраняйте в закладки, чтобы не потерять:
https://my-js.org/
#фронтенд
@javascriptv
👍18🔥4❤2👏2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Textarea auto-expand
Автоматическое расширение текстовой области. Реализовано с помощью JavaScript и CSS.
#анимация #css #js
https://codepen.io/vsync/pen/nrKwbm
@javascriptv
Автоматическое расширение текстовой области. Реализовано с помощью JavaScript и CSS.
#анимация #css #js
https://codepen.io/vsync/pen/nrKwbm
@javascriptv
👍10❤4🔥3
Скроллим к фрагменту текста с помощью URL
Если вам необходимо сделать навигацию не просто по сайту, а по конкретной странице, то у вас есть такая возможность. Более того, можно настроить страницу так, что при отправке ссылки пользователь, который перейдёт по ней, попадёт сразу на нужный участок страницы, а не будет листать всё, начиная с хедера.
Реализуется это довольно легко, так что стоит взять на вооружение. Инструкцию оставили здесь:
https://blog.jim-nielsen.com/2022/scroll-to-text-fragments/
#фронтенд #навигация #url
@javascriptv
Если вам необходимо сделать навигацию не просто по сайту, а по конкретной странице, то у вас есть такая возможность. Более того, можно настроить страницу так, что при отправке ссылки пользователь, который перейдёт по ней, попадёт сразу на нужный участок страницы, а не будет листать всё, начиная с хедера.
Реализуется это довольно легко, так что стоит взять на вооружение. Инструкцию оставили здесь:
https://blog.jim-nielsen.com/2022/scroll-to-text-fragments/
#фронтенд #навигация #url
@javascriptv
❤8👍4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Volume button knob
Кнопка увеличения/уменьшения громкости, написанная на CSS(SCSS), JavaScript(TypeScript)
#button #js #typescript
https://codepen.io/rodzyk/pen/mdxvQby
@javascriptv
Кнопка увеличения/уменьшения громкости, написанная на CSS(SCSS), JavaScript(TypeScript)
#button #js #typescript
https://codepen.io/rodzyk/pen/mdxvQby
@javascriptv
👍10❤5🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
tsParticles - Cards Suits Confetti — анимированный фон в виде падающих мастей карт. Реализован с помощью CSS и JavaScript.
https://codepen.io/matteobruni/pen/yLEZZdO
@javascriptv
https://codepen.io/matteobruni/pen/yLEZZdO
@javascriptv
❤8👍4🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/aybukeceylan/pen/RwrRPoO
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤2🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Красивая и объемная бесконечная карусель. Написана с помощью CSS, SVG и GSAPjs.
https://codepen.io/jh3y/pen/WNRvqJP
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥6❤2🥰1
Lighthouse — открытый инструмент от Google для аудита производительности, доступности и SEO веб-страниц
Основное преимущество Lighthouse — это его мощная аналитика и обширная база знаний. Утилита предлагает подробные отчёты и рекомендации по улучшению качества веб-страниц, основанные на проверенных методах и практиках
В отличие от других инструментов анализа, Lighthouse интегрируется с DevTools в Google Chrome и может быть использован в качестве расширения для браузера или в командной строке. Это заметно упрощает проведение аудита и получение результатов
Стоимость: #бесплатно
#SEO #web
@javascriptv
Основное преимущество Lighthouse — это его мощная аналитика и обширная база знаний. Утилита предлагает подробные отчёты и рекомендации по улучшению качества веб-страниц, основанные на проверенных методах и практиках
В отличие от других инструментов анализа, Lighthouse интегрируется с DevTools в Google Chrome и может быть использован в качестве расширения для браузера или в командной строке. Это заметно упрощает проведение аудита и получение результатов
Стоимость: #бесплатно
#SEO #web
@javascriptv
🔥9👍2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
JavaScript: визуализация Event Loop
Одной из ключевых особенностей JavaScript является способность обрабатывать асинхронные операции с использованием цикла событий. По сути, цикл событий — это то, что позволяет JavaScript обрабатывать несколько задач одновременно, не дожидаясь завершения одной задачи, прежде чем переходить к следующей.
В этой статье с помощью визуализации рассматривается, как работает Event Loop:
https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
#js
Одной из ключевых особенностей JavaScript является способность обрабатывать асинхронные операции с использованием цикла событий. По сути, цикл событий — это то, что позволяет JavaScript обрабатывать несколько задач одновременно, не дожидаясь завершения одной задачи, прежде чем переходить к следующей.
В этой статье с помощью визуализации рассматривается, как работает Event Loop:
https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
#js
👍11❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Bokeh Lighting Background — "объемный" фон с анимацией. Реализован с помощью CSS и JavaScript.
https://codepen.io/wakana-k/pen/YzjYzJE
@javascriptv
https://codepen.io/wakana-k/pen/YzjYzJE
@javascriptv
🔥6❤3👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Grainy & Gradients text
Анимация текста с эффектом градиента, написанная на SCSS, с применением JavaScript
https://codepen.io/LukyVj/pen/poOjqBv
#codepen #scss #javascript
@javascriptv
Анимация текста с эффектом градиента, написанная на SCSS, с применением JavaScript
https://codepen.io/LukyVj/pen/poOjqBv
#codepen #scss #javascript
@javascriptv
👍8❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Just Ice — анимированная сцена с объемным кубиком льда. Реализована с помощью CSS, Pug и JavaScript.
https://codepen.io/atzedent/pen/eYKPGQr
@javascriptv
https://codepen.io/atzedent/pen/eYKPGQr
@javascriptv
👍12❤3🔥2
📌 Задача с leetcode. Max Area of Island
Максимальная площадь острова
Сложность: Средняя
Условие задачи: Условие задачи:
Дан двумерный массив размера m x n. "1" отвечает за сушу, "0" - за океан. Необходимо опеределить максмимальную площадь острова из островов, расположенных на карте.
Островом считается территория, образованная из "1", расположенных сверху, справа, снизу и слева относительно друг друга.
Пример:
Ввод: grid = [[0,0,1,0,0,0,0,1,0,0,0,0,0],[0,0,0,0,0,0,0,1,1,1,0,0,0],[0,1,1,0,1,0,0,0,0,0,0,0,0],[0,1,0,0,1,1,0,0,1,0,1,0,0],[0,1,0,0,1,1,0,0,1,1,1,0,0],[0,0,0,0,0,0,0,0,0,0,1,0,0],[0,0,0,0,0,0,0,1,1,1,0,0,0],[0,0,0,0,0,0,0,1,1,0,0,0,0]]
Вывод: 6
Ввод: grid = [[0,0,0,0,0,0,0,0]]
Вывод: 0
Решение
Пишите свое решение в комментариях👇
@javascriptv
Максимальная площадь острова
Сложность: Средняя
Условие задачи: Условие задачи:
Дан двумерный массив размера m x n. "1" отвечает за сушу, "0" - за океан. Необходимо опеределить максмимальную площадь острова из островов, расположенных на карте.
Островом считается территория, образованная из "1", расположенных сверху, справа, снизу и слева относительно друг друга.
Пример:
Ввод: grid = [[0,0,1,0,0,0,0,1,0,0,0,0,0],[0,0,0,0,0,0,0,1,1,1,0,0,0],[0,1,1,0,1,0,0,0,0,0,0,0,0],[0,1,0,0,1,1,0,0,1,0,1,0,0],[0,1,0,0,1,1,0,0,1,1,1,0,0],[0,0,0,0,0,0,0,0,0,0,1,0,0],[0,0,0,0,0,0,0,1,1,1,0,0,0],[0,0,0,0,0,0,0,1,1,0,0,0,0]]
Вывод: 6
Ввод: grid = [[0,0,0,0,0,0,0,0]]
Вывод: 0
Решение
/**
* @param {number[][]} grid
* @return {number}
*/
var maxAreaOfIsland = function(grid) {
const ROWS = grid.length, COLUMNS = grid[0].length;
const DFS = (row, column) => {
const stack = [[row, column]];
let currRow, currColumn, resultArea = 0;
while (stack.length !== 0){
[currRow, currColumn] = stack.pop();
if (grid[currRow][currColumn] !== 1)
continue;
grid[currRow][currColumn] = 2;
resultArea++;
if (currRow + 1 < ROWS)
stack.push([currRow + 1, currColumn]);
if (currRow - 1 >= 0)
stack.push([currRow - 1, currColumn]);
if (currColumn + 1 < COLUMNS)
stack.push([currRow, currColumn + 1]);
if (currColumn - 1 >= 0)
stack.push([currRow, currColumn - 1]);
}
return resultArea;
};
let maxArea = 0;
for (let r = 0; r < ROWS; r++){
for (let c = 0; c < COLUMNS; c++){
if (grid[r][c] === 1){
maxArea = Math.max(maxArea, DFS(r, c));
}
}
}
return maxArea;
};
Пишите свое решение в комментариях👇
@javascriptv
👍12🔥3❤2👎1