Используете для отладки JavaScript-кода только console.log? Есть способ получше! Отладчик в Firefox DevTools помогает быстро находить ошибки в коде и бережёт ваши нервы и время.
Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в ?? Германии. А еще я автор Telegram-канала Хороший разработчик знает, где рассказываю обо всем, что должен знать хороший разработчик.
Сегодня я хочу поговорить Technology Radar от ThoughtWorks, как он помогает при выборе технологий и какие новости нам принес недавний выпуск.
Привет, друзья!
В этой статье я покажу вам, с чего начинается React.
Что это означает? Это означает, что мы разработаем мини-версию React, которая сможет выполнять следующий код:
import '../style.scss'
import MyReact from './my-react'
const buttonStyles = {
border: 'none',
outline: 'none',
padding: '0.3rem 0.5rem',
marginLeft: '0.5rem',
backgroundImage: 'linear-gradient(yellow, orange)',
borderRadius: '2px',
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
cursor: 'pointer'
}
/** @jsx MyReact.createElement */
function Counter() {
const [value, setValue] = MyReact.useState(1)
const [count, setCount] = MyReact.useState(1)
return (
<section>
<h1 className='title'>Hello from MyReact!</h1>
<div className='box'>
<input
style='width: 80px; padding: 0.15rem 0.5rem;'
type='number'
value={value}
onInput={(e) => {
setValue(Number(e.target.value))
}}
/>
<button
style={buttonStyles}
onClick={() => {
setCount((count) => count + value)
}}
>
Increment
</button>
</div>
<h2 className='subtitle'>
Count: <span className='count-value'>{count}</span>
</h2>
<ul className='list'>
{['React', 'from', 'scratch'].map((item) => (
<li>{item}</li>
))}
</ul>
</section>
)
}
MyReact.render(<Counter />, document.getElementById('app'))Как вы могли догадаться, наша версия будет называться MyReact.
Скриншот:
При разработке мы будем придерживаться архитектуры исходного кода React. Вместе с тем, следует отметить, что за последние 2 года исходный код React претерпел значительные изменения, поэтому некоторые вещи, которые мы будем рассматривать, помечены в нем как legacy. Несмотря на это, общие принципы и подходы остаются прежними.
Сразу извиняюсь за свою манеру повествования, ибо она похоже больше на поток сознания, но главное уловить суть, которую я хочу донести.
Я хочу подготовить небольшой цикл публикаций про работу с данными.
На этой неделе сценарист фильма «Дюна» Дени Вильнёв рассказал, что писал сценарий в программе Movie Master на MS-DOS — так как не любит перемен. И пока такие энтузиасты используют старое программное обеспечение в силу привычки, другие идут гораздо дальше в своих начинаниях и возвращают интернет во времена, когда страницы были минималистичны, а протоколы — проще сегодняшних.
Когда в любой момент времени стало понятно, что такое this... Когда неявное преобразование типов осталось только в былинах аксакалов эпохи зарождения веба... Когда умные книжки по Javascript нашли свой бесславный конец в мусорках...
Всё это случилось когда мир фронтенда спас Он.
Ну ладно, сбавим обороты у нашей машины пафоса.
Сегодня я предлагаю вам взглянуть на возможности Blazor в версии .Net 6. Внезапно, под катом не будет очередного ПриветМир, а окажется полноценное SaaS веб-приложение, написанное на Блейзоре, пощупав которое вы сможете гораздо лучше оценить.
Привет, меня зовут Максим, я бэкенд-разработчик в ManyChat.
Эта статья – о нашем переходе на PHP8. Однажды мы решили немного поисследовать – посмотреть, чего нам будет стоить возможный переход на новую версию, и запланировать эти работы на следующий год, сразу на 8.1. Перспектива переезда тогда вызывала у нас чувства примерно как на КДПВ: от мыслей обо всех тестах и внешних зависимостях было немного неуютно.
Однако в процессе исследования выяснилось, что нельзя просто так взять и остановиться. Одно за другим, и вот мы уже полностью на PHP 8.
Эта статья – о шагах, из которых складывался переезд, и проблемах, которые мы встретили в процессе. Надеюсь, статья будет полезна для тех, кому ещё только предстоить перейти на PHP 8 – поможет подготовиться хотя бы морально. Для всех остальных (кто уже на PHP 8 или не собирается) – давайте сверимся по ощущениям.
Меня зовут Елизавета Добрянская и я Frontend-разработчица в компании Домклик.
В этой статье я хочу рассказать, как мы танцевали с бубном при настройке алертов на клиентские метрики. Как, зачем и с чем мы столкнулись в этой задаче - читайте далее ?
Привет, друзья!
Недавно (где-то в конце августа) у MDN появился новый (крутой, по заявлению разработчиков) поиск.
Речь идет об этом виджете на главной странице:
Основной код виджета находится здесь, а все остальное, кроме данных для поиска, можно найти здесь.
Данные для поиска также найти не сложно — для этого достаточно добавить к https://developer.mozilla.org локаль, например, /ru и /search-index.json:
Код поиска написан на React и TypeScript. Что это означает? Это означает, что мы с вами можем провести его обратную разработку.
Если вам это интересно, прошу следовать за мной.
Привет, меня зовут Евгений, я PHP-разработчик в Broniboy. Ища в очередной раз на Хабре нужную информацию, поймал себя на мысли, что здесь маловато статей, на пальцах объясняющих суть и особенности применения микрофронтендов. Поэтому хочу добавить в копилку знаний.
Всем привет, это Макс Кравец из Holyweb. Знаю много историй, когда начинающего специалиста с первого дня бросают на задачи, за которые никто не берётся, и ждут, пока новый сотрудник сам «выплывет». А перегорит и уйдёт — значит, просто слабак, который не хочет работать.
С другой стороны такое отношение имеет определенные основания. У джунов часто завышены представление об идеальном проекте, зарплате и собственной ценности для работодателя. Из-за этого происходит разочарование даже в классных проектах и постоянная смена работы.
Если вы — тот самый джуниор, хотите расти как IT-специалист и зарабатывать больше, но считаете, что вас постоянно недооценивают и держат на неинтересных задачах, этот материал для вас.
В этой серии статей я хочу решать BFE задачи (https://bigfrontend.dev) и разбирать решения. BFE - это сайт с задачками, которые позволяют подготовиться к фронтовому интервью и прокачать свои знания в JavaScript.
Сегодня я хочу рассмотреть 2 задачи, это throttle и debounce.
Когда я интегрировал свое Angular-караоке с YouTube, мне попался официальный YouTube-компонент из Angular Material. В README прилагалась инструкция для подключения. Почти каждая строка в ней примере сомнительна. Давайте разберемся, как сделать лучше и применить имеющиеся инструменты для ленивой подгрузки библиотеки.
Каково это - масштабировать высоконагруженный международный проект, абонентская база которого удваивается каждые несколько месяцев? Какие задачи стоят перед разработчиками? Что нужно уметь и знать, чтобы сделать карьеру перспективной сфере edtech? Все это обсуждаем с Александром Петровым - архитектором бэкенда онлайн-платформы обучения детей английскому языку Novakid.
Если вас заинтересовала эта статья, то вы, наверное, несколько разбираетесь в асинхронном программировании на JavaScript и, возможно, интересуетесь, как оно работает в TypeScript.
Поскольку TypeScript – это надмножество JavaScript, async/await там работает точно также, но с некоторыми дополнительными бонусами и безопасностью типов. TypeScript позволяет запрограммировать безопасность типа ожидаемого результата и даже проверить, нет ли ошибок, связанных с типом. Поэтому баги отлавливаются на ранних стадиях разработки программы.
Создание начальной миграции для существующей базы с alembic