Якщо тобі було цікаво, що таке фреймворк - подивись ось це відео)

Рекомендую!
Автор чудово пояснює

Сподіваюсь, кожному буде зрозуміло 😌

(Відео, на жаль, російською, проте, сподіваюсь, що скоро буде український переклад)
https://youtu.be/w6kdepP5P6k



Усім чудового дня!

Чи всі знають, що таке БЕМ?

Я сподіваюсь багатенько з вас.
Але, якщо хтось не знає - це метод написання назв для класів

Якщо хочете, щоб я більше розповів саме про цю технологію відправляйте реакцію "⚡️" на цей пост)




Тим часом хочу тобі відкрити невеличку несподівку... є не тільки така методологія

Їх дуже багато!

На цьому сайті, ви можете побачити їх популярність на 2020 рік: https://2020.stateofcss.com/en-US/technologies/methodologies/


На жаль, на цьому сайті, я не знайшов такий самий графік за 2022 рік... але сподіваюсь, що він скоро зʼявиться)


Хто хотів би більше дізнатися про інші методології - відправляйте реакцію "👨‍💻" на цей пост)

Хочу порекомендувати тобі один сервіс, там де ти зможеш навчитися друкувати в сліпу: https://www.ratatype.com


Навіщо це потрібно?

Так як ти, або програміст, або хочеш ним стати - тобі треба буде багато друкувати)

На цьому сервісі ти навчишся друкувати свій код швидше! Ти навіть, зможеш писати код паралельно зі своїм викладачем, що допоможе тобі в навчанні, на роботі - та взагалі зі всім, що повʼязано з компʼютером!

А ще робити менше помилок) особливо, коли плутаєш українську та англійську клавіатуру))


#web #python

Одного разу, у мене учні питали, як можна зробити анімований таймер у React

І ось, я знайшов для тебе статтю на англійській, як це можна зробити)



https://dev.to/ramonak/react-how-to-create-a-custom-progress-bar-component-in-5-minutes-2lcl



Спобуй! Це буде цікаво)

Якщо будуть проблеми - напишіть мені, я тобі з радістью допоможу @alex_demko_work 😌

До речі, бачу, що в багатьох є питання на рахунок методологій та мого редактору коду)

У наступних постах я тобі дам відповідь на ці питання



А вже пізніше, після того як відповім - повернусь до звичайних цікавинок у програмуванні 😉

Що таке БЕМ??


Чи не найчастіше питання моїх учнів 😉



БЕМ - це методологія (метод написання коду)

Розщифровується, так:
Б - блок
Е - елемент
М - модуль



Це використовується в HTML, при створенні класів)



Навіщо? - для того, щоб різні розробники розуміли один одного HTML та CSS код

Як же він створюється? - створюється він у класах

Як це саме відбувається? - до будь-якого елементу задаєш атрибут клас: <div class="block__element--module">

САМЕ НАЗВА КЛАСУ - ЦЕ І Є МЕТОДОЛОГІЯ БЕМ!!!!!



Як же називається цей клас?

Перша частина; замість слова block (block__element--module):


Спочатку, називаєш, чим же буде цей блок на сайті:
- footer (нижня частина сайту)
- header (верхня частина сайту)
- main (головна частина сайту)
- blog (частина, яка відповідає за блог)
- тощо (це просто назви, якими би ти міг описати, що буде робити той, чи інший блок)

Як воно буде виглядати:
<div class="footer">
</div>



Друга частина; замість слова element (block__element--module):

Необовʼязкова частина, яку застосовують, коли всередині блоку є декілька елементів; для назви element використовують назви тегу; наприклад:
- a, p, div, table, tr, td (ЦЕ НАЗВИ ТЕГІВ В HTML)

Як воно буде виглядати:
<div class="footer">
<p class="footer__p"></p>
<img class="footer__img">
</div>



Третья частина; замість слова module (block__element--module):

Необовʼязкова частина, яку застосовують, коли в елемента є декілька станів, наприклад елемент закритий, або відкритий:
- closed
- opened
- і так далі (детальніший опис СТАНУ елементу)

Як воно буде виглядати:
<div class="footer">
<p class="footer__p"></p>
<img class="footer__img--opened">
</div>



Перша частина відділяється з другою двома "__"

А друга з третьою двома тире "--"



