Как стать автором
Обновить
0
0
Sergey Drushchits @Zlomorda

Пользователь

Отправить сообщение

[ В закладки ] CSS: использование внутренних и внешних отступов

Время на прочтение18 мин
Количество просмотров91K
Если несколько элементов веб-страницы расположены близко друг к другу, то у пользователей возникает такое ощущение, что у этих элементов есть что-то общее. Группировка элементов помогает пользователю понять их взаимосвязь благодаря оценке расстояния между ними. Если бы все элементы были бы расположены на одинаковом расстоянии друг от друга, пользователю сложно было бы, просматривая страницу, узнать о том, какие из них связаны друг с другом, а какие — нет.


Эта статья посвящена всему, что нужно знать о настройке расстояний между элементами и о настройке внутренних пространств элементов. В частности, речь пойдёт о том, в каких ситуациях стоит использовать внутренние отступы (padding), а в каких — внешние (margin).
Читать дальше →
Всего голосов 22: ↑19 и ↓3+28
Комментарии6

Введение в React

Время на прочтение30 мин
Количество просмотров94K
Оглавление
1. Getting started with React
....1.1 Методы добавления React
....1.2 Выбор метода добавления
........1.2.1 Добавление React с помощью тэга <script />
........1.2.2 Добавление React с помощью create-react-app
2. Basically React
....2.1 React object
....2.2 React element
........2.2.1 CreateElement
........2.2.2 CloneElement
........2.2.3 IsValidElement
........2.2.4 Children
....2.3 React компоненты
........2.3.1 React.Component
........2.3.2 React.Fragment
.........2.3.3 State
.........2.3.4 Events
.........2.3.5 Lifecycle
.........2.3.6 Refs
....2.4 ReactDOM
........2.4.1 Render
........2.4.2 Hydrate
........2.4.3 UnmountComponentAtNode
........2.4.4 CreatePortal
3. Other topics
....3.1 Lists and Keys
....3.2 Error Handling
........3.2.1 getDerivedStateFromError
........3.2.2 componentDidCatch
Заключение

React — JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов.

1. Getting started with React


1.1 Методы добавления React


Существует 2 основных метода для добавления React на сайт:

  1. С помощью тэга <script />
  2. С помощью create-react-app

1.2 Выбор метода добавления


Выбор метода зависит от потребностей. Если вы просто хотите добавить немного интерактивности на существующую страницу или хотите просто попробовать React тогда используйте первый метод подключения. Если вы собираетесь построить полноценное React приложение, то используйте create-react-app.

1.2.1 Добавление React с помощью тэга <script />


Шаг 1 Добавьте 3 тега в контейнер head на вашей странице:
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Здесь подключаются библиотеки React и React-dom, а также компилятор babel.
Babel не является обязательным для использования React, но полезным для написания кода UI, с помощью JSX.

Шаг 2 Добавьте пустой контейнер на вашу страницу чтобы отметить место, где вы хотите что-либо отобразить с помощью React.
Читать дальше →
Всего голосов 14: ↑6 и ↓8+4
Комментарии9

Введение в Redux & React-redux

Время на прочтение11 мин
Количество просмотров293K
image

Оглавление


Введение
1. Установка и начало работы
2. Redux
....2.1 createStore
....2.2 reducer()
....2.3 dispatch()
....2.4 actionCreator()
....2.5 Actions
....2.6 getState()
....2.7 subscribe()
....2.8 combineReducers()
....2.9 initialState
3. React-redux
....3.1 Provider
....3.2 mapStateToProps()
....3.3 mapDispatchToProps()
....3.4 connect()

Введение


Вот вы прочитали мою статью про React (если нет, то настоятельно рекомендую вам сделать это) и начали разрабатывать приложения на нём. Но что это? Вы замечаете, как с расширением вашего приложения становится всё сложнее следить за текущим состоянием, сложно следить за тем, когда и какие компоненты рендарятся, когда они не рендарятся и почему они не рендарятся, сложно следить за потоком изменяющихся данных. Для этого и есть библиотека Redux. Сам React хоть и лёгкий, но для комфортной разработки на нем нужно много чего изучить.
Читать дальше →
Всего голосов 5: ↑4 и ↓1+5
Комментарии28

Как быстро спроектировать сайт с помощью CSS Grid

Время на прочтение3 мин
Количество просмотров60K
image

Модуль CSS Grid — это фантастический инструмент для создания макетов веб-сайтов. Он позволяет вам экспериментировать с макетами быстрее, чем любой другой инструмент, которые я пробовал.

В этой статье я научу вас, как это сделать.

Во-первых, я объясню HTML и CSS, которые нам нужны для этой задачи, которую я разбил на четыре части. Как только вы с этим разберетесь, мы перейдем к экспериментам с макетами.

Если вы совершенно не знакомы с CSS Grid, вам может понадобиться просмотреть мою предыдущую статью Учим CSS Grid за 5 минут.
Читать дальше →
Всего голосов 42: ↑37 и ↓5+32
Комментарии68

CSS Grid: Верстаем адаптивный журнальный макет в 20 строк

Время на прочтение12 мин
Количество просмотров61K

Недавно я работал над современной реализацией блогролла (перечня внешних полезных/интересных блогов). Замысел был в том, чтобы предоставить читателям подборку из последних постов в этих блогах, упакованную в журнальную вёрстку, а не сухой список ссылок в сайдбаре.

Самая простая часть задачи — получение списка постов и их эксцерптов (эксцерпт — вступительный текст до ката) с наших любимых RSS–фидов. Для этого мы воспользовались WordPress-плагином Feedzy lite, который умеет агрегировать несколько фидов в один список, отсортированный по времени — идеальное решение в нашем случае. Трудная же часть в том, чтобы сделать всё красиво.
Читать дальше →
Всего голосов 29: ↑28 и ↓1+47
Комментарии10

Делаем адаптивный HTML, добавляя одну строку в CSS

Время на прочтение4 мин
Количество просмотров194K
image

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

И самое классное: адаптивность будет добавлена с помощью одной строки CSS.
Это означает, что нам не нужно загромождать HTML лишними классами (Col-sm-4, col-md-8) или создавать медиа-запросы для каждого размера экрана.

Рассмотрим все подробнее.
Читать дальше →
Всего голосов 67: ↑66 и ↓1+65
Комментарии103

Общий финансовый анализ на Python (Часть 2)

Время на прочтение2 мин
Количество просмотров14K
Ну что продолжим?

Скользящее окно (Moving Windows)


В заголовке я привел дословный перевод. Если кто меня поправит, и другой термин более применим — то спасибо.

Смысл скользящего окна– с каждым новым значением функция пересчитывается за заданный период времени. Этих функций большое количество. Для примера: rolling.mean(), rolling.std(), которые чаще всего и используют при анализе движения акций. rolling.mean() — это обычная скользящая средняя, которая сглаживает краткосрочные колебания и позволяет визуализировать общую тенденцию.
Читать дальше →
Всего голосов 6: ↑5 и ↓1+7
Комментарии4

Создание простого Discord бота с помощью библиотеки discord.py

Время на прочтение2 мин
Количество просмотров210K
Асинхронная библиотека discord.py содержит все что нужно для бота, с помощью нее даже можно работать с голосовыми каналами сервера. В этой статье я расскажу как создать простенького бота для вашего discord сервера.


Читать дальше →
Всего голосов 7: ↑5 и ↓2+9
Комментарии9

[видео] Как поставить человека на место: 10 реальных вопросов про давление в переговорах

Время на прочтение2 мин
Количество просмотров229K
Видео про 8 способов противостояния формуле нужды оказалось неожиданно популярным, набрав 8,000 просмотров за два дня. Мы решили продолжить тему.

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

Мы отобрали 10 самых любопытных, на наш взгляд, вопросов в этой теме и снова заперли в студии Дмитрия Коткина, руководителя Санкт-Петербургской школы переговорщиков ШиП и нашего хорошего друга, чтобы он рассказал, что конкретно делать:



10 реальных ситуаций, которые удалось осветить — под катом:

Читать дальше →
Всего голосов 157: ↑138 и ↓19+119
Комментарии62

Информация

В рейтинге
Не участвует
Откуда
Нетивот, Хадаром, Израиль
Дата рождения
Зарегистрирован
Активность