​​Шпаргалка Wordpress #1

Ссылка на каталог: <?php echo bloginfo('template_url'); ?>

Шаблон для создания страницы:

<?php
/*
Template Name: lorem
*/
 ?>

Ссылка на изображение:

style="background-image: url('<?php echo bloginfo('template_url'); ?>/img/wallpaper.jpeg');"

Вывод статей: 

 <?php

$args = array(
 'numberposts' => 7,
 'category_name' => 'post',
 'orderby' => 'date',
 'order' => 'DESC',
 'include' => array(),
 'exclude' => array(),
 'meta_key' => '',
 'meta_value' => '',
 'post_type' => 'post',
 'suppress_filters' => true,
);


$posts = get_posts( $args );

foreach ($posts as $post){ setup_postdata($post);
 ?>

Контент


      <?php
   }

   wp_reset_postdata();

      ?>

​​Как закреплять основы javascript на практике?

1. Попытайтесь писать код без постоянно открытой документации или вообще оффлайн. Только Вы и Javascript

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

2. Берите большие проекты на GitHub, пытайтесь вникнуть в них, конечно сразу получатся не будет.

​​Практика построения объектов

Необходимые знания:

Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (see First steps and Building blocks) и основами OOJS (Introduction to objects)

Цель:

Получение некоторой практики в использовании объектов и объектно-ориентированных методов в реальном мире

​​SEO продвижение SPA приложений?

Во Vue, хорошо с этим справляется Nuxt.js, но как же другие?

Все поисковики уже индексируют страницы после исполнения JS-скриптов.
Т.е. не важно, что у Вас в SPA и как формируется контент скриптами: все текстовые строки - будут проиндексированы корректно.
Единственное, что важно: если у Вас будет несколько страниц в SPA (для прямого перехода сразу в нужное место внутри SPA через URL) - Вам необходимо это явно указывать:

1. через hash-тэги (в конце URL SPA: /SPA/#!/category/subcategory/....),
2. HTML5-History
3. meta rel ="canonical"
для корректности индексации нескольких виртуальных страниц поисковыми системами.

​​JavaScript Используется только в Frontend?

Возможности JavaScript:

1. Бэкенд на Node.js - довольно популярная ниша сегодня
2. Игрострой - на JavaScript можно управлять контентом в Canvas - чтобы рисовать графику и игры
3. Приложения для PC - Electron
4. Приложения для Android/IOS - React Native
5. В игрострое Unity, Unreal Engine и др. поддерживают JS

Очень активно сегодня используется, например, в Serverless разработке, skill для ассистентов, чатботах.

У JS высокая скорость распространения, так что спрогнозировать насколько он еще распространиться невозможно. Но и на данный момент, он достаточно сильно распространен.

​​JS тесты: Собеседование по JavaScript

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

​​Что лучше для серьезной CRM: Vue или React?

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

Как по мне React это что-то для лендингов. Что бы делать какое-то более серьезное приложение - не годится. А vue очень хорошо для больших проектов. Сыроват не vue, сыроваты библиотеки под него, вроде того же bootstrap.

Я знаю что airbnb и пр. Гиганты написаны на react, но боюсь - это не стоило того, чтобы потратить кучу времени на написание кучи велосипедов поверх самого React

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

Про Vue писать много не буду. Если он раньше догонял в силу молодости, то сейчас уже обгоняет старичков, комьюнити растет, появляется множество компонентов
П.С. Сам я во Vue.js

​​JavaScript без верстки

Часто сталкиваетесь с рутиной верстки сайта? Если думали дальше развиваться в JS, попробуйте другие направления в языке:

1) Node.js
2) React-native, nativescript, titanium - для мобильный приложений, там есть подобие html/css, но все же только подобие.
3) https://github.com/kusti8/proton-native - для десктопа без html/css, но с реактом и что-то значительно более нишевое.
4) Ну, или идите в разработку SPA, там минимум верстки.

​​Шпаргалка Woocommerce #1

Вывод товаров Woocommerce

<?php echo do_shortcode('[recent_products] '); ?>


Вывод корзины через шорткод

[woocommerce_cart]

Ссылка для добавления товара в корзину WooCommerce

<a href="/cart/?add-to-cart=<?php the_ID(); ?>">Добавить в корзину</a>

[product] — когда нужно вывести какой-то определённый товар

[product id="122"]

​​Стоит ли использовать bootstrap в уникальном дизайне?

Если есть свои наработки, то я считаю, что bootstrap не нужен. Да и уникальный дизайн не удобно делать на bootstrap. Сам в повседневной деятельности, обращаюсь к bootstrap, но если блоки, container, не подходят под проект, проще написать самому, чем делать костыли и тратить время на адаптив вашего дизайна.

​​Middle JavaScript Developer - что нужно знать

Что нужно знать чтобы устроится на Middle JavaScript Developer:

1) JavaScrit (версия ES5) (20%)
2) jQuery (20%)
3) HTML5, CSS3 (10%)
4) Bootsrap, LESS, SASS (10%)
5) JS Build Systems (npm, bower, gulp, grunt) (10%)
6) git, gitHub (10%)
7) Design Patterns (5%)
8) Refactoring (5%)
9) Angular.js / Vue.js / React.js

Хорошим плюсом будет:

1) Unit testing (Karma + Jasmine)
2) Node.js
3) BackBone.js
4) JavaScript ES6 + Babel
5) JS loaders (System.js, Require.js)
6) Flexbox

​​Больше, чем просто верстка

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

1. Wordpress(настройка панели под нужды клиента)+знание WooCommerce будет хорошим дополнением.

2. OpenCart, еще одна CMS с которой вы хорошо себя будете чувствовать, как на фрилансе, так и в студии.

3. Основы SEO помогут делать дополнительные продажи клиенту, да и многие компании сейчас требуют это.

​​Junior React Developer - что нужно знать

1. Хорошее знание JavaScript. В React разработке используется ES6 и большинство экспериментальных фич еще не вошедших в стандарт.

2. Хорошее знание HTML и CSS. Кроссбраузерная верстка. Так же, хорошо иметь представление о том, что такое css-in-js.

3. Web APIs. Умение работать с объектной моделью документа(DOM) и все эти XMLHttpRequest, localstorage, cookie, history и прочее.

4. Хорошее знание API React. Вы должны хорошо знать React, знать его возможности, понимать основные концепции и уметь ответить на большинство типовых вопросов. Для этого достаточно хорошо изучить документацию, разобрать пару типовых проектов на github и попрактиковаться. Много полезной информации, приёмов и идей можно подчерпнуть из тематических статей и докладов. Так же, на просторах интернета можно найти подборки типовых вопросов, часто задаваемых на собеседованиях. В англоязычном сегменте их больше.

5. Redux. Уверенное знание API. API библиотеки до боли пост. Знать, что такое промежуточное ПО и зачем оно. Понимать базовые концепции архитектуры Flux. Все это есть в документации и многочисленных курсах.

6. Умение работать с менеджером пакетов npm на базовом уровне.

7. Node.js. Хотя бы уметь написать простейший express/koa сервер, который будет отдавать ваше приложение и статику.

8. Webpack. Базовые знания.

9. Умение работать с git. Хотя бы знать и уметь примерять команды: init, clone, add, commit, push, pull, merge, checkout.

10. Иммутабельность. Четкое понимание зачем это надо. Знание приемов иммутабельного изменения структур данных. Это есть в официальном туториале React.

11. Статическая типизация TypeScrpt/Flow. Для начала хватит самых основ и способности понимать чужой код.

12. Функциональное программирование. Хватит знаний полученных в процессе изучения JavaScript, а так же не помешает знать, что такое каррирование, чистые функции и рекурсия.

13. Базовые концепции ООП. Хватит знаний полученных в рамках изучения JavaScript.

14. Асинхронный код. Понимать как его правильно организовывать. Promise, async/await.

15. Сетевые протоколы передачи данных. Вполне хватит базовых знаний о http/https, о том, что такое заголовки и какие они бывают. Хорошо знать о том, что такое websocket.

16. За плечами должен быть хотя бы один учебный проект на React. Хватит типового тестового задания.
Примеры таких заданий: 1, 2, 3(сайт может быть не доступен на территории РФ, советую отрыть через VPN и посмотреть), 4, 5. Если подобного проекта у вас нет, то будьте готовы, что потенциальный работодатель предложит вам выполнить тестовое задание и только по его результату вас, может быть, пригласят на техническое интервью. Если напишите хорошо, вас скорей всего пригласят.

17. Желателен опыт создания типовых UI элементов. Например, чтобы не вызывало трудностей написать простой кастомный чекбокс. Куча примеров реализаций типовых элементов есть на codepen.

Backend-Мастер - авторский блог про backend в телеграм.

Этот канал для тебя, если ты:

- учишь backend и языки программирования
- работаешь на Python / PHP / Ruby
- хочешь выйти на фриланс
- интересуешься Django / Laravel / Ruby on Rails

​​Шпаргалка по работе с DOM #1

Создание элементов

document.createElement(tag) - создать элемент с тегом tag
document.createTextNode(txt) - создать текстовый узел с текстом txt
node.cloneNode(deep) - клонировать существующий узел, если deep=true то с подузлами.

Свойства узлов

node.nodeType - тип узла: 1(элемент) / 3(текст) / другие.
elem.tagName - тег элемента.
elem.innerHTML - HTML внутри элемента.
node.data - содержимое любого узла любого типа, кроме элемента.

Ссылки

document.documentElement - элемент <HTML>
document.body - элемент <BODY>

По всем узлам:

parentNode
nextSibling previousSibling
childNodes firstChild lastChild

Только по элементам:

Дети: children (В IE 8- также содержит комментарии)
Соседи, кроме IE8-: nextElementSibling previousElementSibling
Дети, кроме IE8-: firstElementChild lastElementChild

Таблицы

table.rows[N] - строка TR номер N.
tr.cells[N] - ячейка TH/TD номер N.
tr.sectionRowIndex - номер строки в таблице в секции THEAD/TBODY.
td.cellIndex - номер ячейки в строке.

Формы

document.forms[N/name] - форма по номеру/имени.
form.elements[N/name] - элемент формы по номеру/имени
element.form - форма для элемента.

​​Тест на знание основ Vue JS

Можно выбрать 3 уровня сложности:
Начальный уровень
Средний уровень
Сложный уровень

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

​​jQuery Quiz Plugin на CodePen

Викторина о плагине, созданная этим плагином.
$('#quiz').quiz

​​Каких знаний php для верстальщика будет достаточно?

1. Надо уметь выводить в шаблонах переменные.

2. Писать логические условия (если пользователь не авторизован, то показываем форму входа, если нет, то ссылку на личный кабинет).

3. Писать циклы (в шаблон передается переменная с массивом постов, верстальщик должен написать цикл для их отображения).

4. Надо знать базовое API языка, встроенные функции для работы с числами, массивами, строками, датами и тп.

5. Нужны знания синтаксиса объектов. Понимать не обязательно, главное знать как вывести содержимое.

​​Нужно ли использовать препроцессоры CSS?

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

Это удобная штука, не нужно ее бояться, не нужно бояться webpack, фреймворки, но и не нужно фанатеть, это просто инструменты.

1) Переменные.
2) Наследования
3) Вложенность
4) Авто-префиксы

Вот 4 основных причины для вас.