Обновить
281.86

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Утреннее шоу с Lucas F. Costa: JS, CS и тестирование веб-приложений

Время на прочтение1 мин
Охват и читатели922


Привет, Хабр!

Мы решили поэкспериментировать с форматом наших «пижамных разговоров» и сделать живой утренний выпуск. У нас в гостях Lucas F. Costa, бразильский software engineer, живущий сейчас в Лондоне.

Разбор статьи из журнала «Код» (Яндекс Практикум)

Время на прочтение9 мин
Охват и читатели12K

Пояснительная часть


Недавно мне попалась статья в журнале "Код" под названием "Сравнение: классы против функций". Я прочитал ее и она показалось мне… странной. Журнал позиционирует себя как издание для начинающих программистов. Но даже со скидкой на уровень аудитории статья вызывает много вопросов.


Эта публикация — попытка обратиться к редакции журнала "Код". Я ни в коем случае не пишу хейтерский пост. Наоборот, ставлю цель разобрать статью и указать на недостатки. Не хочу обидеть ни автора, ни редакцию. Допускаю, что в текущей статье ничего не изменится, но может быть, редакция возьмет кое-что на заметку.


Подчеркну особо — на протяжении текста я рассматриваю статью глазами новичка. У меня в этом скромный опыт: я делал уроки по программированию, писал обучающие статьи, занимаюсь менторством. Поэтому придираюсь только по одному критерию — как усвоит информацию начинающий программист. Мне кажется, это совпадает с тематикой издания.


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


Для полноты контекста прочитайте оригинал, это не займет много времени.

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

Когда и CRA мало. Доклад Яндекса

Время на прочтение16 мин
Охват и читатели3.6K
За интерфейсами поиска Яндекса скрывается большой проект со сложной инфраструктурой. У нас десятки мегабайт кода, который должен быстро работать и быстро собираться. Когда нам понадобилось перевести проект на React и TypeScript, мы начинали с Create React App, CRA. И достаточно быстро поняли, что многое нужно дорабатывать.


В докладе на Я.Субботнике Pro я вспомнил, что и как мы доделывали в сборке и архитектуре «стандартного современного проекта» и какие результаты у нас получились.
Читать дальше →

Практикуем разработку небольшого веб-приложения с нуля

Время на прочтение12 мин
Охват и читатели6.8K

Hero image


Быть новичком — значит исследовать новые горизонты программирования, шагая в неизвестность, надеясь что где-то там будет лучше.


Думаю что вы согласитесь, зачастую достаточно увлекательно начинать работу над проектом с новой технологией. Проблемы, с которыми вы сталкиваетесь и пытаетесь решить, не всегда просты, хотя являются неотъемлемой частью вашего пути становления гуру.


Так о чём это я. Сегодня я здесь чтобы поделится с вами своим первым опытом создания системы из Hedless CMS, API и блога. В связи с отсутствием достаточного количества подобного материала, особенно русскоязычного, я надеюсь что эта статья поможет вам создать подобную систему самостоятельно, избегая ошибок, которые я совершал.


Я расскажу, как я по блокам собрал систему и что из этого получилось. Я не буду объяснять вводную информацию, но оставлю ссылки на ресурсы, где вы можете узнать больше. Иногда сложно найти русскоязычный источник, но я постараюсь. Кроме того, вы можете посмотреть доклад (на английском) или же прочитать эту статью (ближе всего по смыслу), если не уверены в преимуществах микросервисов над монолитной архитектурой.


Исходный код проекта вместе с пошаговым руководством по пользовательскому интерфейсу и API (рекомендую не читать, пока не закончите статью):


Vidzhel/Bluro

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

Книга «Эффективный TypeScript: 62 способа улучшить код»

