Привет Всем.

Меня зовут Михаил. В НЛМК нахожусь на должности Frontend-разработчика.  Занимаюсь разработкой внутренних информационных систем на React + Typescript.

В этой статье поговорим про тип enum (перечисление) в Typescript, о случаях когда его можно и нужно использовать, а когда нет.

Перечисления бывают числовыми и строковыми. Например, представим в виде перечисления должности работников кафе.

Рассмотрим перечисления с числовыми значениями:

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

Мы работали на ярких прикольных аймаках, проектируя интерфейсы MES-систем в соответствии с трендами. А потом своими глазами увидели, в какой ад для сотрудников производства это превратилось.

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

• Функция-контруктор (constructor function)
• Класс (class)
• Связывание объектов (object linking to other object, OLOO)
• Фабричная функция (factory function)

Привет, друзья!

В этой статье я покажу вам, с чего начинается 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. Несмотря на это, общие принципы и подходы остаются прежними.

Подробности о том, как происходит рендеринг в React и как влияет на рендеринг применение контекста.

Я часто сталкиваюсь с недопониманием относительно того, как, почему и когда React повторно рендерит компоненты и каким образом применение контекста и React-Redux влияет на время и объем повторного рендеринга. С десяток раз понабивав на клавиатуре различные вариации ответов на эти вопросы, я подумал, что имеет смысл составить одно общее пояснение и при каждом удобном случае ссылаться на него. Учтите, что вся собранная здесь информация уже гуляет по сети и рассматривалась в ряде других замечательных статей и публикаций в блогах. Некоторые из них перечислены в качестве справки в конце оригинальной публикации, в разделе Further Information. Собрать разрозненные сведения в единую картину бывает нелегко, поэтому я надеюсь, что моя статья поможет кому-то разобраться в теме.

Не читать, если кушаете! Я предупредил.

Оказывается, разнообразие бактерий в нашем кишечнике стремительно сокращаются. Люди всё чаще питаются плюс-минус одним и тем же. Многие уникальные биомы мы уже потеряли. Чтобы сохранить разнообразные бактерии человечества, ученые запустили большой проект, в ходе которого они собирают, замораживают и хранят экскременты со всего мира. Создается целый подземный банк таких «богатств», который хотят оставить для будущих поколений. Как хранилище семян в Шпицбергене, только… скажем так, не настолько романтично.

Цикл событий (event loop) — ключ к асинхронному программированию на JavaScript. Сам по себе язык однопоточный, но использование этого механизма позволяет создать дополнительные потоки, чтобы код работал быстрее. В этой статье разбираемся, как устроен стек вызовов и как они связаны с циклом событий.

Статья будет полезна как новичкам, так и опытным разработчикам. Первым она поможет понять, почему JavaScript настолько сильно отличается от других языков программирования и чем функция обратного вызова очень полезна на практике. Вторым — глубже разобраться в среде исполнения этого языка программирования.

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

Эта статья подробно описывает создание небольшого скрипта на Node.js для выгрузки векторных иконок из Figma в проект, а также универсального компонента для разных видов иконок, который удобно использовать в своём приложении.

Скрипт может пригодиться командам, которые ещё не определились с общим подходом к использованию и хранению иконок в проекте, и тем, кто стремится автоматизировать этот процесс.

Под катом – довольно длинный (мы предупредили!) и подробный текст, но с большим количеством полезного кода.

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

И мне вдруг подумалось, а как хайповый chatGPT мог бы справиться с таким полуреальным, но вполне полезным для меня, заданием?

Всем привет! Перед началом статьи сразу скажу:

САМЫЙ ВАЖНЫЙ ДИСКЛЕЙМЕР: естественно, покупая смс на чужой номер вы полностью компрометируете безопасность своего аккаунта. Мало ли кто его потом еще купит для получения доступа. Поэтому, помните, что представленный в данной статье способ получения доступа - это только на "поиграться". Не стоит вводить туда свои реальные почты и использовать это в работе, так как полученный доступ может быть в любой момент взломан/прикрыт.

Но да ладно, приступим. Здесь без всякого объяснения того что такое ChatGPT - кому надо тот знает. В этой статье я хочу поделиться путем который вас за 30Р может к этому боту привести. Вдаваться в детали бота я не хочу, это чисто статья для ребят которые хотят без лишних запар пройти путь человека который доступ к боту уже получил :)

Как и многих вокруг, меня удивила новая технология от Open AI. Попытался зайти и зарегистрироваться через гугл, но...

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.

Что такое CSS Grid?

Грид — это макет для сайта (его схема, проект).

Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.

Вот простой пример макета сайта, созданного с помощью Грида.