Category: Frontend
17
Янв
2022

Кнопка на html странице загружает файл в django и нужно сделать дальнейшее преобразование этого файла. Например файл формата .txt и построить график

Где найти этот файл который я загрузил на web странице и как построить график с данными из этого файла

Файл views.py

def simple_upload(request):
if request.method == ‘POST’ and request.FILES[‘myfile’]:
myfile = request.FILES[…
16
Янв
2022

Как создать учетную запись фронтенду? [закрыт]

Делаю проект и нужно после отправки и получения данных при регистрации, создать учетную запись и все ее данные поместить в нужные места и сделать выход. Даже не представляю как это сделать, буду благодарен, если обьясните)
Так же сделать а…
08
Янв
2022

💸 Стоит ли разрабатывать коммерческие сайты на WordPress в 2022 году?

В сети вот уже несколько лет ходят разговоры о том, что самая популярная CMS в мире канула в Лету, уступив место другим более свежим решениям. В статье попытаемся выяснить, так ли это на самом деле и какие проблемы существуют у этой платфор…
05
Янв
2022

Как организовать взаимодействие бэкенда с фронтендом по инициативе бэкенда

ИМЕЕТСЯ: Бэкенд написан на C/C++ и связан с библиотекой HTTP-сервера/клиента тоже на C/C++. Фронтенд написан на HTML/CSS/JavaScript. Взаимодействие фронтенда с бэкендом происходит через HTTP-запросы и ответы и всегда по инициативе фронтенд…
31
Дек
2021

Топ-10 веб-приложений на CodePen за 2021 год

Лучшие веб-проекты CodePen 2021 года: слайдеры, навигация, анимированные открытки, дашборд по ведению проектов и многое другое.
— Читать дальше «Топ-10 веб-приложений на CodePen за 2021 год»
…
30
Дек
2021

общая сессия со стороны фронтенда

Коллеги хочется, и требуется реализовать следующею логику.
Есть 3 сервера
php->Laravel, php->yii, c# -> aspnet
Возможно будет добавлен JavaSpring
Нужно сделать общею ссесию для всех их со стороны фронтенда.
В неком идеале что бы п…
28
Дек
2021

Самые интересные факты из веб-альманаха 2021

Интересные факты из ежегодного веб-альманаха. Узнайте, какая JS-библиотека самая популярная и сколько весит перегруженная CSS страница.
— Читать дальше «Самые интересные факты из веб-альманаха 2021»
…
20
Дек
2021

Как сверстать такие элементы(блоки разной высоты/ширины; чекбокс-переключатель; слайдер, слайды друг над другом)?

Доброго времени суток!
Как сверстать такие элементы? (Желательно кроссбраузерно и адаптивно, ну или хотя бы одно из двух как минимум))

Блоки разной длины и ширины, которые сжимаются при уменьшении окна;
Переключатель, который имеет форму …
19
Дек
2021

Увеличение блока при клике и переход

подскажите как сделать такой эффект при переходе на страницу.
В данном блоке на фоне проигрывается видео и при клике необходимо, чтобы блок увеличивался по контуру самолета до фулл размера и осуществлялся переход на страницу. Через clip, …
17
Дек
2021

Смена цвета фона js html css

Знаю что проблема в js, ид и класы на другие елементы прописаны, работало при первом клике но щас пробую туда обратно сделать и перестало работать.
Принцип работы – при нажатие на кнопку, меняется тема сайта на черную и на белую при следую…
14
Дек
2021

Как отключить проверку типов при сборке TypeScript для её ускорения?

Собираю в вебпаке, трансформирую ts в js, спомочью @babel/preset-typescript и файла tsconfig. Как сделать что бы сборка производилась без проверки типов, просто ts в js ?
Просто хочется иметь быстрый вариант сборки.

…
08
Дек
2021

👨‍🎓️ Путь фулстека: 55 бесплатных учебных курсов по веб-разработке для новичков и профессионалов

Предлагаем вашему вниманию полный набор для начинающих и опытных веб-разработчиков. В нашем обзоре вы найдете бесплатные курсы по верстке, JavaScript, JS-фреймворкам, Node.js, PHP, базам данных, Docker и другим важным технологиям.

1. HTML и CSS

Веб-разработка для начинающих: HTML и CSS (Stepik, 10 уроков) – научитесь создавать сайты с помощью HTML и CSS и размещать их в сети; освоите редактор кода и отладчик.

Основы HTML и CSS (Stepik, 49 уроков) – создадите веб-страницы и задеплоите их в интернет.

ОСНОВЫ Html & CSS (Stepik, 10 уроков) – крайне сжатый курс, который проходится за полдня.

Основы HTML и CSS (Coursera, 40 видео) – узнаете, как работать со шрифтами и текстом, а в конце научитесь верстать несложные страницы с анимацией и без нее.

Основы HTML Базовый курс от Web Atom (Udemy, 34 лекции) – с нуля разберетесь в основах языка разметки HTML и создадите первый сайт

Основы HTML и CSS с нуля (Udemy, 38 лекций) – научитесь верстать по макету и познакомитесь с основами CSS Grid.

Больше полезной информации можно найти на нашем телеграм-канале «Библиотека программиста».

Интересно, перейти к каналу

2. Git

GIT (Stepik, 10 уроков) – настроите GIT, создадите репозиторий и добавите в него файлы.

Основы Git (Stepik, 25 уроков) – курс описывает наиболее важные команды Git и сценарии их использования.

3. JavaScript

JavaScript для начинающих (Stepik ,17 уроков) – основы программирования на JavaScript от типов данных до замыканий и регулярных выражений.

Hexlet: Введение в программирование (JavaScript ES6) (Stepik, 20 уроков) – последовательная подача материала с постепенным приращением сложности.

Разработка интерфейсов: вёрстка и JavaScript (Coursera, 4 курса) – курс состоит из двух частей: два про вёрстку и еще два по JavaScript. Обещают, что по окончанию курса сможете работать младшим фронтендером.

Интенсивное погружение в JavaScript (Udemy, 8 лекций) – узнаете основные концепции и принципы JavaScript и как строится простейшее взаимодействие с пользователем.

JavaScript, часть 1: основы и функции (Coursera, 34 урока) – освоите основы и научитесь писать простые программы. Авторы курса – разработчики из Яндекса.

JavaScript, часть 2: прототипы и асинхронность (Coursera, 31 урок) – изучите прототипы, конструкторы, асинхронный код, Node.js и DOM. По окончании обучения вы будете уметь программировать на JavaScript.

Vanilla JavaScript [2021] (Udemy, 15 лекций) – изучите чистый JS и создадите на практике клон программы Paint в окне браузера.

Введение в программирование (на примере JavaScript ES6) (Udemy, 17 лекций) – небольшой полуторачасовой курс по JS.

DoCode (35 уроков) – онлайн-тренажер по JavaScript.

4. Typescript

TypeScript. Полный курс (YouTube, 13 видео) – разберете ключевые отличия TypeScript от JavaScript. Изучите такие понятия, как перечисления (Enum), интерфейсы, пространства имён. И в дополнение, рассмотрите набор нативных утилит, которые предоставляет сам язык.

TypeScript (YouTube, 20 видео) – четырехчасовое погружение в TS.

TypeScript – Быстрый Курс за 70 минут (YouTube, 1 видео) – узнаете про весь функционал Typescript за 70 минут.

5. Node.js

Уроки Node JS и Express для начинающих (YouTube, 19 уроков) – научитесь создавать простые сайты, используя Node JS и Express технологий.

Node JS – Быстрый Курс за 1 час (YouTube, 1 видео) – вся теория включена в один ролик.

Курс NodeJS (YouTube, 22 урока) – поработаете с серверами, файлами, базами данных. Изучите асинхронный и синхронный подход.

Продвинутый BACKEND на Node.js (YouTube, 1 видео) – за полтора часа реализуете масштабируемый backend на Node.js с использованием фреймворка Nest js. В качестве СУБД используете PostgreSQL в связке с ORM Sequelize на Node.js. Задокументируете API с помощью SWAGER nest js и в итоге обернете приложение на Node.js в Docker и Docker compose.

6. React

Каталог фильмов на GraphQL и React [2021] (Udemy, 15 лекций) – научитесь применять современный стек, который востребован работодателями и заказчиками: React, GraphQL, Apollo.

React.js курс для начинающих (13 глав) – научитесь создавать компоненты, учитывая propTypes, грамотно использовать props и state компонента, работать с react dev toolsи рефакторить.

React JS фундаментальный курс от А до Я (YouTube, 1 видео) – трехчасовой курс по Реакту.

React JS. Полный Курс для Начинающих 2021 (YouTube, 27 видео) – в рамках курса создадите приложение для заказа бургеров в сети ресторанов Hot Burgers.

Уроки React JS для начинающих (YouTube, 14 уроков) – по итогам курса сделаете небольшое веб-приложение.

Курс “React JS – путь самурая 1.0”, уроки, практика (YouTube, 101 видео) – «исполнись решимости и действуй». Хагакурэ

7. Vue.js

Официальная документация на русском языке – нет ничего лучше официальной документации на русском языке от разрабов.

Бесплатный курс по Vue.js (YouTube, 32 видео) – от базовых концепций до v-model и семантики.

Vue 3 Основы для Начинающих – Полный Курс [2021] (YouTube, 1 видео) –

VUE.JS 3 – с нуля до первого приложения (YouTube, 3 урока) – за два часа поймете, как создавать формы.

Vue.js подробный курс (YouTube, 11 видео) – постигните Vue.js за 3 часа.

Vue 3 фундаментальный курс от А до Я (YouTube, 1 видео) – разработаете приложение с основными кейсами, которые встречаются везде: CRUD, сортировка, поиск, пагинация, динамическая пагинация. Сделаете mixins, directives, изучите vuex и composition api.

8. Angular

Front-end. (Angular 6, Sass, VS Code) (Stepik, уроков) – краткий курс-справка по качественному программированию SPA (Single page application) c использованием фреймворка Angular, препроцессора Sass в редакторе VS Code.

Изучение Angular для начинающих (YouTube, 7 уроков) – научитесь создавать компоненты, осуществлять маршрутизацию, работать с формами и многое другое

Angular – Быстрый курс за 60 минут (YouTube, 1 урок) – сравните Angular с альтернативными технологиями и познакомиться с самыми основами этого фреймворка

9. PHP

PHP для начинающих (Stepik, 10 уроков) – дают основы, включая синтаксис PHP и объявление переменных. Затем курс перейдете к работе с арифметическими операторами, условными операторами, циклами, функциями и массивами.

PHP для начинающих (82 урока) – онлайн-тренажер поможет изучить PHP с нуля, с самых азов.

Курс PHP для начинающих (28 уроков) – онлайн-тренажер с большим для такого формата обучения комьюнити и чатом в телеграме.

PHP – первое знакомство (Stepik, 53 урока) – краткий курс без лишней воды поможет постичь фундамент PHP и ООП.

Основы php с нуля. Новейший курс 2020 (YouTube, 24 урока) – введение в PHP, функции, замыкания, Cookie, работа с файлами.

10. Nginx, Apache и Docker

Основы Nginx (YouTube, 32 видео) – курс начинается с рассмотрения различий между Nginx и Apache, позже речь пойдет про различные способы установки Nginx, кастомную установку и настройку Nginx, как сервиса.

Конфигурирование web-сервера (YouTube, 1 видео) – проведете установку Nginx и apache, настроите порты, проведете балансировку нагрузки на Nginx и настроите upstream на бэкэнд Apache.

Установка web-сервера PHP+APACHE+MYSQL (YouTube, 1 видео) – описан процесс установки локального web-сервера на Windows: Apache, PHP, MySQL, phpMyAdmin.

Основы Docker. Большой практический выпуск (YouTube, 1 видео) – установите Докер, поработаете с портами, поднимите временную базу данных и создадите виртуальную машину.

Docker для Начинающих – Полный Курс (YouTube, 1 урок) – разработаете приложение на NodeJS (сюда входит и React, Angular, Vue). Закончив разработку локально, зальете это приложение на удаленный сервер и там запустить его.

Docker уроки от А до Я (YouTube, 12 уроков) – узнаете в чем разница между образами контейнером и запустите фреймворк Laravel в Докере.

11. MySQL

Введение в базы данных (Stepik, 23 урока) – основу курса составляет изучение и применение в типовых ситуациях средств SQL для обработки данных в SQL-СУБД.

Свободное погружение в СУБД (Stepik, 66 уроков) – в курсе затронуты темы улучшения схемы БД, средства SQL для построения сложных аналитических запросов, управление конкурентным доступом к данным и некоторые возможности из нереляционного мира, присутствующие в реляционных СУБД

Изучение SQL для начинающих (YouTube, 9 уроков) – изучите основы языка SQL и сможете прописывать различные команды для работы с СУБД, такими как: MySQL, SQLite, PostgreSQL и многими другими.

Основы SQL (YouTube, 19 уроков) – курс начального уровня, предварительных знаний о базах данных и SQL не требуется.

Уроки MySQL для начинающих (YouTube, 10 уроков) – научитесь работать с базой данных как через графический интерфейс PhpMyAdmin, так и через написания кода на основе языка PHP.

Материалы по теме
07
Дек
2021

При использовании адаптивного меню подчёркивание ссылки уезжает до конца экрана

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

Код HTML
<header class="header">
<div cla…
06
Дек
2021

Помогите решить проблему с подключением статичних файлов NodeJs

Помогите подключить стили в мой nodejs проект, метод app.use(express.static(‘assets’)) не работает
Вилезает ошибка в консоле: GET ‘http://localhost:3000/assets/css/style.css’ net::ERR_ABORTED 404 (Not Found)
вот мой путь к файлам
node_modu…
06
Дек
2021

Динамически адаптивный шрифт html/css

я верстаю макет сайта и нашёл в Интрнете формулу по которой шрифт сам подстраивается под размер экрана. Вот она font-size: calc(25px + (40 + 40 * 0.7) *(100vw – 320px) / 1170); 25px – это минимально возможный шрифт. 1170 – ширина котейнера…
06
Дек
2021

Динамически адаптивный шрифт html/css

я верстаю макет сайта и нашёл в Интрнете формулу по которой шрифт сам подстраивается под размер экрана. Вот она font-size: calc(25px + (40 + 40 * 0.7) *(100vw – 320px) / 1170); 25px – это минимально возможный шрифт. 1170 – ширина котейнера…
02
Дек
2021

Python Flask динамическая подгрузка изображений

Нужно организовать динамическую подгрузку изображений с сервера. Делаю проект в школе: электронное расписание с несколькими доп функциями. Одна из них – показывать фото учителя, у которого в этот день день рождения. Можно было бы изначальн…
02
Дек
2021

Проблема с установкой плагина imagemin в gulp(require() of ES Module not supported)?

Пытаюсь установить плагин imagemin. Пробовал устанавливать через import, но там возникает другая более сложная проблема. Как видите, я откатил версию imagemin до 7.1.0, но всё равно выдаёт ошибку. Ищу в гугле , пока не нашёл. type: "m…
30
Ноя
2021

Небольшая проблема с установкой gulp

Устанавливаю gulp и вдруг возникла небольшая проблема. Вроде бы код написан без ошибок, но терминал выдаёт ошибку. Ошибка начала появляться во время написания кода, начиная со второй функции.
Вот исходный код
let project_folder = "d…
30
Ноя
2021

🛠 ТОП-10 инструментов дизайнера UX/UI, актуальных в 2021 году

В средствах для создания дизайна UX/UI легко запутаться, поэтому сначала стоит понять их предназначение. Предлагаем вниманию читателей небольшой обзор актуальных в 2021 году инструментов.

…