Javascript: базовые вопросы и понятия для самых маленьких

Javascript ― язык весьма оригинальный. Его можно любить, ненавидеть и даже бояться, но равнодушным он вас вряд ли оставит. Не знать или не понимать, с чем ты работаешь ― самая частая ошибка, допускаемая современными фронтенд‑разработчиками. Вам бы понравилось, если бы дантист, к которому вы пришли, не понимал, какой он инструмент использует и какие у него особенности работы? Очевидно, что нет. И рано или поздно, если вы действительно хотите стать профессионалами, вы разберётесь во всём, но как сделать так, чтоб это случилось раньше?

В этой статье в блоге ЛАНИТ хотелось бы показать, что о сложных вещах можно и нужно говорить просто.

https://habr.com/ru/companies/lanit/articles/718130/

👉 @frontend_1

JavaScript для самых маленьких. Часть 2

Не так давно в блоге ЛАНИТ на Хабре мы представили вашему вниманию часть нашей методички по JavaScript. Сегодня же предлагаем ознакомиться с ещё одним блоком, который затрагивает самые базовые и необходимые понятия для тех, кто только начинает свой путь в мире JavaScript.

https://habr.com/ru/companies/lanit/articles/733064/

👉 @frontend_1

50+ ChatGPT промтов для веб-разработчиков

Если вы устали от утомительных и повторяющихся задач по программированию и хотите оптимизировать свою эффективность, то вы попали по адресу. С помощью ChatGPT можно оптимизировать рабочий процесс, сократить количество ошибок и даже получить представление о том, как улучшить свой код.

В этой статье мы предоставим вам более 50 подсказок и стратегий, которые помогут вам ускорить рабочий процесс веб-разработки с помощью ChatGPT. Здесь вы найдете все, что нужно, чтобы максимально эффективно использовать ИИ в качестве веб-разработчика: от изучения концепций в качестве новичка до подготовки к собеседованиям.

https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt

👉 @frontend_1

Совет по Javascript 💡

Возможно, вы не знали, что мы можем легко добавить пользовательские проверки в форме HTML 🤩

👉 @frontend_1

Совет по CSS 💡

Знаете ли вы, что мы можем легко определить, поддерживается ли функция CSS в браузере или нет, и применить резервные стили, если они не поддерживаются? 🤩

👉 @frontend_1

11 этапов становления JavaScript Full-Stack инженера

За последний год я получил множество сообщений, в основном от новичков, только что окончивших вуз и вступивших в мир программирования. Большинство вопросов касаются того, как быстро повысить свою квалификацию, как стать Full Stack Developer или как выбрать направление карьеры.

Хотя я стараюсь отвечать каждому по отдельности, я хочу объединить свой собственный опыт и создать дорожную карту, как стать Full-Stack инженером, которой я хочу поделиться со всеми.

https://dev.to/paulknulst/11-stages-to-become-a-javascript-full-stack-engineer-ngm

👉 @frontend_1

HTML, CSS, PHP: полная шпаргалка

https://bookflow.ru/html-css-php-polnaya-shpargalka-cheat-sheet/

👉 @frontend_1

React: революция использования фигурных скобочек

Хорошо, react. Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с ними, когда достаточно именованной функции. Этот список можно хорошенько продолжить.

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

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

function useClient(clientId) {
const [loadedClient, setLoadedClient] = useState(null)
const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
const loadClient = async () => {
try {
setIsLoading(true)
const clientData = {} // actual data loading call goes here
setLoadedClient(clientData)
}
finally {
setIsLoading(false)
}
}

loadClient()
}, [clientId])

return [loadedClient, isLoading]
}

https://habr.com/ru/articles/727542/

✍️ @React_lib

Экосистема JavaScript восхитительно странная

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

https://fly.io/blog/js-ecosystem-delightfully-wierd/

👉 @frontend_1

Совет по CSS 💡

Легко изменить стиль текста заполнителя 🤩

👉 @frontend_1

Совет по HTML 💡

Возможно, вы не знали об этом элементе HTML 🤩

👉 @frontend_1

Совет по производительности в Интернете 💡

Предварительная выборка ресурсов следующих возможных страниц для более быстрой навигации 🚀

👉 @frontend_1

100 современных CSS-кнопок. Все стили, которые вы можете себе представить.

https://ui-buttons.web.app/

👉 @frontend_1

