Сообщество - Web-технологии

Web-технологии

521 пост 5 813 подписчиков

Популярные теги в сообществе:

Плавное погружение в SvelteKit на примере создания сайта знакомств. Часть 2

Посмотреть: рутуб , youtube

Содержание второй части:

  • Отличие adapter-static от adapter-auto (node.js)

  • Git

  • Запуск проекта на cloudflare pages

  • Причесываем sign up, sign in, logout

  • pull-request / merge в main

Не жмись: поставь апвоут.

Показать полностью
10

Cloudflare tunnel, как ngrock только Cloudflare

Cloudflare tunnel, как ngrock только Cloudflare Гайд, Linux, Cloudflare, Веб-разработка, Длиннопост

Не так давно я прикупил себе неттоп dell optiplex 3070 micro на авито и решил поставить его у себя на работе, что бы захостить на нем все свои пет проекты.

Если посчитать сумму которую я плачу за хостинг, то этот неттоп окупается за год, но по производительности на порядки мощнее всех vds за которые я плачу.

Проблема только в том, что на работе у меня нет белого ip и пробрасывать порты мне ни кто не будет, вот я и решил воспользоваться cloudflare tunnel.

Для начала необходимо создать аккаунт в cloudflare и привязать домен.

Инструкция https://developers.cloudflare.com/cloudflare-one/connections...

Docker https://hub.docker.com/r/cloudflare/cloudflared

Моя структура папок.

~/docker

mysql

docker-compose.yml - compose файл

cloudflare

_conf - конфиги cloudflare

docker-compose.yml - compose файл

Авторизация

cd ~/docker/cloudflare

mkdir _conf

chmod 0777 _conf

docker run -v ./_conf/:/home/nonroot/.cloudflared/ cloudflare/cloudflared:latest tunnel login

Создание

docker run -v ./_conf/:/home/nonroot/.cloudflared/ cloudflare/cloudflared:latest tunnel create mytunnelname

Список

docker run -v ./_conf/:/home/nonroot/.cloudflared/ cloudflare/cloudflared:latest tunnel list

Создаем конфиг файл _conf/config.yml

url: http://phpmyadmin

tunnel: <Tunnel-UUID>

credentials-file: /root/.cloudflared/<Tunnel-UUID>.json

Добавление записи DNS

docker run -v ./_conf/:/home/nonroot/.cloudflared/ cloudflare/cloudflared:latest tunnel route dns mytunnelname mytunnelname.topsicretdomain.ru

Для тестирования запуска я создам контейнер с phpMyAdmin ~/docker/mysql/docker-compose.yml

version: '3.9'

services:

mysql:

container_name: "mysql"

image: "mysql:8-debian"

restart: unless-stopped

volumes:

- ./data:/var/lib/mysql

- ./sql:/app

environment:

- MYSQL_ROOT_PASSWORD=root

- TZ=Europe/Moscow

phpmyadmin:

image: phpmyadmin

restart: unless-stopped

environment:

- PMA_HOST=mysql

ports:

- "8080:80"

networks:

default:

name: web

Запуск  phpMyAdmin

cd ~/docker/mysql/

docker compose up -d

Теперь можно запустить наш compose файл для cloudflare tunnel

version: '3.9'

services:

tunnel:

image: cloudflare/cloudflared:latest

container_name: cloudflare_tunnel

restart: unless-stopped

command: tunnel run mytunnelname

volumes:

- ./conf/:/home/nonroot/.cloudflared/

extra_hosts:

- "parent:host-gateway"

networks:

default:

name: web

cd ~/docker/cloudflare

docker compose up -d

Готово.  

Важно. Что бы все корректно работало необходимо запускать phpMyAdmin и cloudflared в одной docker сети

networks:

default:

name: web

Показать полностью

#freedurov

Как думаете освободят ли мирового программиста Павла Дурова ?

#freedurov Интернет, Сайт, Жизнь, Вопрос, Павел Дуров, Арест Павла Дурова
#freedurov Интернет, Сайт, Жизнь, Вопрос, Павел Дуров, Арест Павла Дурова
Показать полностью 1
5

Плавное погружение в SvelteKit на примере создания сайта знакомств

Плавное погружение в SvelteKit на примере создания сайта знакомств Pikaweb, Javascript, Видео, RUTUBE

Не смог освоить vue и react, пишу на svelte.

Скринкаст вылил на рутуб, что бы не тратить трафик на сервисах для доступа к youtube 🤫. Смотреть строго на 2x.

Содержание первой части:

  • Инициализация проекта

  • Подключение tailwind css

  • Реализация регистрации, авторизации и выхода

  • Настройка adapter static

Очень жду первых 10 подписчиков и рейтинг 1000, что бы организовать сбор на женщину с низкой социальной ответственностью для неистового совокупления.

Показать полностью
6

Source-map-explorer

На прошлой неделе анализировал размер главного бандла мобильной версии нашего приложения.

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

Source-map-explorer Кросспостинг, Pikabu Publish Bot, Frontend, Перформанс, Tools, Программирование, IT, React


🤔 Как анализировать?

Для анализа использовал утилиту source-map-explorer.

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

К сожалению, почему именно это что-то попало в бандл утилита не говорит.

👉 В чём была проблема?

Иногда мы ленимся и в файле компонента кладём какую-нибудь утилитную функцию, enum или константу, а потом где-то в другом месте импортируем их.

Так вот, когда мы их импортируем, то в бандл “засасывает” не только импортируемую функцию, но и весь компонент, из-за чего размер бандла и увеличивается.

P.S. А какими инструментами пользуетесь вы?

https://t.me/cherkashindev/220

Показать полностью

Чек аут)

как же я люблю злить вас бездельников :--)

7

Курьезные ошибки в веб-дизайне: самые смешные и странные примеры

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

Курьезные ошибки в веб-дизайне: самые смешные и странные примеры Сайт, Дизайн, Дизайнер, Веб-дизайн, Web, Длиннопост

Pacific Northwest X-Ray Inc.

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

Курьезные ошибки в веб-дизайне: самые смешные и странные примеры Сайт, Дизайн, Дизайнер, Веб-дизайн, Web, Длиннопост

Доступен по ссылке: PNWX

Yale School of Art

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

Курьезные ошибки в веб-дизайне: самые смешные и странные примеры Сайт, Дизайн, Дизайнер, Веб-дизайн, Web, Длиннопост

Доступен по ссылке: Yale School of Art

LingsCars.com

Сайт LingsCars.com – образец того, как делать не нужно. Компоновка разнообразия оттенков, много анимации и перегруженность информацией существенно усложняют восприятие. Правда, проект позиционируется в качестве «самого сумасшедшего сайта по лизингу автомобилей» – так оно и есть.

Курьезные ошибки в веб-дизайне: самые смешные и странные примеры Сайт, Дизайн, Дизайнер, Веб-дизайн, Web, Длиннопост

Доступен по ссылке: LingsCars

Arngren.net

Arngren.net – классический пример сайта с чрезмерным количеством информации на одной странице. Пользователю трудно ориентироваться из-за перегруженности различными элементами и предложениями.

Курьезные ошибки в веб-дизайне: самые смешные и странные примеры Сайт, Дизайн, Дизайнер, Веб-дизайн, Web, Длиннопост

Доступен по ссылке: Arngren.net

Suzanne Collins Books

Официальный сайт писательницы Сьюзен Коллинз, автора трилогии «Голодные игры» и экранизированного в прошлом году приквела «Баллада о змеях и певчих птицах», имеет совершенно несовременный дизайн. Здесь неудобные навигация и расположение основных элементов, незапоминающаяся цветовая гамма и изображения низкого качества. Такое ощущение, что он был создан в начале 2000-х.

Курьезные ошибки в веб-дизайне: самые смешные и странные примеры Сайт, Дизайн, Дизайнер, Веб-дизайн, Web, Длиннопост

Доступен по ссылке: Suzanne Collins Books

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

Показать полностью 6

Мемоизация селекторов в Zustand

Мемоизация селекторов в Zustand Кросспостинг, Pikabu Publish Bot, React, Frontend, Текст, Программирование, IT

Если вы используете Zustand, то знаете, что computed значения реализуются с помощью селекторов.

const userPrs = useChartsStore((state) => {
return state.pullRequests.filter(pr => pr.author.id === state.user.id);
});

В примере выше:

- при каждом обновлении стейта значение селектора будет вычисляться заново
- это приведёт к ре-рендеру компонента, так как каждый раз мы постоянно возвращает новый массив по ссылке, а по-умолчанию используется строгое сравнение (old === new).

Чтобы решить эту проблему в Zustand есть хук useShallow , который сделает “поверхностное” сравнение предыдущего и нового значения. Если они равны — ре-рендер не произойдёт.

const userPrs = useChartsStore(useShallow((state) => {
return state.pullRequests.filter(pr => pr.author.id === state.user.id);
}));

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

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

Также он отмечает, что для этих целей можно использовать метод memoize из его библиотеки proxy-memoize (для redux есть reselect).

Аналогично immer’у proxy-memoize работает на основе Proxy. memoize запоминает предыдущий параметр функции и свойства к которым обращались в селекторе (для этого и нужен Proxy). При следующем выполнении функции, он проверит изменились ли используемые свойства, если нет — вернёт значение, вычисленное в прошлый раз.


const authorSelector = memoize((state) => state.pullRequests.filter(pr => pr.author.id === state.user.id));

const userPrs = useChartsStore(authorSelector);


Конечно, нужно помнить, что мемоизировать можно только “чистую” функцию — если она возвращает одни и те же значения в ответ на одни и те же аргументы

Так, обернув пару селекторов в memoize, я ускорил фильтрацию пул-реквестов в более чем 20 раз (900мс ⇒ 40мс).

https://t.me/cherkashindev/213

Показать полностью 1
Отличная работа, все прочитано!