Чтение текста с помощью JavaScript.
Это делается с помощью интерфейса SpeechSynthesisUtterance на базе WebSpeech API. Делал по уроку, ссылку прикреплю к посту, добавил выбор языка и получилось такое приложение, посмотреть результат можно тут. Исходный код тоже прикреплю к посту

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

Сделайте первый шаблон и попробуйте сверстать один сайт с его помощью, сразу будут видны недочеты — это нормально, он будет обновляться очень часто, опытные верстальщики по 10 лет улучшают свои шаблоны

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

Правильный шаблон — ускоряет верстку, со снипеттами аналогично

Табы из админки.
Сделал небольшие изменения: добавил новый стиль кнопкам, стилизовал всплывающию форму, добавил блок услуги

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

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

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

https://teletype.in/@programmerway/tLd45jLgP

С каждым днём все лучше понимаю Wordpress, сегодня наткнулся на реально понятный урок по натяжке верстки, с удобной и понятной админкой и кастомными полями

Чтобы выучить что-то новое надо просто делать, пускай это будет неправильно, но нужно погрузиться в сам процесс и понять почему это неправильно

Если будут какие-то вопросы задавайте их в чат, с радостью отвечу

Ну вот, теперь мой контент динамический! Сделал через плагин. ACF и просто прикрутил произвольные поля, теперь осталось их перевести и можно покупать домен и хостинг.
Удачного понедельника!

​​Свой «парикмахер».
Вижу людей, которые считают, что заказы можно находить только на фриланс биржах и никак иначе. Но это не так! 

Зайдя на ваш профиль в Инстаграм, Фейсбук, ВК можно ли определить, что вы делаете сайты или как-то с этим связаны. Это больше относиться к собеседованию, но заказчик тоже может зайти на ваш профиль в соц сетях. Заказчик ожидает увидеть адекватного человека, который увлечён своим делом, оправдайте его образ о фрилансере

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

Будте своим «парикмахером», среди знакомых и друзей

​​Woocommerce.
Плагин позволяющий превратить сайт на Wordpress в полноценный интернет магазин

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

Советую посмотреть ознакомительный урок и покопаться в коде плагина, только так можно понять материал тык

​​Зачем нужен bootstrap?
Я на люблю bootstrap, он мне не понравился с первого же проекта его загруженностью всякими мелочами, единственная полезная вещь — сетка, но ее легко можно заменить/сделать средствами флекса и грид

Если использовать инструмент правильно, то даже на bootstrap можно делать красивые проекты. Я же его использую только для наглядности или когда надо быстро сделать разметку. Bootstrap рассчитан на маленькие проекты и на быстрое создание разметки

Если вам нужно быстро сверстать лендинг, то смело можно использовать bootstrap, а если это большой проект или вы будете его дальше поддерживать и оптимизировать, то лучше используйте старый добрый флекс(гриды тоже можно, но следите за поддержкой)

+1 работа в портфолио.
Сврерсал ещё одну работу в портфолио, макет был напичкан мелкими деталями на которые уходит много времени. Результат можно посмотреть тут, код прикреплю к посту. Делал по марафону LuxTrader, о котором рассказывал в этом посте

​​Платят не за знание тегов, а за решения.
Если верстка не ломается от изменений текста или картинки, то это хорошая верстка, но это не просто наброски тегов и стилей, это решения, принятые верстальщиком и за это ему и платят

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

Как выбирать наилучшие решения? — практикуйся и смотри марафоны. Плюс марафонов, это то, что ты можешь смотреть решения автора в той или иной ситуации. А практики много не бывает

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

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

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


https://teletype.in/@programmerway/lDErRzFy6

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

Кому интересно, язык изменяю с помощью плагина Polylang, вот хороший урок по нему

404.
Самая распространённая ошибка сервера, это когда он не может найти нужную станицу по запросу. Для этой ошибки в wp даже предусмотрена отдельная страница 404.php

Я уже рассказывал про это в одном из своих постов, но теперь я сделал собственную станицу и подключил ее к wp! Поправил слайдер и пару мелочей по верстке и плагинам

Сейчас стоит вопрос:
«Делать ли отправку форм через плагин или не нагружать сайт и сделать все в ручную?»
Думаю всё-таки сделать самому так как подключать целый плагин для 2 форм бессмысленно, если у вас есть другое мнение — напишите в чате

​​Улучшение верстки №1.
Запускаю новую рубрику, в ней я расскажу про крутые фичи, о которых мало кто знает, начнём!

_ibg.
Многие на курсах говорят, что картинку беграундом лучше не ставить, все дело в том, что при посадке на CMS изменяются пути и поэтому нужно прибегать к костылям. Да и удобнее поменять картинку прямо в HTML, чем лезть в стили. Для этого был придуман ibg(image background), подробности есть по ссылке или в этом видео

PS: родителю картинки не забудь указать:
  &__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

  }
Чтобы отобразилось

8 проектов для того, чтобы стать Full Stack разработчиком.
Давно не было статей, увидел одну английскую статью с крутыми идеями для прокачки навыков

Проекты идут от простого к сложному и в каждом есть что-то интересное тык

​​​​Улучшение верстки №2.
Вторая часть рубрики, сегодня речь пойдет о снипеттах 

Допустим что бы создать структуру документа в html вводим ! + tab. За этим способом вы можете вводить в программу свои "сокращения". Снипетты можно создать не только для html, но и для любых языков программирования. Правильно сделанные снипетты могут ускорить процесс програмивания в решении рутинных задач

Также к этому посту будет прикреплённо видео с подробным разбором снипеттов в vs code

Image Uploader.
Сделал первый проект из недавнего поста о 8 идеях для Full Stack. Получилось даже лучше чем планировал, сделал за все выходные.

Все четко по ТЗ:
•Файлы можно загрузить дропом в область или нажав на кнопку
•Они автоматически(без перезагрузки страницы) летят на сервер
•Во время загрузки срабатывает прелоадер
•По итогу выводиться картинка и ссылка(копируется в буфер обмена по нажатии на кнопку)
•Ссылка ведёт на картинку

Задание выполнено, даже сделал адаптивно. Поиграться с кодом можно тут, скоро куплю домен и хостинг и уже смогу кидать демо с бэкендом

DLE.
Постов не было т. к. трудился над заказом. Пару слов о заказе: сайт с электронными книгами, нужно было сделать редизайн(поменять стили, цвета, шрифты и расположение блоков), бюджет был 50$

Сайт находился на cms DLE, не сильно разбираюсь в рейтингах, но комьюнити маленькое. На сайте не было файлов .php, вместо них были .tpl(что-то типа упрощенного php, встречался с ними, когда брал заказы по opencart), но при открытии файлов все буквы у меня почему-то слетали, потом я загуглил и оказалось что у сайта другая кодировка, файлы соответственно нужно открывать с такой кодировкой, теперь буду внимательней

​​Улучшение для верстки №3.
Правильно выбранная среда разработки значительно ускоряет процесс. Поставь тему с цветами не режущими глаз, например я использую horizon theme

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

Самое первое на что нужно обращать при выборе железа, нет, это не на мощность, а на экран, в идеале лучше купить сразу несколько мониторов

Улучшая среду ты ускоряешь процесс