Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam

Пикабу Игры +1000 бесплатных онлайн игр

Веселая аркада с Печенькой для новогоднего настроения. Объезжайте препятствия, а подарки, варежки, конфеты и прочие приятности не объезжайте: они помогут набрать очки и установить новый рекорд.

Сноуборд

Спорт, Аркады, На ловкость

Играть
Классический арканоид для любителей ретро-игр. Защитите космический корабль с Печенькой (и не только) на борту, проходя уровни в арканоиде.

Арканоид Пикабу

Арканоид, Аркады, Веселая

Играть
Герои Войны - микс стратегии и РПГ. Собери лучшую армию и победи всех врагов. В игре 7 различных режимов - как для любителей PvE, так и PvP.

Герои Войны

Стратегии, Мидкорные, Экшены

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

Пикабомбер

Аркады, Пиксельная, 2D

Играть
Собирайте комбинации из блоков! Бесконечный режим, более 100 уровней, ежедневные задания и турниры.

Расслабьтесь и отдохните: игра без ограничений по времени.

Проверьте свою смекалку: головоломка для любителей

Блоки Судоку - расслабляющая головоломка

Головоломки, Гиперказуальные, Мобильная

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • AlexKud AlexKud 26 постов
  • StariiZoldatt StariiZoldatt 3 поста
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

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

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

Учим HTML

966 постов сначала свежее
139
stavropol
stavropol
2 года назад
IT-юмор

Хакеры воспользовались div-инъекцией⁠⁠

Хакеры воспользовались div-инъекцией
IT юмор Картинка с текстом Хакеры Исходный код Код HTML
7
1
Grolribasi
Grolribasi
2 года назад
Лига программистов
Серия Грол-о-работа

На старт, внимание, патч! Как реализовать онлайн-документацию для накопительных изменений⁠⁠

На старт, внимание, патч! Как реализовать онлайн-документацию для накопительных изменений
[моё] Javascript Typescript Разработка HTML Конфигурация Веб-дизайн IT Программирование Длиннопост
3
2
OverCode
OverCode
2 года назад

Веб-студия - производственный ад или благо?⁠⁠

Эх.. Первый пост на данной платформе.
Интересно, получится ли написать что-то интересное?!

Сегодня, хотелось бы создать задаток для будущих постов в данной серии.
Она (серия), повествует, о том, как решил создать свою веб-студию, что из этого вышло на данный момент и выйдет в будущем.

Сразу хочу ответить, что сам по себе - разработчик средней руки.
Имею в стеке HTML5, CCS3, JS, Node.js, PHP, React.js, SQL, PostgreSQL и Kotlin.
Занимаюсь программированием около 3.5 лет и на данный момент, заканчиваю учебное заведение по специальности. С предисловием - всё. Переходим к самому интересному (возможно, что не очень).

Опустим процесс обучения азам и сразу перейдём к моменту получения первого заказа.
Интересно, что успел его выцепить ещё в то время, когда еле-еле освоил азы HTML и CSS.
Как-то гулял по просторам интернета и попал на биржу «Weblancer». Не могу сказать, что она сильно популярная, но в отличие от аналогов в RU сегменте, хотя бы даёт пару бесплатных откликов и возможность получить реальный заказ, а не спамит кучей фейков от ботов.
Тогда, моим максимумом были простенькие landing-page и формочки. Отправив пару откликов на немногочисленные запросы, которые хотя бы в теории мог выполнить, получил один положительный ответ и сразу же упало сообщение в личку от заказчика. Им оказался мужчина из Киева, который занимался перепродажей БУ стиральных машинок. Стоимость работы была мизерная (как и большинство подобных на фрилансе) - около 4000 рублей, но тогда, мне казалось, что это какие-то космические деньги.

Стоит упомянуть, что к моменту сдачи заказа, мы уже успели успешно ретироваться с биржи в Viber и деньги были перечислены напрямую, что в дальнейшем привело к моей блокировке на самой платформе (в целом - не жалею).

Требовался простенький сайт, который должен был включать в себя написанные копирайтером текста и соответствовать заданной стилистике, которая, к слову, была достаточно лёгкой, так как, представляла из себя что-то похожее на сайты прямиком из середины нулевых.
Ох.. Каким же испытанием для меня стала вёрстка этого простенького на данный момент макета и его адаптирование под мобильные устройства. Ушли примерно 2 дня, слёзы, пот, кровь и нервы, но сайт был сделан и функционирует по сей день.

Заказчик был крайне доволен, оставил положительный отзыв и предложил подработать личным репетитором для его сына. Ставку согласовали в размере 500 руб/час (взрыв мозга для меня в 17 лет). Можно ли сказать, что был хорошим репетитором? Думаю, что да, хоть мои знания на тот момент и ограничивались самым базисом, старался подготавливать интересный материал и повторять все необходимые темы к урокам. Потом, парень ушёл на летние каникулы и к сожалению - больше мы не сотрудничали. В этом году, мужчина написал мне в Discord с просьбой помочь разобраться в части кода и мы быстренько разобрали, что там и как. Собственно, больше не контактировали, но опыт оказался интересным и зародил во мне желание найти подобное в будущем.

Долго ждать не пришлось - спустя месяц, упал заказ по вёрстке продающей landing-page под прогнозы на спорт. К слову.. Это был мой первый негативный опыт (кинули), но хочу оставить эту часть истории для отдельного поста. Возможно, что кому-то будет интересно, как избежать подобного и не потерять собственные время, деньги, силы и нервы.

Затем, последовал период проблем в личной жизни и мне пришлось выпасть из всего этого примерно на год. Осознал, что нахожусь в простое и никуда не двигаюсь. Принял волевое решение сутками налегать на документацию и в ускоренном темпе осваивать различные технологии. Так прошло около нескольких месяцев и на меня вышел подрядчик. Мы успели закрыть несколько крупных заказов и несколько landing-page, вошёл во вкус и начал получать удовольствие от профессии - это уже не было таким адом, каким было в момент изучения материала. Сложно передать боль и страдания во время изучения чего-то сложного, когда месяцами не выходишь из дома, смотришь в экран и пытаешься в чём-то разобраться, но предполагаю, что студенты технических ВУЗов смогут понять.

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

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

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

А вот что же будет дальше, Вы, узнаете из последующих постов, которые, уверяю - будут интересными, объёмными и постараются передать Вам наш опыт.

С Вами был OverCode.
Всех благ и до новых встреч!

Веб-студия - производственный ад или благо? IT, Web-программирование, Веб-разработка, Верстка, Блог, Истории из жизни, Программирование, Интернет, Услуги, Поиск работы, Заказ, Бизнес, Wordpress, CSS, Удаленная работа, Опыт, Фриланс, Программа, Javascript, HTML, Длиннопост
Показать полностью 1
[моё] IT Web-программирование Веб-разработка Верстка Блог Истории из жизни Программирование Интернет Услуги Поиск работы Заказ Бизнес Wordpress CSS Удаленная работа Опыт Фриланс Программа Javascript HTML Длиннопост
12
1
Аноним
Аноним
2 года назад

Помогите с выбором курсов по frontend-разработке⁠⁠

Всем привет.

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

Остановился на html и css, javascript упорно не хочет лезть в голову, правда я только 1 курс начинал проходить от Ивана Петриченко.

Я уже предрекаю комментарии в духе "Какой же ты разработчик, если сам не можешь найти материал" или "Еще один прАграмист", но прошу отнестись с пониманием: мне 25, хочу сменить сферу деятельности и пока только это меня привлекает.

Без рейтинга Помогите найти Программирование Web-программирование HTML CSS Javascript Текст
23
Houdou
Houdou
2 года назад

Как лучше сделать приложение?⁠⁠

Я делаю приложение с тестами. Самый главный вопрос - как его сделать. Из вариантов сайт (сделать заточенный под мобилу сайт, а в приложении тупо браузер с ним) или целое приложение (будет напрямую соединяться с хостингом и бд). Как лучше?

[моё] Программирование Java HTML PHP Текст
12
shaitan.vladimir
shaitan.vladimir
2 года назад
Web-технологии

PADDING | MARGIN | BORDER | BOX-SIZING [Урок 7] - Отступы в CSS⁠⁠

В этом уроке разберем абсолютно все нюансы по работает с отступами в #CSS и #HTML.

Изучим: работу CSS свойств: padding, margin, border и box-sizing и полностью разберем все нюансы работы с шириной элементов и взаимодействию отступов с ними.

Домашнее задание к этому уроку ищи здесь - https://t.me/VS_FRONTEND/803

https://youtu.be/sAlpKnFGrDs

[моё] Программирование Программист IT CSS Css3 HTML Основы HTML Htmlbook Html 5 Браузер Frontend Разработчики Web Веб-разработка Pikaweb Видео YouTube
16
23
DELETED
2 года назад
Лига программистов

Самый большой проект на бесплатной cms⁠⁠

Итак, меня сделали админом этого сообщества :) К сожалению, постов тут нет, так что модерировать особо нечего. Старые посты тоже модерировать уже нельзя :)

Попробую исправить ситуацию :) Напишу пост сам и забаню кого-нибудь в комментариях :)

Насколько нелепо большие проекты вы писали на простых бесплатных cms? В моей практике, присутствует интернет магазин с собственным движком и практически годом разработки на wordpress и крупный проект в сфере телекома ( https://irt24.ru/ ).

Проект в сфере телекома, продажа интернет и ТВ тарифов, по сути сайт посредник(диллер) продающий тарифы Ростелекома/МТС и прочих через свой функционал.

На старте функционал выглядел не очень большим, на пару месяцев работы, подумаешь парочка тарифов и не такое делали. Максимум 6-8 месяцев, хотя сроки я не взялся сразу точно назвать.

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

Там где на сайте скромный каталог из четырех разделов, в админке скрыто ещё 10-к каталогов взаимосвязанных друг с другом. Тарифы телевидения содержат каналы, каналы распределяются по пакетам каналов, делятся по тематикам итд.

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

Один экран, с настройками роутеров(подобные экраны ещё два вверх, несколько вниз):

Самый большой проект на бесплатной cms Программирование, Телекоммуникации, Wordpress, PHP, Javascript, Jquery, CSS, HTML, IT, Длиннопост

На самом сайте, разумеется фунционал тоже реализовывался без лишней скромности и с максимальным размахом. Беглый просмотр функционала Ростелекома и МТС по тематике показал крайнюю их узость и отсутствие массы ценных и необходимых пользователю функций.

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

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

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

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

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

Самый большой проект на бесплатной cms Программирование, Телекоммуникации, Wordpress, PHP, Javascript, Jquery, CSS, HTML, IT, Длиннопост

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

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

Так же, никогда нельзя забывать про мобильные устройства, все должно работать на любом смартфоне/планшете/умном холодильнике(кто знает как жизнь повернется?)

И так, тарифы подобраны, дальше нужно их сравнить. Здесь нужно реализовать функционал сравнения по каждой опции и от щедрой души разрешить сравнивать между собой даже тариф только с интернетом, против тарифа только с ТВ. Вдруг появятся желающие(ценители).

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

Чистый php, общение с базой данных через базовый функционал WP.

Jquery и парочка простых библиотек.

Файлы в коде изолированы по модулям, модуль сравнение содержит все свои стили, скрипты и файлы php шаблонов. То есть, практически автономен, имеет свой css и свой js, не подгружаемые другими модулями. Заметных сложностей с поиском кода не было :)

Показать полностью 2
[моё] Программирование Телекоммуникации Wordpress PHP Javascript Jquery CSS HTML IT Длиннопост
39
64
cherkalexander
cherkalexander
2 года назад
Web-технологии

Как браузер рендерит веб-страницу⁠⁠

Для фронтенд-разработчиков очень важно знать, как происходит отрисовка веб-страницы на всех этапах: от отправки запроса на сервер до отображения картинки, которую мы видим в браузере.

Как браузер рендерит веб-страницу Javascript, Браузер, CSS, HTML, Производительность, Frontend

Чтобы быстро разобраться в основах можно почитать следующие 3 статьи:

  • Дока - Как браузер рисует страницы

  • Reflow, Repaint, Composite — что это и как это работает?

  • Понимание критического пути рендеринга

Затем, чтобы погрузиться в детали — можно прочитать статью:

  • How the browser renders a web page? — DOM, CSSOM, and Rendering

Статья достаточно большая, поэтому лучше её читать постепенно и не один раз. Я читал раза 3 с перерывами и выписал для себя основные моменты:

  1. Браузер отправляет запрос на сервер и получает в ответ текстовый HTML файл с заголовком Content-Type: text/html; charset=UTF-8

  2. Браузер парсит полученный файл и создаёт DOM (Document Object Model)

  3. Браузер считывает CSS из всех ресурсов и строит CSSOM (CSS Object Model)

    1. CSSOM не содержит не визуальные элементы: script, meta, title, …

    2. Для построения CSSOM используются: стандартные стили браузера, авторские стили (которые и пишут разработчики), стандартные стили описанные в W3C CSS и правила каскадного наследования CSS

  4. DOM Tree + CSSOM Tree = Render Tree

    1. Содержит лишь видимые на экране элементы

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

  5. Процесс отрисовки страницы

    1. Элементы на странице могут перекрывать друг друга (z-index). Поэтому браузер располагает элементы на различных слоях.

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

  6. Композиция слоёв

    1. Происходит объединение упомянутых выше слоёв

    2. Слои разделены на тайлы, так как композиция слоёв будет происходить при изменении стилей или размеров окна браузера

  7. Все перечисленные выше операции представляют собой Critical Rendering Path (CRP) — последовательность операций, которые необходимо произвести браузеру для отображения страницы пользователю

  8. Парсинг и сторонние ресурсы

    1. Браузер парсит HTML по мере скачивания (не ждёт скачивания всего документа)

    2. Парсинг HTML происходит в основном потоке исполнения JavaScript

  9. Parser Blocking Scripts

    1. Это скрипты, которые приостанавливают парсинг HTML

    2. Если парсер натыкается на тэг script — парсинг приостанавливается и происходит выполнение скрипта

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

    4. Браузер приостанавливает парсинг, так как мы можем изменять DOM с помощью JavaScript. Иначе мы бы столкнулись с race condition между JavaScript и парсером, ведь JavaScript может модифицировать DOM дерево

    5. Можно использовать async атрибут тэга script, чтобы не блокировать парсер при скачивании js-файла, файл будет выполенен, как только загрузится.

    6. Также можно использовать тэг defer, который работает также как async, но выполнение скрипта произойдёт только когда завершится парсинг

  10. Render Blocking CSS

    1. Построение CSSOM происходит в главном потоке

    2. Построение CSSOM не происходит по мере скачивания (в отличии от построения DOM). CSSOM обновится, когда сторонний файл со стилями будет загружен целиком. Пока стили не загружены, Render Tree не будет обновлено. Поэтому CSS - render blocking ресурс.

      1. В то же время, построение DOM дерева продолжается.

      2. Если парсер натыкается на тэг script, то он будет скачан, но не будет выполнен до тех пор, пока не завершится загрузка файла со стилями. Это важно, так как мы можем манипулировать CSS свойствами через JavaScript. Такой CSS называется script-blocking.

    3. Так как построение Render Tree приостановлено, следовательно и Critical Render Path застопорился, и контент не обновляется.

    4. Чтобы не блокировать рендеринг, необходимо загружать стили как можно раньше, желательно в секции head

Какие статьи помогли вам понять, как браузер рендерит страницу?

https://t.me/cherkashindev/74

Показать полностью
[моё] Javascript Браузер CSS HTML Производительность Frontend
11
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии