Введение в бэкенд для чайников
Хочу сделать серию уроков по серверной разработке для новичков. Вот первый ролик
Хочу сделать серию уроков по серверной разработке для новичков. Вот первый ролик
Всем привет.
Делал в качестве хобби платформу для быстрой разработки учетных систем.
Кому надоело вести документацию в Excel или Access, а 1С еще дорого, но хочется для себя использовать полноценную базу данных.
Изначально была цель разработать кроссплатформенное решение трехзвенной архитектуры с доступом из веб, плюс быстрая разработка прикладного кода, минимальные требования к ресурсам(с возможностью использования на самом дешевом тарифном плане хостинга) и такие же минимальные требования к разработке и разработчикам(т.е. без своих DSL ЯП и обучения новым фреймворкам)
Выбрал такое трехзвенное решение:
JS(JQuery) - Сервер приложений(Apache+PHP) - БД(MySQL или MariaDB)
Никаких готовых фреймфорков и использования сторонних пакетов. Правда собирал из кусочков, так что местами "франкенштейн", авторизация на уровне школьной, но я предполагаю, что знать где у вас будет установлена система будет ограниченное количество человек.
В результате получилось решение, где можно по быстрому накидать таблиц, создать также быстро UI для них(однотипное) и далее сосредоточиться только на написании прикладного кода.
Готовые объекты для форм, таблиц, прикладного кода, отчетов. CRUD, фильтрация, сортировка из коробки. Для манипуляций с данными сделана надстройка в стиле Excel (устанавливаете нужные фильтры и работаете с таблицами). SQL учить особо не надо, только представлять какие данные в каких таблицах.
Выкладываю бесплатно, без ограничений внутри. можете пользоваться, переводить ведение ваших данных в систему.
Есть готовые примеры, которые можно смотреть как сделано и делать наподобие, лишнее можно выпилить. На полноценную документацию сил не хватило, честно говоря уже выдохся. Весь код открыт, даже кое-где есть комментарии. Файл с описанием внутри архива (PDF).
Кодинг через веб есть, но это блажь, можно отключить и кодить в вашей любимой IDE, файлы объектов (форм, таблиц, классов, отчетов в отдельных каталогах).
Все весит 10Mb, без codemirror около 5Mb.
ЯП на фронте Javascript(JQuery), на сервере PHP в чистом виде практически. Это чтобы не зависеть от перехода на новые версии чего либо, т.к. вам нужно будет, чтобы работало как можно дольше без обновлений, такая специфика учетных систем.
Теоретически должно работать даже на Astra Linux, но я не пробовал.
Размещаю небольшие демонстрации на видео. Там же ссылка на скачивание (во втором видео demo2).
Больше чем пол дня искал проблему в скриптах, так как у меня и у коллеги отрабатывала только часть скрипта, а другой словно не существует. Код на пхп, так что что фактически на страничке можно сделать вывод только вардампом. Перерыл все. Сделал выводы каждой переменной и всего что только можно было. Точно такой же скрипт работает на другом домене. Вычистили все кэши куки новый профиль в браузере и прочее... Не помогло. Решили попросить еще человека затестить, так как ну уже не ясно куда копать. И тут понимаем что видимо у меня и у коллеги был кэш nginx по урл на самом серваке - поскольку у третьего чела все ок. Так как мы открывали этот домен вчера, оно закэшило для нас файл скрипта корявый. В итоге искал проблему которой не было, как же горит, когда происходит подобная срань...
С помощью JavaScript можно делать одно и то же разными способами. С выпуском каждой новой спецификации ECMAScript добавляются новые методы и операторы, чтобы сделать код более коротким и читабельным.
1. Object.entries
Большинство разработчиков используют метод Object.keys для итерации по объекту. Этот метод возвращает только массив ключей объекта, а не значения. Можно использовать Object.entries для получения как ключа, так и значения.
Чтобы выполнить итерацию по объекту, можем сделать следующее:
Оба подхода, описанные выше, возвращают один и тот же результат, но Object.entries позволяет легко получить пару ключ-значение.
2. Метод replaceAll
В JavaScript, чтобы заменить все вхождения строки другой строкой, нам нужно использовать регулярное выражение, подобное следующему:
Но в ES12 в String.prototype добавлен новый метод replaceAll, который заменяет все вхождения строки другим строковым значением:
3. Числовой разделитель
Можно использовать символ подчеркивания «_» в качестве числового разделителя, для упрощения подсчета количества нулей в числе.
Разделитель также можно использовать с числами BigInt, как в следующем примере:
Это делает число более читабельным.
4. document.designMode
Связанный с интерфейсным JavaScript, designMode позволяет редактировать любой контент на странице. Просто откройте консоль браузера и введите следующее:
Это полезно для дизайнеров, так как им не нужно каждый раз менять что-то в коде в соответствии с изменениями на экране.
Заключение
Рассмотренные трюки и фичи способны ускорить работу разработчика, а их использование не только необходимо, но и полезно. Продолжайте познавать скрытые возможности языка, изучать всевозможные трюки и повышать свой скилл, а мы поможем новым чтивом. Удачи!
Joomla 4 "под капотом" претерпела немало изменений относительно предыдущих версий. Её кодовую базу сообщество разработчиков регулярно подтягивают до современных реалий, вводя актуальные технологии в ядро CMS. Так, например, если раньше загрузка классов была вариациями на тему include, то в Joomla 4 появился лоадер, приведённый к PSR-4. Ядро CMS переводится на концепцию сервис-провайдеров, внедрены DI-контейнеры. Эти изменения влекут за собой изменения в структуре компонентов, модулей и плагинов.
В данной статье пойдёт речь о том, как создать модуль для Joomla 4 с новой структурой файлов и классов. Как создать новый (или апгрейдить старый) модуль так, чтобы он ещё долго прослужил на Joomla 4 и Joomla 5?
Статья на Хабре
Как взял первый заказ на разработку сайта без опыта и сдал его со второй попытки.
2015 год, я работаю админом на полный день и набираюсь опыта, совмещая с подработками и однажды получил заказ на настройку офисной сети и МФУ для проектной компании.
Я отпросился пораньше, приехал в офис заказчика и за несколько часов работа была сделана. Директор попросил мои реквизиты для договора чтобы оплатить на расчетный счет и это был первый раз когда кто-то решил расплатиться со мной по безналу, до этого уходя с завода я решил открыть ИП, чтобы в случаи чего мог брать заказы официально и вот спустя полгода это время настало.
Я скачал договор из интернета и печатные формы счетов, просидев над ними до глубокой ночи, а на следующий день распечатал 2 экземпляра приехал в офис и мы все подписали. Я чувствовал себя настоящим бизнесменом, видя подписи и печати на актах. Работа была сделана быстро, у меня есть ИП и директор предложил стать их админом на удаленке. Т.е. раз в 2 недели я приезжал, проверял технику и помогал пользователям, также на мне был срочный ремонт.
Эта компания стала моим первым постоянным заказчиком, с которым мы проработали больше 2 лет. При том что, всего несколько месяцев назад я работал полный день на заводе за 16 000 р. в месяц, а здесь за 12 000 р. я приезжал всего 2 раза в месяц на 2 часа.
Это было классное чувство, благодаря которому я понял простую вещь, чем больше я учусь и набираюсь опыта, тем сложнее и дороже проекты я могу брать Т.е. могу взять 3 постоянных клиентов за 50 000 руб. в месяц или выполнить 100 небольших заказов с выездом на дом за 500 рублей и получить те же 50 000 руб. Разница очевидна, поэтому я переключился на работу только с юр.лицами и более сложными заказами.
Сейчас понимаю,что я бы никогда не выполнили тот заказ по настройке МФУ, если бы не сотня мелких заказов с Авито по 300 и 500 р и если бы не ежедневное обучение и практика в работе админом. При этом мой доход стал около 50 000 р. в месяц и больше 60% из них каждый месяц, я продолжал откладывать и копить на первый взнос для ипотеки.
Через пару недель я взял первый заказ на создание сайта на Joomla за 15 000 руб. Т.к. знал что мои знакомые админы, кроме основной работы, занимались ещё сайтами, почтой и т.д. и получали при этом намного больше. Они работали как бы на стыке направлений и были ценным активом компании.
Сам заказ получил через Авито, проанализировав с десяток объявлений, поставил цену ниже средней и приложил скрины нескольких страниц, которые я делал для себя на HTML и CSS.
Встреча с заказчиком прошла хорошо, мы быстро нашли общий язык тем более, у меня было ИП и договорились на предоплату в 50%. Я начал изучать бесплатные CMS и шаблоны сайтов. Получилась что я работал по 12-14 часов в день и временно приостановил все мелкие заказы, чтобы сдать проект в срок, а договорились мы на 2 недели.
Регистрация домена и хостинга, установка CMS, переборка десятка шаблонов и вот, нашел подходящий вариант с нужными блоками, добавил услуги, цены, контакты взяв все картинки из интернета.
Я даже не думал, что нужно согласовывать промежуточные этапы работы и получать обратную связь от заказчика. Начиная от прототипа, дизайн главной и внутренних страниц и все сделал на свое усмотрение, получив от клиента только логотип и цвета которые были на вывеске.
Во время первой презентации, заказчик сильно удивилась, но т.к. и для нее это был первый сайт, она спокойна начала объяснить специфику работы, на что сделать фокус, а что расписать более подробно.
На переделку у меня ушло еще 4 дня и обновлять пришлось 40% информации, но в итоге все получилось хорошо, сайт был принят, а акты подписаны. Теперь все этапы работ согласовывались, а в объявлении на авито, были не простенькие страницы, а скриншоты настоящего сайта и его адрес.
В следующей части расскажу как я начал работу с Яндекс Директ и SEO, брал заказы на доработку и наорал на одного из клиентов.
#моё #истории из жизни #бизнес
Телеграм - https://t.me/havaevau_webstudy
Сodepen-проект «My Stuff» наглядно демонстрирует современные возможности препроцессоров для HTML и CSS, а именно Pug и SCSS. Посмотрите сами, как относительно малым количеством строк, можно реализовать интересный анимированный рисунок:
Одна вакансия, два кандидата. Сможете выбрать лучшего? И так пять раз.
Полоса прокрутки присутствует сегодня на любом сайте видимо или невидимо. Это вполне обыденный элемент, на который обычно никто не обращает особого внимания.
По моему же мнению - это отличный способ закрепить сайт в памяти пользователя, поэтому давайте научимся с ней работать.
Телеграм - https://t.me/havaevau_webstudy
Основы
Бывает, что содержимое элемента не помещается в нем, так как оно слишком велико. И чтобы сделать содержимое прокручиваемым, можно использовать overflow: auto. Благодаря ему полосы прокрутки будут отображаться по умолчанию.
Вы можете кастомизировать скроллбар используя свойства scrollbar с префиксом -webkit в сочетании с обычными свойствами ширины scrollbar-width и цвета scrollbar-color.
Хочу сказать про плагин postcss-scrollbar - он создает свойства скроллбара с префиксом -webkit из стандартных свойств. Это дает возможность получить получить кросс-браузерные стили, например через такой код:
.scroll-container {
overflow: auto;
scrollbar-width: thin;
scrollbar-color: hsl(0 0% 50%);
/* postcss-scrollbar will add the -webkit version automatically! */
}
Темы и scrollbar
На многих сайтах при переключении на темный режим скроллбары "застревают" в белом
Есть отличные свойства - color-scheme, через которые это можно исправить. Но юзать их вам придется не только в ситуациях с полосой прокрутки. Можете почитать об этом более подробно здесь - https://web.dev/color-scheme/
html {
/* defer to OS preference */
color-scheme: dark light;
/* override, assuming the theme toggler sets a data-theme attribute */
&[data-theme=light] { color-scheme: light; }
&[data-theme=dark] { color-scheme: dark; }
}
Как предотвратить смещение верстки
При использовании overflow: auto может возникнуть проблема - смещение верстки. Решить её поможет overflow: overlay - скроллбар никогда не будет занимать место и/или overflow: scroll - полоса прокрутки всегда будет на месте
А с помощью scrollbar-gutter: stable вы можете "сказать" браузеру, чтобы он зарезервировал место для полос прокрутки.
.scroll-container {
overflow: scroll;
@supports (scrollbar-gutter: stable) {
overflow: auto;
scrollbar-gutter: stable;
}
}
На этом все, прокачивайте свои скроллбары, пишите: был ли у вас опыт в их кастомизации?