Интересные трюки HTML, CSS и JS

Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.

https://habr.com/ru/companies/ruvds/articles/731960/

👉 @frontend_1

Интересные трюки JS, HTML и CSS, #2

Небольшая подборка нестандартных вариантов использования HTML/JS/CSS, где каждый найдёт что-то интересное. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Предыдущая часть здесь.

В этом выпуске — DevTools для мобильных браузеров, CSS-антистресс для Booking .com (на КДПВ), единственная защита от фингерпринтинга (спойлер: это браузер Tor, он же Firefox) и др.

https://habr.com/ru/companies/ruvds/articles/748950/

👉 @frontend_1

Расширенные функции JavaScript для повышения качества кода

В этой статье я расскажу, как использовать некоторые встроенные возможности для создания наиболее мощных функций, которые повышают производительность и делают код более красивым. Я расскажу о функциях Debounce, Throttle, Once, Memoize, Curry, Partial, Pipe, Compose, Pick, Omit и Zip, которые можно сохранить в служебном файле/классе, чтобы оптимизировать качество кода как разработчика JavaScript.

Хотя функции объясняются на языке JavaScript, они могут быть легко реализованы в любом языке программирования. Как только концепция различных функций будет понята, их можно будет применять повсеместно.

https://www.paulsblog.dev/advanced-javascript-functions-to-improve-code-quality/

👉 @frontend_1

Создание и развертывание клона LeetCode с помощью React, Next JS, TypeScript, Tailwind CSS, Firebase

0:00:00 Intro
0:00:29 Demo of The App
0:05:23 Project Setup
0:08:51 Auth Page Setup
0:13:19 Auth Page Navbar
0:18:54 AuthModal Layout UI
0:22:16 Login UI
0:29:41 Signup UI
0:31:59 ResetPassword UI
0:33:13 Integrating Recoil Auth State
0:47:31 Firebase Setup
0:52:41 Signup Functionality
1:01:21 Login Functionality
1:05:14 Auth Page Route Guard
1:08:01 Home Page UI
1:12:50 Problems Table UI
1:21:01 Youtube Video Modal
1:29:51 Topbar Update On Auth
1:32:46 Logout Functionality
1:37:11 Auth Modal Optimizations
1:38:44 Reset Password Functionality
1:42:56 React Toastify
1:47:19 Image optimizations
1:54:33 Creating [pid] page and update topbar
2:02:27 Creating Timer.tsx
2:12:31 Creating Workspace.tsx
2:15:18 Splitting The Page
2:19:47 Creating ProblemDescrition.tsx
2:26:03 Creating PreferenceNav.tsx
2:34:39 Creating Code Editor
2:41:10 Adding Test Cases UI
2:50:15 Creating EditorFooter.tsx
2:56:32 Data Handling Explained
3:01:50 Two Sum Problem
3:12:52 Reverse Linked List
3:18:05 Jump Game Problem
3:20:13 Valid Parentheses Problem
3:21:16 Search 2d Matrix Problem
3:22:01 Using SSG for [pid].tsx
3:46:47 Updating testcases UI
3:51:39 Initializing Firestore
3:55:56 Adding problems to DB
4:12:09 Fetch Problems
4:32:58 Create Users in DB
4:40:33 Fetch problem data
4:51:28 Loading skeletons
4:56:35 Get user data on the problem
5:06:23 Like functionality
5:27:51 Dislike functionality
5:39:03 Star functionality
5:46:03 Next and Previous problem
5:55:23 Solving Hydration Error
5:58:08 Confetti Celebration
6:01:43 Code Submission
6:20:50 Save code to localstorage
6:24:48 Solving bugs
6:31:08 Toggle Full Screen
6:34:13 SettingsModal UI
6:41:33 SettingsModal Functionality
6:54:23 Update Home Page
6:59:11 Sandboxing technique
7:01:58 Deployment
7:05:08 Firebase Rules

https://www.youtube.com/watch?v=GnodscC2p-A

👉 @frontend_1

Совет по HTML 💡

Легко создайте красивый индикатор выполнения, используя элемент <progress> 🤩

👉 @frontend_1

🚀 Коллекция React-компонентов и библиотек

https://github.com/brillout/awesome-react-components

👉 @frontend_1

Совет по CSS 💡

Легко реализуйте плавную прокрутку, используя всего одну строку кода 🤩

👉 @frontend_1