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

Игра в кальмара 2: новые испытания

Аркады, Казуальные, Для мальчиков

Играть

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

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

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

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

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

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

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

HTML + Web

С этим тегом используют

CSS Программирование Javascript Верстка IT Сайт Web-программирование Веб-разработка Дизайн Все
114 постов сначала свежее
8
frontru
frontru
4 года назад

Анимированное меню навигации, используя HTML и CSS⁠⁠

Приветик всем. Это видео-демонстрация выполненной работы, а так же процесс ее создания.


Исходный код можно пощупать вот по этой ссылке: https://jsfiddle.net/y5o2pxah/

[моё] Frontend Javascript IT Web Программирование Веб-разработка Верстка HTML Web-программирование CSS Pikaweb Учеба Видео
0
12
frontru
frontru
4 года назад

Создание анимированной формы поиска, используя HTML, CSS и JavaScript⁠⁠

Приветствую. В этом видео показа анимированная форма поиска, а так же процесс ее создания.


Исходный код можно пощупать по ссылке: https://jsfiddle.net/fwku8ptv/

[моё] Frontend Javascript IT Web Программирование Веб-разработка Верстка HTML Web-программирование CSS Pikaweb Учеба Видео
8
9
frontru
frontru
4 года назад

Создание анимированной кнопки "Поделиться" используя html и css⁠⁠

Приветствую. В этом видео показа демонстрация кнопки "Поделиться", а так же процесс ее создания.


Исходный код можно пощупать по ссылке: https://jsfiddle.net/2pvheqwx/

[моё] Frontend Javascript IT Web Программирование Веб-разработка Верстка HTML Web-программирование CSS Pikaweb Учеба Видео
4
3
frontru
frontru
4 года назад

[Гайд] Как сделать анимацию блика на кнопку используя html и css⁠⁠

Хэллоу Ворлд, как говорится. Я учел комментарии своей прошлой публикации, хочу сказать, что мне приятно получать уже на начальном этапе фидбек от людей. В этом видео я сделал не сложный элемент блика при наведении на кнопку. Открыт к любой критике, пишите. Хорошего дня ✌️

Поиграться можно по ссылке: https://jsfiddle.net/wc2oeapv/

Показать полностью
[моё] Frontend Javascript IT Web Программирование Веб-разработка Верстка HTML Web-программирование CSS Pikaweb Учеба Видео
6
3
frontru
frontru
4 года назад

[Гайд] Как сделать красивую анимированную загрузку используя HTML и CSS⁠⁠

Привет пикабушники, возможно кто-то и из разработчиков найдется. Можете судить по полной. Начал вести свой небольшой канал по разработке тех или иных элементов, которые встречались на моем пути Web разработчика. Все видео на канале оснащены исходным кодом, так что, если кто-то интересуется разработкой, прошу жаловать)

[моё] Frontend Javascript IT Web Программирование Веб-разработка Верстка HTML Web-программирование CSS Pikaweb Учеба Видео
7
7
Arh89
4 года назад

Как посмотреть пароль в форме ввода пароля?⁠⁠

Привет всем! Я уверен, что большинство знают такой способ. Но мне хочется показать.

Зайдем например на всем известный vk.com

Как посмотреть пароль в форме ввода пароля? HTML, Web, Длиннопост

Я туда ввел левые данные, для примера .

Дальше нам потребуется открыть консоль разработчика.

Вот инструкция как открыть в google chrome эту консоль

Как посмотреть пароль в форме ввода пароля? HTML, Web, Длиннопост

Появится примерно такое окно.

Как посмотреть пароль в форме ввода пароля? HTML, Web, Длиннопост

Нам нужно выбрать этот инструмент в консоли разработчика

Как посмотреть пароль в форме ввода пароля? HTML, Web, Длиннопост

Дальше нам нужно мышкой навести на форму ввода пароля, и кликнуть левой кнопкой мыши, после чего мы увидими html разметку страницы. Выбираем в правом окне наш тег input и меняем его атрибут type="password" на type="text"

Как посмотреть пароль в форме ввода пароля? HTML, Web, Длиннопост

После того как вы это сделали, в форме ввода пароля, будет виден пароль

Как посмотреть пароль в форме ввода пароля? HTML, Web, Длиннопост

Не знаю, на сколько это полезно. Всем спасибо !

Показать полностью 6
[моё] HTML Web Длиннопост
13
3
deh4567
deh4567
4 года назад

Топ-5 моих любимых плагинов для Visual Studio Code⁠⁠

