Нотатки програміста
175 subscribers
24 photos
8 videos
9 files
45 links
Кидаю нотатки й думки з роботи, як Senior Full Stack Developer, Tech Leader, Team Leader і лектор IT)

Огляд технологій, пояснення, новини, проходження співбесід, реклама цікавих додатків і компаній, і багато іншого!

Більше: https://linktr.ee/alex.demko
Download Telegram
Де знайти роботу, як фрілансер?

Для цього є так званні «фріланс біржі»

РКОМЕНДУЮ:
Український 🇺🇦 Freelancehunt
+
З
акордонні 🇺🇸 Upwork, Fiverr

‼️Увага: на закордонних біржах ви можете зняти гроші та перевести на свій український рахунок)

Якщо хочете дізнатися як - ставте емодзі на цей пост 👨‍💻


Спокійного початку дня!


#freelance
👨‍💻7❤2🤔1
До речі, якщо ти шукаєш як розвивати себе в Angular, як дізнаватися більше якісної інформації - то рекомендую Вам ось цей канал: https://youtube.com/@DreyLikyDev

(Сам дивлюсь його (не реклама 😁))


#web #angular #middle #video
👍6
І так!
Намагався завантажити бібліотеку Tensorflow (Python)…

Не виходило… писало, ось таку помилку (фото)


Але після де-якого часу Гугління знайшов ось такий варіант, який спрацював))
python3 -m pip install --upgrade https://storage.googleapis.com/tensorflow/mac/cpu/tensorflow-1.12.0-py3-none-any.whl


Джерело: https://stackoverflow.com/questions/38896424/tensorflow-not-found-using-pip


#python #advance #problem
👍5🤔2
А ще, якщо у тебе буде така проблема у штучному інтелекті (перше фото) - використовуйте для значення x ось цей метод: tf.expand_dims(variable_name, axis=-1) 😁
Результат: (друге фото)


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


Джерело: https://github.com/keras-team/keras/issues/15521


#python #advance #problem
🤯5
Для Mac, або Linux

Якщо виникла така помилка під час використання пакетних менеджерів (pip, npm, інші…) (фото)

То використай приставку: sudo

Це команда завдяки якій, ти говориш комп‘ютеру, що впевнений у виконанні конкретної дії 😉

Використовуй в задоволення))


#web #python #basic #problem
👍7
Є дуууже багато хостингів там де ти можеш розмістити свій сайт.

Наприклад: godaddy.com, hostiq.ua
Я рекомендую ці два (передивився вже багато)…🤫

І в наступному пості розповім як розмістити там твій сайт!


#web #advance #basic
👍5🔥3
Вітаю!

Якщо комусь потрібен дизайнер)
Можу порекомендувати: @nnastya_jl

Зараз співпрацюю з нею - чудовий дизайнер!


#web #python #basic #advance
🔥6
До мене звернувся учень з проблемою по Sass)

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

Схема залежностей файлів між ними виглядала ось так: main.scss -> (gray_button.scss , white_button.scss) -> decor-button.scss

Перші 4 фото це всі 4 файли які один з одним пов‘язані (1 - main, 2 - gray_button, 3 - white_button, 4 - decor-button.scss)

У чому є проблема: @use не може звертатися до одного й того ж файлу більше 1 разу


Ось чому для того, щоб змінити так, щоб усе працювало, нам треба використати @use один раз, і вже від нього запустити потрібні нам команди (5-та фотографія)

Я змінив код у файлі main.scss

Використав @use, і вже після нього, використовуючи команду @include, активував функцію (назва функції: “btn”) з файлу decor-button



Після цього все запрацювало))

Сподіваюсь, це допоможе моєму учню та тобі 😉



Усього найкращого!


#web #advance
👍10🔥4
Якщо тобі було цікаво, що таке фреймворк - подивись ось це відео)

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

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

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



Усім чудового дня!
👍8
Чи всі знають, що таке БЕМ?

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

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




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

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

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


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


Хто хотів би більше дізнатися про інші методології - відправляйте реакцію "👨‍💻" на цей пост)
⚡6👍5👨‍💻4
Хочу порекомендувати тобі один сервіс, там де ти зможеш навчитися друкувати в сліпу: https://www.ratatype.com


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

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

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

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


#web #python
🔥6👍3
Одного разу, у мене учні питали, як можна зробити анімований таймер у React

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



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



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

Якщо будуть проблеми - напишіть мені, я тобі з радістью допоможу @alex_demko_work 😌
🔥4
До речі, бачу, що в багатьох є питання на рахунок методологій та мого редактору коду)

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



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


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



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

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



Це використовується в 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
👍7❤3🔥3
Що таке 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/
🔥9👍3