У будь-якому випадку, ці всі правила не обовʼязкові, можна робити так, як тобі простіше)
Але це, загальноприйнятий метод використання методології БЕМ))
Який використовують в багатьох компаніях 😌



Якщо хочеш дізнатися більше - отримуй декілька цікавих статей та відео на цю тему 😉👇

- https://avivi.pro/ua/blog/metodologiya-bem-v-deystvii/
- http://linkomania.com.ua/css-metodologiyi-css-bem-smacss-ecss/
-https://www.youtube.com/watch?v=3HDi0Qn-c4g

Що таке ITCSS??



ITCSS - це методологія (метод написання коду)

Розшифровується, так:
I - Inverted (перевернутий)
T - Triangle (трикутник)
CSS - Cascading Style Sheet (Каскадні Таблиці Стилів; дизайн для сайтів)



Це використовується в CSS; при створенні файлів CSS, для того, щоб було простіше з ними працювати)
А саме логіка приєднання та створення цих файлів)

Можно використовувати методологію ITCSS з іншими технологіями: БЕМ, OOCSS, SMACSS та іншими)

Ідея ITCSS у тому, щоб розділити CSS код на 7 частин:
1.) Settings (Налаштування) - містити визначення шрифтів, кольорів тощо.

2.) Tools (Інструменти) - глобально використовувані міксини та функції.

3.) Generic (Загальні) - скинути та/або нормалізувати стилі тощо.

4.) Elements (Елементи) - стиль для звичайних елементів HTML (наприклад, h1, a, div, table та тощо).

5.) Objects (Обʼєкти) - місце, у якому пишуться всі функції-декоратори в CSS. Функції-декоратори - це команди в CSS, які починаються з @; наприклад, @media, @keyframes, @import та інші функції

6.) Components (Компоненти) - специфічні компоненти інтерфейсу користувача (наприклад, стоврення стилів для банерів, навігаційної панелі, блоків з товарами тощо). Найбільше роботи буде в цьому місці.

7.) Utilities (Утіліти) - файл де можно переробити (перезаписати) стилі елементів, які ппопередньо були записані в інших шести файлах 👆



Навіщо? - для того, щоб різні розробники розуміли один одного HTML та CSS код

Як же він створюється? - для того, щоб його створити, треба написати або файл з назвою одного з підпунктів (Settings, Tools, Generic та інші), або створити папку з такими ж назвами; а також створити один загальний файл, у якому підключаються інші файли (наприклад, файл з назвою main.css, або style.css)


Як це саме відбувається? - у цьому головному файлі (main.css, або style.css) підключаєш всі інші CSS файли (які ти розділив через методологію ITCSS), наприклад:

@import 'settings.css';
@import 'tools.css';
@import 'generic.css';
@import 'elements.css';
@import 'vendor.css';
@import 'objects.css';
@import 'components.css';
@import 'utilities.css';


У будь-якому випадку, ці всі правила не обовʼязкові, можна робити так, як тобі простіше)
Але це, загальноприйнятий метод використання методології ITCSS))
Який використовують в багатьох компаніях 😌



Якщо хочеш дізнатися більше - отримуй декілька цікавих статей та відео на цю тему 😉👇

- https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/#what-is-itcss
- https://developer.helpscout.com/seed/glossary/itcss/
- https://www.hongkiat.com/blog/inverted-triangle-css-web-development/

Вітаю!
У мене є один знайомий, який пропонує попасти на стажування та допомогти команді з досягненням цілей)

Дивись, компанія буде розробляти додаток локальної соц. мережі для університетів в Україні (та не тільки)

Треба буде створити веб-додаток та бекенд на Python-ні (якщо вони нічого не передумали; якщо ти знаєш Python, або фронтенд та хочеш постажуватися - можеш їм написати)

Так, як він буде виглядати та всі подробиці ти дізнаєшся пізніше)

Якщо, цікавить така пропозиція напишіть Олександру сюди: @thebirdisfreed

Та скажи, що ти від мене 😉

Вітаю!

Дякую, що написав Олександру (@thebirdisfreed)

Можливо, ти впевнений, що ти розробник middle-senior рівня (Frontend, або Backend) - також можеш написати Олександру) у нього дня тебе буде цікава пропозиція! 😉



(Від мене дякую усім хто написав Олександру - ВИ МОЛОДЦІ!!!)

Вітаю! 😃

Я хотів би порадити надзвичайно цікавий та корисний Телеграм-канал про Python, який може стати в нагоді тобі в навчанні та у подальшому розвитку)

tell

Файловий метод tell() повертає поточну позицію покажчика читання / запису файлу. Цей метод не приймає параметрів і повертає ціле значення. Спочатку покажчик файлу вказує на початок файлу, тому вихідне значення 0. За допомогою методу seek() можна змінити позицію покажчика.

#practice // Вакансії IT // Python

До речі, якщо ти любиш вміст на цьому каналі і хочеш й далі читати мої поради і знахідки, то твоє пожертвування допоможе забезпечити мене ресурсами, для регулярного створення якісного контенту - 5375411501575463, буду вдячний за будь-яку підтримку! 😌

Вітаю! 😃

Контекстний менеджер - це можливість в Python, яка дозволяє автоматично відкривати будь-який файл та редагувати його, й автоматично закривати цей файл

Контекстний менеджер в Python реалізується за допомогою ключових слів with і as

Приклад використання контекстного менеджера в Python:

with open('example.txt', 'r') as f:
f.write(ʼHello world!ʼ)
data = f.read()
print(data)

У цьому прикладі with open('example.txt', 'r') as f: створює контекст, у якому файл 'example.txt' відкривається та спочатку туди ми вписуємо текст, а потім створюємо зміну, у якій читаємо файл та виводимо його у термінал
Після виконання коду контекстний менеджер автоматично закриває файл

Ось так ось 😌
Сподіваюсь, тобі тепер стало зрозуміліше, як це працює 😉


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#python

Вітаю! 😃

ORM (Object-Relational Mapping) - це підхід до роботи з базами даних, через обʼєктноорієнтовану мову програмування

У фреймворку Django ORM використовується для спрощення взаємодії з базою даних

Замість того, щоб писати SQL код, ти можеш писати звичайні Python-функції для взаємодії з базою даних

Django ORM забезпечує можливість виконувати операції з базою даних, такі як додавання, зчитування, оновлення та видалення записів

Наприклад, ти можеш створити таблицю у базі даних, через Django, який створить користувача:

from django.db import models

class User(models.Model):
name = models.CharField(max_length=50)
email = models.EmailField()
age = models.IntegerField()

Якщо хочеш додати нового користувача, ви можете створити новий об'єкт моделі та викликати метод save() для збереження його в базі даних:

user = User(name='John', email='john@example.com', age=25)
user.save()

Щоб зчитати всіх користувачів з бази даних, ти можеш викликати метод all() на моделі:

users = User.objects.all()

Для оновлення запису користувача в базі даних ти можеш змінити відповідний атрибут об'єкта моделі та викликати метод save():

user = User.objects.get(name='John')
user.age = 26
user.save()

Отже, Django ORM дозволяє працювати з базою даних за допомогою об'єктів Python, що спрощує розробку веб-додатків та забезпечує безпеку й ефективність взаємодії з базою даних


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#python

Вітаю! 😃

Хотів тобі запропонувати розглянути деякі україномовні групи з програмування, у яких ти можеш ставити свої питання, дізнаватися щось цікаве та знаходити роботу/стажування:
- JS
- Angular
- Vue
- ReactJS
- Node.js
- Python
- PHP
- SQL
- Swift
…
- Різне


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#programming

Вітаю! 😃

Webpack - це інструмент для збирання JavaScript-програм в один файл (створюючи такі речі, як бандли (bundles))

Він використовується для збирання веб-додатків, написаних на JavaScript а також для збирання стилів та інших ресурсів

Webpack працює з такими поняттями, як модулі та залежності

Кожен JS файл який імпортує інший JS файл являється модулем)

Webpack автоматично визначає ці залежності та збирає їх в один файл

Це дозволяє зменшити кількість запитів до сервера та покращити швидкість завантаження веб-сторінки

Один з головних принципів роботи Webpack - це конфігураційний файл

В ньому вказується, які файли необхідно зібрати в один файл, які плагіни використовувати та які правила використовувати для обробки різних типів файлів

Нижче наведений приклад простої конфігурації webpack, яка збирає два модулі - index.js та styles.css - в один файл з назвою bundle.js:

const path = require('path');

module.exports = {
entry: {
main: './src/index.js',
styles: './src/styles.css',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};


У даному прикладі властивість entry вказує на те, з яких файлів слід зробити збірку

Ключ main вказує на файл index.js, а ключ styles вказує на файл styles.css

Кожен ключ є назвою вихідного файлу

Не суть важливо, як вони будуть названі

Властивість output вказує на те, де повинен бути збережений скомпільований файл

В даному випадку файл буде збережений у папці dist з назвою [name].bundle.js, де [name] - це назва ключа властивості entry 😉👆

Властивість module використовується для налаштування правил для обробки різних типів файлів

У даному випадку використовується правило для обробки файлів з розширенням .css

Використовується плагін style-loader, який додає стилі до HTML-файлу (у тег <style>, та плагін css-loader, який забезпечує обробку CSS-файлів

Це один з прикладів конфігурації webpack, але він може бути значно складнішим і містити багато різних налаштувань і плагінів; для автоматизації та полегшенню створення твого проекту (зазвичай великого проекту)

Webpack має багато корисних функцій, наприклад, можливість створювати різні конфігурації для різних середовищ, таких як розробка та продакшн, можливість автоматичного перезавантаження сторінки після змін в коді та багато іншого)

Крім того, Webpack має велику кількість плагінів, що дозволяє розширювати його можливості

Наприклад, плагін для оптимізації зображень, який зменшує їх розмір без втрати якості, або плагін для генерації одного HTML-файлу з багатьох різних HTML-файлів

Узагальнюючи, Webpack - це потужний інструмент для збирання веб-додатків, який дозволяє покращити швидкість завантаження сторінок та має багато корисних функцій та плагінів 😌


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#web

Вітаю! 😃

Кожен веб-браузер має три різні механізми збереження даних: localStorage, sessionStorage та cookies

Кожен з цих механізмів має свої власні особливості, що робить їх підходящими для різних ситуацій)

LocalStorage і sessionStorage:

LocalStorage та sessionStorage дозволяють зберігати дані в браузері без використання сервера

Також вони дозволяють зберігати дані у вигляді ключ-значення
Дані можуть бути збережені у форматі строки, або числа

Є декілька різниць між localStorage та sessionStorage:

1.) localStorage зберігає дані, які будуть доступні на всіх сторінках в браузері, а в sessionStorage, будуть доступні лише на тій сторінці, де вони були збережені (тобто, коли нажимаєш відкирити сайт в новому вікні, це і мається на увазі різні сторінки)

2.) localStorage зберігає дані без обмеження часу, а в sessionStorage, зберігає дані, поки відкрите вікно браузера

3.) localStorage може зберігати дані максимального розміру 10 Мб, а sessionStorage 5 Мб

Cookies:

Cookies, навпаки, дозволяють зберігати дані на стороні клієнта та сервера

Cookies зберігаються у форматі ключ-значення і можуть бути використані для зберігання інформації про користувача, такої як логін-інформація або налаштування сайту

Одна з важливих рис cookies - це можливість встановлення терміну дії, який вказує на те, як довго cookies буде зберігатися на комп'ютері користувача

Це може бути встановлено на деякий час, після якого cookies буде видалено автоматично, або на необмежений термін

Або вони можуть бути збережені на довгий період, зазвичай від кількох годин до кількох місяців (інколи, навіть, років... але так не сильно прийнято в програмуванні)

Одна з основних відмінностей між cookies та localStorage / sessionStorage полягає в тому, що cookies можуть бути передані на сервер, тоді як localStorage та sessionStorage залишаються тільки на боці клієнта, й можуть бути взяти тільки через JS!

Крім того, cookies дозволяють встановлювати додаткові параметри, такі як термін дії, доступ до cookie тільки через протокол HTTP або HTTPS та можуть містити практично будь-яку інформацію)

Cookies також мають обмеження на розмір, зазвичай більше 4 Кб

Ще одна відмінність полягає в тому, що cookies можуть бути доступні з будь-якої сторінки в межах домену, тоді як localStorage та sessionStorage зберігають дані лише в межах конкретної сторінки

Крім того, cookies захищені від доступу до даних інших доменів

Це означає, що cookies, створені для одного домену, не можуть бути доступні для іншого домену

Це забезпечує більшу безпеку для користувачів!

У підсумку, localStorage, sessionStorage та cookies є різними механізмами збереження даних на стороні клієнта веб-браузера

Кожен з них має свої власні особливості, що робить їх підходящими для різних типів збереження даних

