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

Кран-Ресторан

Казуальные, Аркады, Шарики

Играть

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

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

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

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

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

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

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

HTML + Web

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

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

Что такое Ember.js?⁠⁠

Ember.js — зрелый фронтенд фреймворк, получивший много внимания в последнее время.

Ember.js вобрал в себя множество современных JavaScript концепций и технологий. Вот их неполный список:

●Транспайлер Babel для полноценной поддержки ES2015 синтаксиса.

●Поддержка юнит, интеграционного и приемочного тестирований с помощью Testem и QUnit.

●Brocolli.js для сборки ассетов.

●Поддержка live-reload для сокращения отклика во время разработки.

●Шаблонизация с использованием Handlebars.

●Навигация в любую часть приложения благодаря

системе роутинга.


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


Для работы с Ember.js предполагается, что у вас установлены свежие версии Node.js и npm.

Также стоит упомянуть, что Ember — исключительно фронтенд фреймворк. Есть множество способов взаимодействия с бэкендом на ваш выбор, но сам бэкенд никак не управляется Ember.

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

Что такое Ember.js? Программирование, Web, IT, Разработчики, HTML, Javascript
Показать полностью 1
Программирование Web IT Разработчики HTML Javascript
7
4
DELETED
4 года назад

Быстрый хостинг проекта / surge.sh⁠⁠

Вот ссылка:

https://surge.sh/


Вот видео:

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


surge — веб сервис, который позволяет опубликовать frontend приложение буквально двумя командами. Он будет вам полезен если вам нужно временно опубликовать проект в интернете.


А сейчас я начну «переписывать» документацию.

Установка

npm install --global surge

Запуск

surge


Подготовка к деплою

Итак, у нас есть проект

Быстрый хостинг проекта / surge.sh Web, Frontend, HTML, CSS, Хостинг, Видео, Длиннопост

Переходим в терминал и запускаем surge

surge

Деплой

После регистрации подверждаем путь к проекту, указываем желанный домен и жмем enter.

Быстрый хостинг проекта / surge.sh Web, Frontend, HTML, CSS, Хостинг, Видео, Длиннопост
Быстрый хостинг проекта / surge.sh Web, Frontend, HTML, CSS, Хостинг, Видео, Длиннопост

Готово, вы в интернете!


Целью данной статьи было не научить чему-то, а показать, что такой сервис в принципе существует и как просто с ним работать.


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

Показать полностью 3
Web Frontend HTML CSS Хостинг Видео Длиннопост
3
5
DELETED
4 года назад

Аккордеон на чистом JS⁠⁠

Давайте разберемся как сделать аккордеон на ванильном JavaScript.


HTML

<dl>
 <dt class="question js-accordion">
  <button class="question__trigger" type="button">First Question?
 </button>
 </dt>
 <dd class="answer">
  <div>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
  </div>
 </dd>
 <dt class="question js-accordion">
  <button class="question__trigger" type="button">Second Question?</button>
 </dt>
 <dd class="answer">
  <div class="answer__content">
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
  </div>
 </dd>
</dl>
Что сразу бросается в глаза, так это теги dl, dt, dd. Почему нельзя просто везде использовать div?

В принципе, можно, но аккордеон — это хороший пример списка из терминов и определений, для чего эти теги и предназначены.


Разберем по частям:

<dt class="question js-accordion">
 <button class="question__trigger" type="button">First Question?
 </button>
</dt>

В dt помещаем вопрос, но для чего оборачивать его в кнопку? Опять семантика: когда пользователь кликает на элемент — что-то должно произойти, для этого необходимо использовать button.

Вторая причина — доступность через клавиатуру: на аккордеон можно попасть через tab и раскрыть через пробел.

<dd class="answer">
 <div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
 </div>
</dd>

В dd кладем ответ, обернутый в дополнительный div?

Дело в том, что для того чтобы анимировать «раскрытие» аккордеона, необходимо знать высоту ответа.

.answer {
 overflow: hidden;
 height: 0;
 transition: height 0.5s;
}

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

Как только аккордеон будет раскрыт — мы присвоим answer ранее измеренную высоту.

JavaScript

Найдем все аккордеоны на странице и инициализируем их:

const elements = [...document.querySelectorAll('.js-accordion')];
elements.forEach(accordion);

Воспользуемся замыканием:

function accordion(element) {
 // объект, в котором будем хранить всю необходимую информацию
 const instance = {};
 function init() {
  // найдем вопрос и ответ
  findElements(instance, element);
  // измерим высоту ответа
  measureHeight(instance);
  // добавим логику нажатия на кнопку
  subscribe(instance);
 }
 init();
}

findElements

function findElements(object, element) {
 const instance = object;
 // element - это "вопрос", по которому происходит нажатие
 instance.element = element;
 // target - это "ответ", который должен "раскрываться"
 instance.target = element.nextElementSibling;
}
Если вспомнить разметку — ответ всегда идет следом за вопросом, поэтому мы и используем свойство nextElementSibling.


measureHeight

function measureHeight(object) {
 const instance = object;
 // вычисляем высоту ответа
 instance.height = object.target.firstElementChild.clientHeight;
}
В то время, как target имеет нулевую высоту, у его потомка размер остался тем же. Этот самый размер мы и сохраняем.subscribe

Аккордеон на чистом JS Аккордеон, Javascript, Frontend, Web, IT, HTML, Программирование, Web-программирование, Гифка, Длиннопост

У answer высота — 0, а у answer__content — нет

subscribe

function subscribe(instance) {
 instance.element.addEventListener('click', (event) => {
  // отменяем "действие по умолчанию"
  event.preventDefault();
  // меняем состояние аккордеона
  changeElementStatus(instance);
 });
 // если размер окна поменяется - измерим высоту ответа заново
 window.addEventListener('resize', () => measureHeight(instance));
}

changeElementStatus

function changeElementStatus(instance) {
 if (instance.isActive) {
  hideElement(instance);
 } else {
  showElement(instance);
 }
}
Если аккордеон активен — сворачиваем его, иначе — раскрываем.


hideElement и showElement

function hideElement(object) {
 const instance = object;
 const { target } = instance;
 // обнуляем высоту ответа
 target.style.height = null;
 // делаем статус неактивным
 instance.isActive = false;
}
function showElement(object) {
 const instance = object;
 const { target, height } = instance;
 // задаем ответу сохраненную в measureHeight высоту
 target.style.height = `${height}px`;
 // делаем статус активным
 instance.isActive = true;
}

Аккордеон на чистом JS Аккордеон, Javascript, Frontend, Web, IT, HTML, Программирование, Web-программирование, Гифка, Длиннопост

Как всегда — демо на codepen.

Показать полностью 2
[моё] Аккордеон Javascript Frontend Web IT HTML Программирование Web-программирование Гифка Длиннопост
9
2
DELETED
4 года назад

Аккордеон на чистом HTML⁠⁠

Это даже не статья, а пересказ документации, но для ознакомления все же напишу.


Весь способ заключается в двух тегах:

<details>
 <summary>How to create accordion without JavaScript?</summary>
 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis id recusandae tempore nam placeat ratione accusantium maiores nobis velit, incidunt, hic, omnis dolorem possimus. Hic porro tenetur fugiat blanditiis iste.
</details>

— Весь контент оборачиваем в details;

— Вопрос в summary;

— Все остальное пишем следом.


Нужно помнить о двух вещах:

— details нельзя анимировать.

— Отсутствует поддержка IE.


Если для вас это не проблема — смело используйте.

А демо смотрите у меня codepen :)

HTML Web IT Frontend Аккордеон Текст
6
1
DELETED
4 года назад

Примитивный аккордеон⁠⁠

Рассмотрим два варианта создания аккордеона на примере списка вопросов и ответов. Сделаем это через:

— JavaScript;

— Тег Details;


JavaScript

Создадим простую разметку:

<button class="question">What is question?</button>
 <div class="answer">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem dicta blanditiis eum dolorum sit voluptatum impedit eius similique quasi obcaecati! Mollitia reprehenderit magni ex. Eaque modi corrupti placeat labore possimus.
</div>
И сразу же добавим стили:
.answer {
 height: 0;
 overflow: hidden;
}

.is-active + .answer {
 height: auto;
}

Как все будет работать:

— В кнопке с классом question храним сам вопрос;

— В div с классом answer храним ответ, задаем ему нулевую высоту;

— При нажатии на кнопку присваиваем ей класс is-active;

— Раскрываем answer через соседний селектор.


Зададим добавление класса is-active через JavaScript:

// Находим кнопку с вопросом
const question = document.querySelector('.question');

// Добавляем слушатель на клик
question.addEventListener('click', ({ target }) => {
 // Меняем состояние кнопки
 target.classList.toggle('is-active');
});

Все, пара строк кода и аккордеон готов?


С одной стороны да, но данный вариант имеет один недостаток — ответ появляется «резко», без плавного раскрытия.


Связано это с тем, что height: auto; нельзя анимировать через transition, необходимо знать точное значение.

Что с этим делать — обсудим в следующей статье, а пока можете ознакомиться с полной версией кода в codepen.

Тег Details

Этот способ еще проще предыдущего:

<details>
 <summary>How to create accordion without JavaScript?</summary>
 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis id recusandae tempore nam placeat ratione accusantium maiores nobis velit, incidunt, hic, omnis dolorem possimus. Hic porro tenetur fugiat blanditiis iste.
</details>

Все, копипасть и в продакшен?

Есть ньюансы.

Во-первых, details имеет тот же недостаток, что и первый вариант — нельзя анимировать активное состояние аккордеона.

Во-вторых, отсутствует поддержка IE.


Во всех остальных случаях можно смело использовать, а если вам нравится как я копирую документацию, то можете еще раз сходить в codepen :)

Показать полностью
[моё] Аккордеон Спойлер Frontend Web IT Javascript HTML Текст
17
27
ChYuriy
4 года назад
Программирование на python

Django-разработчик с нуля и всё такое. Кто со мной покодить?⁠⁠

Всем привет, буду краток. Учу Python, учу Django. Написал тут вот такую штуку: github.com. На MVP наверное пока не тянет, но всё задуманное кажется работает. Может быть кому-нибудь любопытно покодить вместе, а заодно с git и github поработать для опыта.

Немного подробностей. Проект под названием micro-shop представляет из себя интернет витрину для небольших бизнесов не требующих полноценного интернет магазина с корзиной. Вот так она выглядит zoom-out.ru это демка работающая на полноценном vds. Тариф самый бюджетный, если сайт ляжет от пикабушников, загляните немного позже. Бекэнд написан на Python c использование Django, на фронте Bootstrap 4. Всех тех, кого заинтересовал и учат Django, HTML, CSS добро пожаловать. Я сам изучаю плотно Django, поэтому на фронте у меня совсем бардак. В README.md найдёте больше подробностей, есть парочка issues по фронтенду.

Дисклеймер. Это мой первый проект на Django. В нём нет лучших практик программирования, скорее наоборот куча плохого кода. Но код несложный в силу простоты и небольшого размера проекта. Почти все представления написаны с использованием джанговских Class-based views. Разобраться будет проще, чем в проектах гигантах с огромной кодовой базой. На фронте тоже всё максимально просто.

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

Всё. Жду ваших комментариев. Может оно и нафиг никому не нужно.

[моё] IT Программирование Веб-разработка Python Web CSS HTML Текст
43
0
DELETED
5 лет назад

Задаем соотношение сторон изображению / HTML&CSS⁠⁠

I. Через фоновое изображение

- Создаем div;

- Задаем ему нулевую высоту;

- Задаем ему фоновое изображение;

- Обнуляем размер фонового изображения;

- Создаем псевдоэлемент before;

- Наследуем фон от родителя;

- Делим высоту на ширину и умножаем результат на сто чтобы получить значение для padding-top;

- В результате получаем следующие стили:

.image {
 background-size: 0 0;
}

.image:before {
 content: '';
 display: block;
 padding-top: 56.25%;
 background-image: inherit;
 background-repeat: no-repeat;
 background-size: cover;
}
Пример на codepen.


II. Через свойство object-fit.

Если поддержка браузеров вас устраивает и вы знаете значение одной из сторон картинки, то вы можете использовать свойство:

object-fit: cover;

Если ширина картинки равна 500px, а соотношение сторон должно быть 4:3, то все что остается сделать это:

(3 / 4) * 500 = 375

В итоге стили будут выглядеть примерно так:

img {
 width: 500px;
 height: 375px;
 object-fit: cover;
}

Если вам интересно то, о чем я пишу - можете заглянуть ко мне в группу вк или телеграм канал.

Показать полностью
[моё] HTML CSS Верстка Frontend Картинки Web-программирование Пропорции Web Текст
0

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

Перейти
Партнёрский материал Реклама
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
Электроника Гаджеты Ноутбук Длиннопост
DELETED
5 лет назад

Отправка формы без перезагрузки страницы / HTML & JS⁠⁠

HTML

Создаем форму:

<form action=”https://private-c4cefc-codepenvf.apiary-mock.com/sendform">
 <input name=”message” placeholder=”Message” required>
 <button>Send</button>
</form>

Я использую сервис apiary чтобы сформировать ответ от сервера в формате JSON:

{
 "success": "true",
 "message": "The form has been sent!"
}

JavaScript

Находим все, что нам нужно и добавляем слушатель:

let form;
let action;

function findElements() {
 form = document.querySelector('form');
 ({ action } = form);
}

function subscribe() {
 form.addEventListener('submit', onSubmit);
}

function init() {
 findElements();
 subscribe();
}

init();

При отправке формы:

function onSubmit(event) {
 event.preventDefault();
 const { currentTarget } = event;
 sendForm(currentTarget)
  .then(response => onSuccess(response, currentTarget))
  .catch(onError);
}

— Отключаем стандартное поведение через preventDefault;

— Отправляем форму;

— При успехе вызываем функцию onSuccess;

— Иначе onError.


Отправляем форму

В основе лежит fetch:

function collectData(currentForm) {
 const data = new FormData(currentForm);
 return data;
}

function setOptions(currentForm) {
 return {
  method: 'post',
  body: collectData(currentForm),
 };
}

function sendForm(currentForm) {
 return fetch(action, setOptions(currentForm));
}

Первый аргумент — url, по которому нужно обратиться;

Второй — объект, который с данными.


При успехе вызываем функцию onSuccess

function showMessage(data) {
 alert(data.message);
}

function onSuccess(response) {
 return response.json().then(showMessage);
}

Fetch возвращает Promise, поэтому сначала получаем json, потом вызываем функцию showMessage.

Дабы упростить пример — я вывожу сообщение в alert.


При ошибке вызываем функцию onError

function onError(data) {
 console.error(data);
}

В onError, вызванный через catch, уже попадет аргумент с информацией об ошибке.


Полный код

let form;
let action;

function findElements() {
 form = document.querySelector('form');
 ({ action } = form);
}

function showMessage(data) {
 alert(data.message);
}

function onSuccess(response) {
 return response.json().then(showMessage);
}

function onError(data) {
 console.error(data);
}

function collectData(currentForm) {
 const data = new FormData(currentForm);
 return data;
}

function setOptions(currentForm) {
 return {
  method: 'post',
  body: collectData(currentForm),
 };
}

function sendForm(currentForm) {
 return fetch(action, setOptions(currentForm));
}

function onSubmit(event) {
 event.preventDefault();
 const { currentTarget } = event;
 sendForm(currentTarget)
  .then(response => onSuccess(response, currentTarget))
  .catch(onError);
}

function subscribe() {
 form.addEventListener('submit', onSubmit);
}

function init() {
 findElements();
 subscribe();
}

init();

В удобочитаем виде — на codepen.


Посты на эти и другие темы публикую в канале: https://t.me/filimonovvadim

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