WebDEV
8.96K subscribers
2.21K photos
11 videos
2.73K links
Сообщество веб-разработчиков.

На канале можно найти: видео-уроки, полезные статьи, новости из мира IT и веб-разработки.

Ссылка: @Portal_v_IT

Сотрудничество: @oleginc, @tatiana_inc

Канал на бирже: telega.in/c/webb_dev

РКН: clck.ru/3L2oTf
Download Telegram
💡 Используйте {} вместо New Object() в JavaScript

Есть
несколько путей для создания объектов в JavaScript. Возможно наиболее традиционный это использование конструктора «new», например:

var o = new Object();  
o.name = 'Jeffrey';
o.lastName = 'Way';
o.someFunction = function() {
console.log(this.name);
}

Хотя этот метод получил штамп «плохой практики» он таковой не является. Вместо него, мы рекомендуем использовать более надежный метод c литералом объекта.

Лучше так:

var o = {  
name: 'Jeffrey',
lastName = 'Way',
someFunction : function() {
console.log(this.name);
}
};

Заметка — если вы хотите создать пустой обьект, то {} сделает это:

var o = {};  

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

#советы #coding #js
📑 Картинка, которая одновременно является кодом на JavaScript

Изображения обычно хранятся как двоичные файлы, а файл JavaScript по сути является обычным текстом. Оба типа файлов должны следовать собственным правилам: изображения имеют конкретный формат файла, определённым образом кодирующий данные. Для того, чтобы файлы JavaScript можно было исполнять, они должны следовать определённому синтаксису. В статье отвечаем на вопрос: можно ли создать файл изображения, одновременно являющийся допустимым синтаксисом JavaScript, чтобы его можно было исполнять?

#статьи #js
💡Основы JavaScript в формате марафона за неделю

21 сентября фронтенд-разработчик, спикер HolyJS и преподаватель, Зар Захаров, запускает марафон по JS в Телеграме.

Будут:
короткие видеоуроки,
домашние задания, которые нужно выполнить, чтобы пройти дальше, поддержка и code review от ментора с 14-летним опытом.

В результате вы напишите свою первую браузерную игру в жанре файтинг на JS.

Чтобы занять место на марафоне, нажмите на кнопку и запустите бота.
💡 Семантическая разметка в HTML

Часть 2

Ознакомиться с первой частью вы можете по ссылке.

Теги <i> и <b>

В старые добрые времена, теги <i> и <b> обозначали текст выделенный, соответственно, курсивом и жирным шрифтом. Когда же идея об отделении семантики от представления стала набирать обороты, к этим тегом стали относиться с подозрением. Их заменили на теги <em> и <strong>, обозначающие соответственно эмфазис и сильный эмфазис.

В HTML5, наконец, эти теги получили отличную семантическую интерпретацию. Тегом <i> помечается текст, у которого отличается тон или настроение. Это полезно, например, для описания мыслей или технических терминов. Тег <b> помечает текст, который стилистически отличается от обычного текста, но не имеет какого-либо выделенного семантического значения. Чем это отличается от использования <span>? Ключ в том, что <b> не несет какого-либо семантически отличного смысла.

В следующей части рассмотрим теги <abbr> и <time>.

Продолжение следует...

#советы #coding #html
🛠 98.css — забавный CSS-фреймворк для создания пользовательских интерфейсов в стиле Windows 98. Как и большинство других UI-фреймворков, он предоставляет вам несколько базовых утилит стиля и набор компонентов для быстрого создания макета, только при использовании этого фреймворка макет будет иметь ностальгическое очарование.

#инструменты #js
🔥 Лучшее на канале за неделю

1
. Картинка, которая одновременно является кодом на JavaScript.

2. Ackee — это проект с открытым исходным кодом, который предоставляет вам все необходимые инструменты для добавления автономной аналитики на ваш сайт.

3. Семантическая разметка в HTML - Первая часть | Вторая часть.
📑 React на практике: приложение с сортировкой и поиском данных

В статье демонстрируется приложение с сортировкой и поиском данных.

#статьи #js #react
Выберите правильный вариант 👆 #test
🛠 Stryker - интересный проект для тестирования мутаций в JavaScript и других языках. Он работает, добавляя «мутации» в случайные места в вашем коде и выполняя для них тесты, проверяя, сколько мутаций прошло и насколько действительно надежен код.

#инструменты #js
💡 Семантическая разметка в HTML

Часть 3

Перед прочтением рекомендуем ознакомиться с первой и второй частями.

Тег <abbr>

<abbr> используется для сокращений. Он может быть особенно полезен в документах, где их много. У этого тега есть необязательный атрибут title, в котором можно указать полную версию текста.

<abbr title="I don't know">idk</abbr>
<abbr title="got to go">g2g</abbr>

Тег <time>

Давайте взглянем на классическую проблему локализации дат. В США 5 октября 2013 года записывается как 10/05/13, в Британии это 05/10/13, в Южной Африке это 2013/10/05, в России это 05.10.13. Все эти варианты делают чрезвычайно трудной задачу автоматического распознавания дат.

Тег <time> позволяет указывать дату и время в машинночитаемом формате. Предыдущий пример мог бы выглядеть примерно так: <time datetime=«2013-10-05»>10/05/13</time>. HTML-парсеры смогут точно понять дату, несмотря на то, в каком формате мы ее указали.

Продолжение следует...

#советы #coding #html
Выберите правильный вариант 👇🏼 #test
📑 Объектно-ориентированный JavaScript: примитивы и объекты

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

#статьи #js
🛠 Bootlint — инструмент линтера от команды Bootstrap, который поможет вам проверить, используют ли ваши страницы компоненты Bootstrap с правильно структурированным HTML. Он также обеспечивает включение правильных тегов, наличие декларации типа документа HTML5 и правильность общей разметки страницы.

#инструменты
💡 Семантическая разметка в HTML

Часть 4

Перед прочтением рекомендуем ознакомиться с первой, второй и третьей частями.

<mark>

Когда-нибудь так делали?

<p>
Three hundred pages of boring, useless text. <span class="highlight">The one thing you need to know and will never be able to find again if you don't highlight it.</span> More boring stuff…
</p>

Вместо этого можно использовать тег <mark>, которым помечается текст, выделенный для справочных целей из-за его высокой важности.

<input>

Да, <input>. Вы, вероятно, используете <input type=«text»>, <input type=«submit»>, может быть даже <input type=«hidden»>, а вы когда-нибудь использовали другие типы? В HTML5 <input> может использовать с целой кучей типов:

- email
-tel
- number
- range
- date
- time
- search
- color

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

Продолжение следует...

#советы #coding #html
🔥 Лучшее на канале за неделю

1
. React на практике: приложение с сортировкой и поиском данных.

2. Stryker - интересный проект для тестирования мутаций в JavaScript и других языках..

3. Семантическая разметка в HTML - Третья часть | Четвёртая часть.
📑 8 лучших советов по улучшению продуктивности для разработчиков

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

#статьи
Выберите правильный вариант 👇🏼 #test