Для тех, кто не в курсе, Visual Studio Code – это бесплатный и кроссплатформенный текстовый редактор, созданный компанией Microsoft. Он достаточно быстро стал «народным любимцем», ввиду его высокой производительности и обильного функционала.


1. Live Server

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

Топ-5 моих любимых плагинов для Visual Studio Code IT, Web, Web-программирование, Visual Studio, HTML, Javascript, CSS, Длиннопост

2. Quokka

Quokka – это утилита, дающая вам возможность предварительного просмотра результата выполнения того или иного куска кода. Она выдает вам результаты выполнения функций и посчитанные значения переменных. Расширение легко настроить, и оно запускается из того же ящика, что и JSX или Typescript проекты.

Топ-5 моих любимых плагинов для Visual Studio Code IT, Web, Web-программирование, Visual Studio, HTML, Javascript, CSS, Длиннопост

3.Color Info

Небольшой плагин, который даёт вам возможность получать краткую справку об используемых в CSS цветах. Наведя курсор на название цвета, вы можете увидеть, как этот цвет выглядит, а также получить всю информацию о трансляции данного цвета в разные форматы (hex, rgb, hsl и cmyk).

Топ-5 моих любимых плагинов для Visual Studio Code IT, Web, Web-программирование, Visual Studio, HTML, Javascript, CSS, Длиннопост

4. CSS Peek

С этим плагином вы можете отслеживать определения CSS классов и id таблиц стилей. Для этого просто достаточно кликнуть правой кнопкой мыши на селектор в вашем HTML файле и воспользоваться функцией Перейти к определению или Подсмотреть определение.

Топ-5 моих любимых плагинов для Visual Studio Code IT, Web, Web-программирование, Visual Studio, HTML, Javascript, CSS, Длиннопост

5. HTML Boilerplate

Это расширение упрощает работу с HTML файлами, избавляя вас от необходимости прописывать теги head и body вручную. Просто наберите в пустом файле html, нажмите на Tab, и VS Code сам сгенерирует шаблон вашего документа.

Топ-5 моих любимых плагинов для Visual Studio Code IT, Web, Web-программирование, Visual Studio, HTML, Javascript, CSS, Длиннопост

P.s Если тебе IT тематика, и ты хочешь больше контента на тему IT то можешь подписаться на Telegram канал: t.me/AlphaCodeJS

Показать полностью 5
IT Web Web-программирование Visual Studio HTML Javascript CSS Длиннопост
2

Попробовать мобильный офис

Перейти
Партнёрский материал Реклама
specials
specials

Мобильный офис до 100 тысяч рублей⁠⁠

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

Протестировали TECNO MEGABOOK K15S вместе со смартфоном TECNO CAMON 40 и наушниками TECNO в рабочих и бытовых сценариях от Zoom-звонков до перелета, а теперь рассказываем, как себя показала техника.

Первое впечатление от дизайна ноутбука

Первое, что заметно — это вес. При диагонали 15,6 дюйма и полностью металлическом корпусе K15S весит всего 1,7 кг. Это примерно на 15% меньше, чем аналоги. Устройство не обременяет ни в офисе, ни в такси. Ноутбук поместился в стандартный городской рюкзак, было удобно достать его в кафе за завтраком и по дороге в такси, чтобы быстро отработать клиентские правки.

1/4

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

Шарнир работает мягко: чтобы открыть крышку даже одной рукой, не нужно придерживать корпус. Чтобы показать коллеге или клиенту презентацию, достаточно раскрыть экран на 180°. Это удобно и для работы лежа, и для подставок, которые требуют определенного угла обзора.

Также отметим 9 портов: USB-A, USB-C, HDMI, слот для карты памяти — можно забыть о переходниках.

В TECNO MEGABOOK K15S предустановлен Windows 11. Ноутбук готов к работе сразу после включения. Никаких лишних установок и обновлений. Все настроено и оптимизировано для вашей многозадачности.

Экран: яркая картинка и комфорт ночью

Экран — 15,6 дюйма, IPS-матрица с разрешением Full HD. Углы обзора отличные: изображение остается четким, даже если смотреть сбоку, цвета не искажаются. Есть антибликовое покрытие. Тестировали ноутбук при разном освещении: можно спокойно работать у окна. Когда солнце бьет прямо в экран, текст по-прежнему остается читаемым, картинки не искажаются. Это редкость в бюджетных моделях.

1/2

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

Стеклокерамический крупный тачпад — 15 см. Он не залипает, не промахивается, срабатывает с первого касания. Не возникает дискомфорта, даже если несколько часов редактировать документы без мышки. После перехода с других устройств немного непривычно, что тачпад работает в двух направлениях: нижняя часть отзывается нажатием, верхняя — касанием.

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

Производительность: рендерим видео, открываем вкладки

Ноутбук работает на AMD Ryzen 7 5825U (опционально можно выбрать версию техники Intel Core i5-13420H). Восьмиядерный AMD с поддержкой 16 потоков подходит для ресурсоемких операций вроде рендеринга или работы с большими массивами данных. Встроенная графика Radeon справляется с редактированием видео в Full HD или играми.

1/4

Во время монтажа 30-минутного ролика в DaVinci Resolve и параллельной работе в Photoshop с несколькими большими PSD-файлами система сохраняла стабильность. Не было ни зависаний, ни заметного падения производительности. Ноутбук уверенно держит в фоне 10 приложений одновременно. Если запущены браузер с 20 вкладками, видеозвонок в Telegram, Excel с объемной таблицей и софт для монтажа, система не тормозит и не перегревается. Переход между окнами остается плавным, ничего не «проседает», даже при одновременном скачивании файлов и редактировании видео.

Базовая комплектация включает 16 ГБ оперативной памяти в двух слотах. При необходимости можно легко увеличить этот показатель до 32 ГБ, заменив стандартные модули на более емкие. Помимо установленного SSD на 1 ТБ предусмотрен дополнительный слот, поддерживающий диски объемом до 2 ТБ.

Чтобы во время нагрузки системы охлаждения не выходили из строя, в ноутбук встроен эффективный вентилятор, способный рассеивать до 35 Вт тепла. Устройство не греется, его спокойно можно держать на коленях. Это решение дополнено тремя режимами работы, которые переключаются простой комбинацией клавиш Ctrl+Alt+T. Тихий режим идеален для работы ночью или в общественных местах, сбалансированный подходит для повседневных задач. Производительный, на котором запускали рендеринг видео и игры, практически не шумит.

Автономность: 15 часов без подзарядки

Протестили автономность MEGABOOK K15S в условиях, знакомых каждому деловому путешественнику. Утром перед вылетом зарядили ноутбук до 100% и взяли его в рейс Москва — Калининград. В зале ожидания провели созвон, потом три часа смотрели сериал и в дороге до отеля редактировали документы. К моменту приезда оставалось 40% заряда: хватило бы еще на пару часов продуктивной работы.

1/3

MEGABOOK K15S может автономно работать до 15 часов и позволяет не оглядываться на индикатор заряда. Заявленное время достигается при типичном офисном использовании: одновременная работа с документами в Word и Excel, ведение переписки, видеоконференции, веб-серфинг.

Если все же понадобится, за  час восполняется до 70% батареи. Компактный адаптер мощностью 65 Вт на базе нитрида галлия поместился даже в карман пиджака. Один блок питания заряжает и ноутбук, и смартфон, и наушники. Экономия места: не нужно никаких дополнительных проводов.

Звук, который реально слышно

В TECNO MEGABOOK K15S установлены два мощных динамика по 2.5 Вт. Звук с глубокими низами, без пластикового дребезжания, объемный. Благодаря DTS можно смотреть видео даже в шумном помещении. В тестах специально включали сцены с шагами и выстрелами: локализация настолько точная, что в наушниках нет необходимости.

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

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

Для тех, кто предпочитает гарнитуру, идеально подойдут беспроводные наушники TECNO FreeHear 1 из экосистемы бренда. Когда не хотелось делиться разговорами с окружающими, подключали их. Чистый звук с акцентом на средние частоты, 11-мм драйверы, которые выдают неожиданную детализацию. Музыку слушать приятно: и фоновый плейлист на телефоне, и вечерний сериал на ноутбуке. Автономно работают наушники 6 часов, с кейсом — до 30 часов. 

1/2

Bluetooth 5.4 обеспечивает стабильное соединение на расстоянии до 10 метров. Удобная C-образная форма разработана специально для длительного ношения — после восьмичасового рабочего дня в ушах не возникает дискомфорта. Наушники поддерживают одновременное подключение к ноутбуку и смартфону. Переключение между устройствами происходит быстро и без заминок.

Через фирменное приложение Welife можно выбрать один из четырех эквалайзеров и отследить местоположение гарнитуры в случае утери. А еще кастомизировать виджет для управления наушниками. Функция настройки персонализированного дизайна доступна для устройств на Android и позволяет гибко изменить внешний вид окна подключения: вплоть до установки фоновой картинки или собственного фото.

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

Бесшовная синхронизация со смартфоном

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

Функция выручила, когда нужно было открыть приложение, у которого нет веб-версии. Удобно работает и буфер обмена: скопировал текст на одном устройстве — вставил на другом. Например, код, полученный в сообщении на телефоне, вводится в браузере на ноутбуке. Экономит минуты, а иногда и нервы. А когда в дороге пропал Wi-Fi, ноутбук сам подключился к мобильному интернету через смартфон.

1/2

TECNO CAMON 40 и сам по себе — мощный рабочий инструмент.  Смартфон выделяется камерой высокого качества 50 Мп, ярким AMOLED-экраном 120 Гц и множеством функций, которые упрощают процесс мобильной съёмки и использование искусственного интеллекта TECNO AI.

Телефон работает на HIOS 15.0.1 на базе Android 15.В фирменную оболочку встроен искусственный интеллект:

  • Голосовой помощник Ella. Отвечает на вопросы, помогает с задачами и управлением устройством.

  • Решение задач. Наводите камеру на задачу, ИИ решает ее.

  • AI Редактор фотографий. Интеллектуальная обработка в одно касание.

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

Технические характеристики

  • Процессор и память. 8 ядер, 16 потоков, Кэш L3 16 МБ, частота до 4.5 ГГц Графический процессор AMD Radeon™ graphics SSD 512 ГБ или 1 ТБ, М.2, 2280, PCle 3.0 Nvme DDR4 16 ГБ, 3200 МГц.

  • Дисплей. 15.6", TFT, Full HD (1920×1080), 16:9, 280нит, 45% NTSC, 16.7 млн цветов, 60 Гц, 141 ррі.

  • Веб-камера. 1 Мп, шторка приватности.

  • Порты. 9 портов: 1*TF Card (microSD), 1*HDMI 1.4, 1*USB-A 3.1,

    1*USB-A 3.2, 1*3.5mm аудиовход, *Ethernet RJ45 до 1 Гбит, 2*Туре-С (Full Function), 1*слот для замка Kensington.

  • Другое. Сканер отпечатка пальца в кнопке питания. Клавиатура с подсветкой (4 уровня яркости). Тачпад с поддержкой одновременно 4 касаний.

  • Батарея. 70 Вт∙ч (6150 мА∙ч), Li-Pol, 11.55 B 65 Вт Type-C GaN, 20 В, 3.25 А, кабель 1.8 м (Туре-С-Type-C).

  • Габариты. 17.3 мм (высота), 359.5 мм (ширина), 236 мм (глубина).

  • Вес. 1,7 кг.


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

КУПИТЬ НОУТБУК TECNO

Реклама TECNO Mobile Limited, Юридический адрес: Flat N, 16/F., Block B, Универсальный промышленный центр, 19-25 Shan MeiStreet, Fotan, New Territories, Гонконг

Показать полностью 17
Электроника Гаджеты Ноутбук Длиннопост
deh4567
deh4567
4 года назад

Использование Google Spreadsheet как JSON бэкенд⁠⁠

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

Например, ты пишешь простой блог и тебе совсем не хочется строить бэкенд, дабы записывать, редактировать и хранить там посты, но ты хочешь удобно собирать эти данные как JSON — Google Drive поможет тебе с этим.


Ты создал таблицу и потом ты можешь опубликовать этот документ в веб. Для этого выбери «Файл» > «Опубликовать в интернете...». В нижней части диалога ты можешь увидеть ссылку к данным, но он дает нам доступ только к HTML


Скопируй все, после key= ( например — 0AtMEoZDi5-pedElCS1lrVnp0Yk1vbFdPaUlOc3F3a2c) и подставь это в URL: spreadsheets.google.com/feeds/list/PUT-KEY-HERE/od6/p... вставить вместо "PUT-KEY-HERE".


Ты также можешь получить данные как чистый JSON (но тебе будет нужно пропустить это сначала через CORS прокси, например cors.io) по ссылке: https://spreadsheets.google.com/feeds/cells/PUT-KEY-HERE/1/p...

Теперь в своем веб приложении ты можешь получить данные и использовать их как захочешь.


P.s Если тебе нравится it, и ты полностью хочешь погрузиться в этот мир, то советую свой Telegram канал: t.me/AlphaCodeJS и Instagram: @alpha.code.js можно увидеть обзоры книг по программированию/Юмор/ и много других новостей из мира it.
Использование Google Spreadsheet как JSON бэкенд Программирование, Web, IT, Разработчики, HTML, Javascript
Показать полностью 1
Программирование Web IT Разработчики HTML Javascript
4
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии