Ответы, понравившиеся пользователю TerNik

Какие книги читать для изучения CSS3/HTML5/JS с нуля?

Xalon @Xalon

Хочу заметить, что возможности более ранних версий HTML4 и CSS2, были включены в версии HTML5 и CSS3. Хотя и есть некоторые изменения, авторы книг обычно об этом упоминают.
На первых четырех этапах изучения, необходимо проделывать тоже, что и автор (установка текстового редактора, написание тегов, стилей и тд) и париться о чем-то более сложном не стоит.
Мой алгоритм изучения, имеет следующий порядок:
1) Прочесть книгу Мэтью Макдональда "Веб-разработка. Исчерпывающее руководство" 4 издание. По данной книге можно получить общее представление о HTML, CSS, JavaScript и других интересных моментах как, публикация/продвижение/монетизаци сайта, привлечение посетителей и ведение блога.

2) Посмотреть бесплатные курсы HTML4 и CSS2 Евгения Попова (курсам почти 10 лет, но они все еще актуальны, ибо все что в них рассматривается, используется на практике):
- курс по HTML
- курс по CSS

3) Теперь можно перейти к более детальному рассмотрению HTML5 и CSS3. И начать изучение я рекомендую именно с CSS3, так как большая часть возможностей HTML5 с уклоном на JavaScript. На этом этапе рекомендую книгу Дэвида Макфарланда "Новая большая книга CSS". В сети можно встретить книгу с названием "Большая книга CSS" от того же автора, но это предыдущее издание, нужна именно та, которая идет с припиской "Новая". Кроме основных возможностей CSS, книга познакомит с адаптивной версткой и препроцессором Sass/SCSS.
В данной книге рассматривается три способа верстки:
- с использованием float + margin
- более современный - Flexbox CSS
- модульная верстка, на примере сетки Skeleton (хотя способы верстки с использованием сетки Bootstrap и СSS Grid в книге не рассматриваются, принцип работы у них одинаков)

4) Теперь можно переходить к HTML5. К прочтению рекомендую следующие книги:
- Мэтью Мак-Дональд "HTML5. Недостающее руководство"
- Шмитт, Симпсон "HTML5. Рецепты программирования"
Данные книги познакомят не только с изменениями в синтаксисе и семантике HTML5, но с новыми возможностями:
- формы 2.0
- добавление HTML5 аудио/видео
- работа с canvas
- геолокация
- добавление в разметку микроданных
- использование ARIA
- локальное хранилище (sessionStorage)
- автономные приложения (appcache)
- Веб-сокеты (WebSoket)
- и тд

5) Теперь у нас есть общее представление о тегах, стилях, текстовых редакторах, о том как это работает и взаимосвязано между собой, что можно, а что нельзя делать. Пора приступать к практике. Нужно сверстать хотя бы 2-3 страницы из готовых макетов. Теперь по порядку, что нужно сделать:
а) Установить текстовый редактор и настроить его под себя (Notepad++, Sublime Text, Atom, Brackets и тд). На первых этапах подойдет Notepad++, в дальнейшем стоит перейти на что-то более функциональное. Так же рекомендую установить плагин Emmet для Notepad++ и ознакомиться как он работает.
б) Установить основные браузеры, для тестирования верстки (с IE по начало можно не заморачиваться)
в) Установить графический редактор, для открытия готовых макетов (Photoshop, Figma, Avocode, Sketch). На первых порах использовать Photoshop.
г) На первых порах сделать простенькую заготовку для верстки (структуру папок, где будут размещаться стили картинки, скрипты и один файл index.html). В дальнейшем стоит обратить внимание на HTML5 Boilerplate, ну а дальше на Gulp и Webpack
д) Скачать готовые бесплатные psd-макеты
г) Сверстать макеты тремя разными способами:
- float+ margin
- flexbox
- bootstrap или CSS Grid
е) Ну а теперь находим свежий видеоурок на Youtube, где автор верстает тем или иным способом, смотрим и повторяем. В качестве справочников использовать сайты:
- htmlbook.ru
- webref.ru
- caniuse.com

6) В дальнейшем по мере приобретения опыта, всегда будет хотеться упростить задачу или сделать процесс верстки комфортным, в этом случае нужно смотреть в сторону:
- gulp, webpack
- IDE для разработки, н-р, WebStorm
- препроцессоры HTML (HAML, Pug), препроцессоры CSS (Sass, Less, Stylus)
- git
- именование классов CSS
- среды для тестирования
- тд

7) Переходим к JavaScript. Книг конечно много, но я выделю следующие.
Книги на начальном этапе:
- Дэвид Макфарланд "JavaScript и jQuery. Исчерпывающее руководство"
- Фримен Эрик, Робсон Элизабет "Изучаем программирование на JavaScript"
Книги для углубленного изучения:
- Онлайн учебник, в том году обновилась информация
- Дэвид Флэнаган "JavaScript. Подробное руководство"
- Хавербеке Марейн "Выразительный JavaScript. Современное веб-программирование"

8) Переходим на практику, как и в случае с HTML и CSS. Как вариант можно добавить динамичности в сверстанные страницы. Написать простенькую игру, н-р, змейка. Или же найти сайт с задачками, необязательно по JavaScript. Как вариант можно воспользоваться сайтом CodeWars

9) Так же как и в случае с HTML и CSS, по мере приобретения опыта, всегда будет хотеться упростить задачу или сделать процесс верстки/разработки комфортным, в этом случае нужно смотреть в сторону:
- библиотек (jquery, backbone.js и тд)
- фреймворков (React, Vue, Angular)
- Coffeescript, TypeScript
- средства тестирования (н-р: Mocha JS)
- средства документирования (н-р: JSDoc)
- средства проверки кода (н-р: JSLint)
- и тд

Ответ написан более трёх лет назад

Комментировать

Как сверстать эту секцию?

forspamonly2 @forspamonly2

Максим Ленский, вполне реально и с добавлением блоков сделать, и дивками, и чтобы тянулось.

Ответ написан более трёх лет назад

2 комментария

Почему не срабатывает async?

Антон Спирин @rockon404

Frontend Developer

А с чего вы решили, что асинхронная функция должна возвращать Promise без вызова?
Будет работать либо так:

const handleFiles = () => {
  return async handle => {
    let result;
    result = 'hello';
    return result;
  };
};
handleFiles()().then(result => console.log(result)).catch(console.log(e));

либо так:

const handleFiles = async () => {
  let result;
  result = 'hello';
  return result;
};

handleFiles().then(result => console.log(result)).catch(console.log(e));

Складывается впечатление, что вы видели где-то асинхронные действия redux-trunk и даже писали, но толком не понимаете как они работают и зачем над асинхронной функцией обертка. Дело в том, что там вы передаете в dispatch вызов action и middleware получает возвращаемую функцию, а затем ее вызывает.

Ответ написан более трёх лет назад

Комментировать

Заглушка на отсутствующее изображение Vue.js?

Алексей Ярков @yarkov Куратор тега JavaScript

Помог ответ? Отметь решением.

Или так. В main.js в конце пишем

window.fallbackImage = require('./components/img/fallback.png')

Используем так

<img :src="avatar" onerror="this.onerror=null;this.src=window.fallbackImage">

Ответ написан более трёх лет назад

Комментировать

Когда освободится домен?

Довольный Айтишникъ @borisdenis

Как я понял то 2018-04-15 был установлен статус redemptionPeriod

RedemptionPERIOD — означает, что начат процесс удаления домена. Удаление может быть остановлено регистратором в течение 30 дней с момента установки этого статуса. Изменение данных о домене в этот период запрещено. Домен не делегирован.

В статусе redemptionPeriod домен еще может быть восстановлен регистратором. Стоимость восстановления домена в redemptionPeriod обычно равна = цене регистрации х5 (!)

По прошествии 30 дней redemptionPeriod домен переходит в период ожидания удаления — pendingDelete, который длится еще 5 дней.

В этот период домен уже не может быть восстановлен. Таким образом, домен освобождается через 35 дней после вхождения в redemptionPeriod.

Так что осталось подождать еще немного и... скорее всего его выставит на продажу регистратор через аукцион по совсем невыгодной цене

Ответ написан более трёх лет назад

4 комментария

Как из php массива преобразовать Json?

Yan-s @Yan-s

Смешались в кучу кони, люди...

В контроллере переберите массив в новую структуру которая соответствует требуемому формату, типа:

$events = [
  'events' => [
    ['title' => '...', 'start ' => '...'],
    ['title' => '...', 'start ' => '...'],
    ['title' => '...', 'start ' => '...'],
    ['title' => '...', 'start ' => '...'],
  ]
];

во вьюхе пропустите результат через json_encode, получится:

{
  "events": [
    {
      "title": "...",
      "start ": "..."
    },
    {
      "title": "...",
      "start ": "..."
    },
    {
      "title": "...",
      "start ": "..."
    },
    {
      "title": "...",
      "start ": "..."
    }
  ]
}

и выведите с помощью echo или соответствующей конструкции вашего шаблонизатора:

var caledarEvents = <?php echo json_encode($events); ?>;
$(document).ready(function() {
        $('#calendar').fullCalendar(caledarEvents)
});

Ответ написан более трёх лет назад

Комментировать

Почему не работает реактивность?

Nikita Velko @nikichv

Frontend dev. Current stack: Next.js/RTK/Saga

methods: {
  toggle() {
    this.isActive = !this.isActive;
  }
}

Поменяйте стрелочную функцию toggle: () => { на метод toggle() { и тогда все заработает.

P.S. Откуда вы все вообще решили, что в методах компонента нужно писать стрелочные функции? :)
Просто вы не первый с такой проблемой. Ощущение, будто все насмотрелись уроков по ES6 и стали бездумно писать стрелочные функции там, где они вовсе не нужны.

Ответ написан более трёх лет назад

Комментировать

Как проверить входит ли строка в другую строку?

0xD34F @0xD34F Куратор тега JavaScript

Режем введённую пользователем строку на куски:

const termParts = term.trim().toLowerCase().split(/\s+/);

Проверяем наличие каждой части:

if (termParts.every(n => data[i][0].toLowerCase().includes(n))) {

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт