Наконец-то ВК сделало важную обнову. Но это не отменяет того, что в этой соц.сети я нахожусь только лишь из-за ТВ.

Оптимальное размещение элементов сайта

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

Так вот. Чтобы прекратить вопросы А КАК ЭТО СДЕЛАТЬ — используй библиотеку Masonry.

Смотреть — https://masonry.desandro.com/

Бесплатный хостинг с PHP, MySQL и Cpanel

Github Pages это, конечно, хорошо, но он не поддерживает PHP, поэтому ловите ссылку на хостинг, который смог.

Ссылка — https://ru.000webhost.com/

Документация от реальной компании по работе с сайтом для будущих фронтендеров

Один из посетителей нашего чата скинул документацию существующей компании. Там описаны все правила по работе с их сайтом.

Было круто, если бы все компании потратили немного времени на составление таких доков, чтобы будущие работники быстро влились в рабочий процесс. Это яркий пример того, когда работодателю не всё равно.

Смотреть — https://github.com/ninelines-team/ninelines-docs

Если Вы решили проверить свой сайт в IE и нашли там пару багов, то ловите лучшее решение без SMS и регистраций.

Объявляю запуск нового интернет-сервиса FrontendHelp

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

Часто мне пишут в личные сообщения с просьбой проверить ошибку в вёрстке ПРЯМЩАС, но это не всегда возможно, т.к. я одна, а вас много. Часто спасает телеграм чат, но, к сожалению, не все вопросы находят свои ответы.
Решено! Значит мы автоматизируем процесс и создадим сервис, где в режиме реального времени фронтенд-разработчки будут отвечать на ваши вопросы. И назовем его FrontendHelp. Просто и понятно.

Ссылка — https://frontendhelp.me/

Первую неделю сервис будет работать в тестовом режиме. Мы постараемся отладить процесс таким образом, чтобы ваш вопрос получил отклик в режиме 24/7, поэтому не переживайте, если в какой-то момент это не будет соблюдено. Чтобы сгладить этот момент, мы приготовили для Вас приятный бонус: каждый, кто зарегистрируется на сайте до 13 сентября получит на счет 10 бесплатных вопросов. В остальные дни для каждого нового пользователя таких вопросов будет только три.

Суть сервиса проста: оставляете ссылку на вашу разметку (используйте Codepen, JSFiddle, Github Pages или свой сайт), описываете проблему максимально подробно и ждете ответа на свой вопрос. Ответ вы увидите на экране. Если по какой-то причине закрыли вкладку, то посмотреть ответ можно на странице My Questions.

Желательно описывать свою проблему, на английском языке. Но пока есть негласное правило - можете писать вопросы на том языке, на котором Вам комфортнее. Если удобнее писать на русском - пишите. Сейчас главное отладить сервис и чем больше людей протестируют его, тем лучше. Надеюсь получить от Вас фидбэк.

Если заметили косяки в сервисе, то сразу пишите мне — @annblok

С работой сервиса можете ознакомиться по видео — https://youtu.be/IkCRDHjp1kw
Если хотите следить за новостями сервиса, подпишись на канал — https://t.me/frontendhelp

Что же такое FrontendHelp на самом деле? Для чего он был создан?

6 сентября я анонсировала сервис FrontendHelp и получила большое количество вопросов о нём. Возможно, не все поняли его преимуществ в сравнении со специализированными форумами, чатами и, всеми любимым, Google поисковиком. Также была волна вопросов о том, ПОЧЕМУ Я ДОЛЖЕН ПЛАТИТЬ??? На него я тоже ответила :)

Держите подробный ролик, где отвечаю на все вопросы и показываю как легко и просто пользоваться сервисом. Надеюсь, теперь вы иначе взглянете на него :)

Смотреть — https://youtu.be/Q2bXIgdwluw

Воспользоваться сервисом — https://frontendhelp.me/

Шпаргалка Vue.js

Кажется на этом канале я совсем мало говорю о Vue, а зря. Ловите шпаргалку по этому JS фреймворку, которая уже давно пылится на моём компьютере.

Смотреть — http://u.to/mgh-Ew

Книга «JavaScript для детей. Самоучитель по программированию» - Ник Морган

Книга для изучения  JavaScript. Хоть и написано, что она для детей, но даже взрослым она обязательна к прочтению.

Скачать - http://u.to/2xx-Ew

#javascript

Бесплатные макеты PSD многостраничных сайтов

Вы давно просили и наконец-то этот день настал. Я сделала для вас подборку многостраничных сайтов PSD. Надеюсь, вы найдете, что-то для себя и в комментариях оставите ссылку на вашу сверстанную страничку по этим макетам.

Ссылка — https://tpverstak.ru/multipage-psd/

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

Сайт https://frontendhelp.me теперь функционирует на двух языках: английском и русском. Язык будет определяться автоматически в зависимости от настроек вашего браузера или системы.

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

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

Как вам такая новость? Воплощаю в жизнь ваши пожелания.

Как отправить файл с сайта на почту?

Довольно распространённый вопрос, поэтому я решила сделать ответ с подробным описанием файлов, которые потребуются, чтобы сделать это. Под видео вы найдете файлы для формы с вложением на PHP и  JavaScript.

Смотреть — https://youtu.be/Yn1NafVnfpA

Ловите мотивационный сайт, после которого вам непременно захочется верстать лучше, чем сейчас.

Ссылка — http://говносайт.com/

Как должен выглядеть сайт-портфолио frontend разработчика?

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

... Да, ранее эта статья уже была на канале в виде поста, но я её доработала и перенесла на сайт. Информация актуальна как ни когда, поэтому она просто обязана поселиться в блоге.

Читать — https://tpverstak.ru/frontend-developer-portfolio/

Сборщик проектов Gulp 4

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

Итак, теперь с сайта типичного верстальщика вы можете скачать Gulp сборку, которую постоянно совершенствует и дорабатывает @andreyalexeich. Если будут какие-то предложения, то пишите в чат @tpverstakchat, он всегда на связи.

Ссылка — https://tpverstak.ru/gulp/

Компиляция Sass/SCSS и Less в CSS онлайн

Наткнулась сегодня на крутое веб-приложение, которые позволяет конвертировать Sass/SCSS/Less в CSS. Это удобное, если вам, например, потребуется вытащить отдельные CSS стили c сайта Codepen. Несмотря на то, что вряд ли вы им будете пользоваться часто, хотя бы знайте, что такое есть.

Ссылка №1 — https://www.sassmeister.com/
Ссылка №2 — http://winless.org/online-less-compiler

Макеты PSD для практики Grid CSS

Нигде не видела, чтобы кто-то делал такую подбору. В этой статье вы найдете бесплатные PSD макеты, которые идеально подойдут для практики Grid CSS. Пробуй верстать, чтобы не переставать быть востребованным специалистом.

Ссылка — https://tpverstak.ru/psd-grid-css/

Обзор MacOS Mojave: темный интерфейс, скриншоты, шрифты и бесполезные приложения

Составила короткий обзор на обновлённую систему MacOS Mojave. В целом я бы оценила новинку на 3+, но надеюсь все баги и минусы, которые я заметила (и не только я), в скором времени пофиксят, чтобы смело можно было дать оценку 5.

Смотреть — https://youtu.be/hcMcSRlB3s4

Решение проблем на MacOS Mojave

С момента публикации ролика прошло не так много времени, а мне уже скинули годные ссылки на решение проблем с текущим обновлением. Ловите, вам тоже может пригодиться.

Сглаживание шрифтов на Mac/MacBook c не Retina-экраном — https://www.gadgetstyle.com.ua/47140-macos-mojave-fonts-blurry-fixing/
Удаление не удаляемых приложений — https://github.com/banzr/RemoveMojaveApps

Редизайн сайта KFC

Пока вы расслаблялись на выходных (а может быть и нет), студия Артемия Лебедева обновила сайт KFC. Согласно информации в разработке дизайна участвовали 14 человек и потратили на это 339 дней.

Доставайте свои 8K мониторы, чтобы оценить этот шыдевр.

Ссылка на сайт KFC — https://www.kfc.ru/
Информация о проекте — https://www.artlebedev.ru/kfc/