Время на прочтение8 мин
Охват и читатели14K
imageПривет, Хаброжители! Книга Дэна Вандеркама окажется максимально полезена тем, кто уже имеет опыт работы с JavaScript и TypeScript. Цель этой книги — не обучать читателей пользоваться инструментами, а помочь им повысить свой профессиональный уровень. Прочитав ее, вы сформируете лучшее представление о работе компонентов TypeScript, сможете избежать многих ловушек и ошибок и развить свои навыки. В то время как справочное руководство покажет пять разных путей применения языка для реализации одной задачи, «эффективная» книга объяснит, какой из этих путей лучше и почему.
Читать дальше →

Пишем видеочат для локальной сети, или осваиваем WebRTC в 2020 году

Время на прочтение6 мин
Охват и читатели9.7K
На фоне известных событий делать было нечего в рамках профессионального роста пытаюсь освоить WebRTC. Как известно, лучший способ освоения – сделать что-нибудь хотя бы потенциально полезное. А заодно и поделиться-обменяться опытом создания и набивания шишек.

В качестве задачи было решено сделать простое приложение, позволяющее проводить аудиовидеозвонки между двумя (пока что) стационарными или мобильными устройствами в локальной сети без необходимости подключаться к Интернету. Установка и первоначальная настройка такого приложения должны быть простыми настолько, чтобы сколь-нибудь продвинутый эникей без проблем с этим справился и показал пользователям, как делать звонки, а при наличии соответствующих навыков мог бы сделать небольшие доработки в части дизайна и возможностей. Клиентом должно выступать любое устройство, оснащённое устройствами ввода-вывода мультимедиа и позволяющее запустить подходящий браузер (Firefox или Chrome – тестил на майских, кажется, версиях).
Читать дальше →

Javascript платформа Objectum

Время на прочтение19 мин
Охват и читатели3.3K

Если вам нужен простой способ создавать веб-приложения, используя только javascript (full-stack), то предлагаю вам ознакомиться с платформой objectum. Новая версия платформы является результатом опыта работы над предыдущей версией, которая используется 10 лет. Обе версии используются в разработке различных информационных систем — это региональные решения и системы для организаций. Платформа новой версии уже используется на продакшн серверах и будет развиваться длительное время. Далее подробности.


logo

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

Профессиональное применение инструментов разработчика Chrome: 13 советов

Время на прочтение7 мин
Охват и читатели36K
Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по профессиональной работе с инструментами разработчика браузера. А именно, эти советы рассчитаны на программистов, которые по какой-то причине решили, что их основным браузером будет Google Chrome.


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

Как я выкинул webpack и написал babel-plugin для транспила scss/sass

Время на прочтение9 мин
Охват и читатели3.6K

Предыстория


Как-то субботним вечером я сидел и искал способы сборки UI-Kit с помощью webpack. В качестве демо UI-kit я пользуюсь styleguidst. Конечно же, webpack умный и все файлы, которые есть в рабочем каталоге он запихивает в один бандл и оттуда всё крутится и вертится.

Я создал файл entry.js, импортнул туда все компоненты, затем оттуда же экспортнул. Вроде всё ок.

import Button from 'components/Button'
import Dropdown from 'components/Dropdown '

export {
  Button,
  Dropdown 
}

И после сборки всего этого, я получил на выходе output.js, в котором как и ожидалось было всё — все компоненты в куче в одном файле. Тут возник вопрос:
А как мне собрать все кнопочки, дропдауны и прочее по отдельности, что бы импортировать в других проектах?
А я ведь хочу это ещё и в npm залить как пакет.

Хм… Поехали по порядку.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №426 (27 июля — 2 августа 2020)

Время на прочтение3 мин
Охват и читатели9.2K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Чем «фрагменты» могут помочь в Веб-разработке на примере Malina.js

Время на прочтение2 мин
Охват и читатели3K


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

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

Как мы получили 163 лида за 24 часа в условиях COVID-19

Время на прочтение5 мин
Охват и читатели1.1K


Делюсь опытом проведения мероприятия в условиях изоляции. Мы получили 1904 участника и 163 лида за 24 часа. Прикладываю исходники и полную статистику с фидбеками.

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

О роли фронтенд-разработчика

Время на прочтение8 мин
Охват и читатели8.6K

Привет, Хабр! Представляем вашему вниманию перевод статьи фронтенд-разработчика из MediaMonks Рональда Мендеса. Будучи родом из Венесуэлы, Рональд перебрался в Аргентину и построил успешную карьеру, а благодаря своему большому интересу к дизайну и анимации стал одним из членов жюри престижной премии FWA (вручается с 2000 года).


В этой заметке, которая показалась нам интересной, Рональд рассуждает о том, как фронтендеру найти свое место под солнцем и эффективнее взаимодействовать со своей командой.


Рональд Мендес. О роли фронтенд-разработчика


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


image
Читать дальше →

Ближайшие события

Vue.js для начинающих, урок 8: компоненты

Время на прочтение9 мин
Охват и читатели46K
Сегодня, в восьмом уроке курса по Vue, состоится ваше первое знакомство с компонентами. Компоненты — это блоки кода, подходящие для многократного использования, которые могут включать в себя и описание внешнего вида частей приложения, и реализацию возможностей проекта. Они помогают программистам в создании модульной кодовой базы, которую удобно поддерживать.



Vue.js для начинающих, урок 1: экземпляр Vue
Vue.js для начинающих, урок 2: привязка атрибутов
Vue.js для начинающих, урок 3: условный рендеринг
Vue.js для начинающих, урок 4: рендеринг списков
Vue.js для начинающих, урок 5: обработка событий
Vue.js для начинающих, урок 6: привязка классов и стилей
Vue.js для начинающих, урок 7: вычисляемые свойства
Vue.js для начинающих, урок 8: компоненты
Читать дальше →

Простое объяснение делегирования событий в JavaScript

Время на прочтение5 мин
Охват и читатели42K

Приветствую. Представляю вашему вниманию перевод статьи «A Simple Explanation of Event Delegation in JavaScript», опубликованной 14 июля 2020 года автором Dmitri Pavlutin



В данной статье Дмитрий Павлутин объясняет, на чём основан один из базовых паттернов работы с DOM-событиями.

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

Lock-файлы npm

Время на прочтение13 мин
Охват и читатели48K

Lock-файлы npm


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

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

Хватить это верстать дважды или 2-х сторонняя связь между дизайном и кодом

Время на прочтение6 мин
Охват и читатели4.2K

Как "подружить" дизайнера и инженера? Как дать им работать с одними и теме же данным, без ущерба продуктивности? Как хранить дизайн в системе контроля версий. Если вас интересуют эти вопросы, в такой же степени как и меня, то добро пожаловать под кат!

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

«Светлое» будущее моих фейлов

Время на прочтение2 мин
Охват и читатели910

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

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

Как пройти финальный уровень JS QA Game от SEMrush

Время на прочтение7 мин
Охват и читатели2.4K
Привет, меня зовут Тимур, и я написал QA Game от SEMrush. Вы могли слышать об этой игре, если участвовали в Heisenbug online или видели анонсы игры в Telegram-чатах для тестировщиков. Если коротко, то в QA Game нужно проходить уровни с нарастающей сложностью и отлавливать баги, используя JavaScript.

В этой статье я разберу седьмой (финальный и самый сложный) уровень и поделюсь решением победителя игры*.

image
Читать дальше →

Модульное и интеграционное тестирование в Redux Saga на примерах

Время на прочтение9 мин
Охват и читатели5.4K

hero image


Redux — чрезвычайно полезный менеджер состояний. Среди многих "плагинов", Redux-Saga нравится мне больше всего. В проекте на React-Native, над которым я сейчас работаю, мне приходилось сталкиваться с множеством побочных эффектов. Они приносили бы мне головные боли в случае, если я поместил их в компоненты. С помощью этого инструмента создание сложных логических потоков с разветвлениями становится простой задачей. Но как насчет тестирования? Так же это просто, как и использование библиотеки? Хотя я не могу дать вам точный ответ, я покажу вам реальный пример проблем, с которыми я столкнулся.

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