localStorage та sessionStorage дозволяють зберігати дані в браузері без використання сервера, тоді як cookies дозволяють зберігати дані на стороні клієнта та сервера

Відмінності між цими механізмами полягають в тому, що localStorage та sessionStorage зберігають дані на одній сторінці, тоді як cookies можуть бути доступні з будь-якої сторінки в межах домену сайту)

Крім того, cookies мають додаткові параметри, такі як термін дії та обмеження на розмір 😌

(Вам буде фоточка таблиці знизу невеличкого порівняння цих механізмів 😉👇)


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#web

Вітаю! 😃

Symfony - це один з найпопулярніших фреймворків на мові програмування PHP

Він був створений у 2005 році і з того часу став одним з найбільш популярних інструментів для створення веб-програм на PHP

Symfony базується на принципах моделі-контролера (MVC) і є дуже гнучким та розширюваним

Фреймворк Symfony має велику кількість вбудованих компонентів, які дозволяють розробникам створювати різні функціональні додатки зі значно меншими зусиллями)

Symfony пропонує відкрите джерело коду та велику спільноту розробників, яка постійно вносить нові зміни і покращення в фреймворк

Це дозволяє отримувати доступ до великої кількості інформації та допомоги у разі потреби

Symfony також підтримує англійську та українську мови, що дозволяє створювати додатки, які легко інтегруються з різноманітними системами та можуть бути доступними для користувачів з різних країн

Крім того, Symfony пропонує широкий вибір інструментів для тестування додатків, що дозволяє забезпечити високу якість програм і допомагає зменшити кількість помилок під час розробки 😌

Symfony є ідеальним вибором для проектів будь-якої складності, від невеликих блогів до великих корпоративних систем

Завдяки цьому веб-додатки, розроблені з використанням Symfony, є надійними та стабільними)

Однією з найбільш сильних сторін Symfony є його підтримка PHP стандартів PSR (там є багато версій його; вони сприяють створенню більш доступного та єфективного PHP-коду)

Symfony також пропонує інтеграцію з багатьма іншими інструментами та фреймворками, такими як Doctrine, Twig, Swift Mailer та багатьма іншими

Ось чому Symfony є досить популярним інструментом у різних проектах 😉

Зразок коду з Symfony:

```PHP 👇👇👇
// src/Controller/ProductController.php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class ProductController extends AbstractController
{
/**
* @Route("/product/{id}", name="product_show")
*/
public function show($id)
{
$product = $this->getDoctrine()
->getRepository(Product::class)
->find($id);

if (!$product) {
throw $this->createNotFoundException(
'No product found for id '.$id
);
}

return $this->render('product/show.html.twig', ['product' => $product]);
}
}
```

У цьому прикладі коду створюється контролер ProductController, який містить метод show, що обробляє запити на URL /product/{id} ({id} - це дані, які передадуть по цій силці, наприклад: /product/10)

Метод show використовує об'єкт Doctrine для отримання продукту з бази даних та передає його дані в шаблон product/show.html.twig для відображення

Якщо продукт не знайдений в базі даних, метод викидає помилку NotFoundException

Шаблон product/show.html.twig містить HTML та Twig-синтаксис для відображення деталей продукту, отриманих з бази даних:
$product) {
throw $this->createNotFoundException(
'No product found for id '.$id
);
}

return $this->render('product/show.html.twig', ['product' => $product]);
}
}
```

У цьому прикладі коду використовуються вбудовані функції Symfony для взаємодії з базою даних та відображення контенту

Загальний підхід Symfony до розробки дозволяє розробникам зосередитися на реалізації бізнес-логіки своїх додатків, замість того, щоб детально розбиратися у взаємодії з базою даних та іншими компонентами...

Узагальнуючи, Symfony є потужним та розширюваним фреймворком, який дозволяє розробникам ШВИДКО та МАКСИМАЛЬНО ПРОСТО (ну, на скільки це можливо) створювати високоякісні веб-додатки з відкритим кодом

Його гнучкість та широкі можливості роблять Symfony одним з найбільш популярних фреймворків для розробки веб-додатків на PHP

Рекомендую спробувати його! Упевнений, що тобі буде просто вивчити його 😌 але, якщо у тебе будуть будь-які питання - можеш написати мені в особисті) я допоможу тобі 😉
@alex_demko_work


Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#php