contenteditable placeholder

content/posts/2023/cpp/link_to_class.md

@@ -0,0 +1,133 @@
+---
+title: "⤵️ Передача переменной по ссылке в C/C++"
+date: 2023-03-27T23:25:00+03:00
+draft: false
+tags: [c, cpp, development, tips]
+---
+
+## Введение
+
+Дано: передать в класс внешную переменную,
+чтобы её изменения во вне класса передавались в пременную класса.
+
+**Простым языком:**  
+Мне необходимо было из класса обрабатывать данные телеметрии,
+значения которых изменялись в программе
+и хранились в объявленных перменных вне класса.
+
+При передачи переменной `variable` в функцию `example_func()`
+передаётся значение перменной.
+
+Если это значение изменить в переменной, само значение `variable`
+не изменится.
+
+```c
+void example_func(int variable);
+```
+
+Для реализации цели, нужно передать в функцию значение по ссылке.  
+Для этого использую операнд `*`, символ звёдочки.
+
+Простой пример функции, которая меняет значение переданных в неё
+двуъ перменных `x` и `y`.
+
+```c
+void swap(int *x, int *y) {
+    int temp;
+    temp = *x; /* сохраняю значения по адресу х */
+    *х = *у;   /* помещаю у в х */
+    *у = temp; /* помещаю х в у */
+}
+```
+
+Следует помнить, что `swap()` или любая другая функция,
+использующая указатели на параметры должна вызываться с адресами аргументов.
+
+Для этого используется оператор `&`, символ амперсанда.
+
+Следующая программа демонстрирует правильный способ вызова `swap()`:
+
+```c
+#include <stdio.h>
+
+void swap (int *x, int *y);
+
+int main(void) {
+    int x, y;
+    x = 10;
+    у = 20;
+
+    swap(&x, &y);
+    printf ("%d %d", x, y);
+
+    return 0;
+}
+```
+
+В данном примере переменной `х` присваивается значение `10`,
+а переменной `у` значение `20`.  
+Затем вызывается функция `swap()` с адресами переменных `х` и `у`.
+Унарный оператор `&` используется для получения адресов переменных.
+Поэтому в функцию `swap()` передаются адреса переменных `х` и `у`,
+а не их значения.
+
+Спасибо ресурсу [c-cpp.ru](http://www.c-cpp.ru/books/sozdanie-peredachi-po-ssylke)
+за код.
+
+_Когда я кипел над кодом, то не мог вспомнить как проделать такой трюк.  
+(на Си последнее время пишу не часто, вот и запамятывал).  
+Вышеуказанную статью нагуглить получилось только
+в ходе написании этого руководста, а результать того,
+что я вспомнил самостоятельно, я расписал ниже._
+
+## Код с использованием класса
+
+Имеется класс `Example`, у которого есть приватная переменная
+`variable`, которая объявлена с сиволом звёдочки.
+
+А также конструктор и метод `show()`.
+
+При создании класса я передаю в него ссылку на переменную
+и сохраняю эту ссылку в приватной переменной класса `variable`.
+
+Метод `show()` выводит значение перменной.
+
+```cpp
+class Example {
+    public:
+        Example(int *xxx) { variable = xxx; }
+        void show() { cout << "value: " << *variable << endl; }
+    
+    private:
+        int *variable;
+};
+```
+
+Полный код:
+
+```cpp
+#include <iostream>
+
+using namespace std;
+
+class Example {
+    public:
+        Example(int *xxx) { variable = xxx; }
+        void show() { cout << "value: " << *variable << endl; }
+    
+    private:
+        int *variable;
+};
+
+int main() {
+    int test_var = 13;
+    
+    Example x = Example(&test_var);
+    x.show();      // тут выведется 13
+
+    test_var = 14; // изменяю значение внешней переменной
+    x.show();      // тут выведется 14
+    
+    return 0;
+}
+```

content/posts/2023/html/contenteditable-placeholder.md

@@ -0,0 +1,66 @@
+---
+title: "🏷️ Реализация placeholder для изменяемых HTML элементов"
+date: 2023-03-27T23:45:00+03:00
+draft: false
+tags: [development, tips, html, css]
+---
+
+## Это очень просто
+
+Не нужно слов, сразу показываю код!
+
+**HTML:**
+
+```html
+<p id="post-title" contenteditable="true" data-ph="Post title"></p>
+<p id="post-dec"   contenteditable="true" data-ph="Post desc"></p>
+```
+
+**CSS:**
+
+```css
+[contenteditable=true]:empty:not(:focus):before {
+  content: attr(data-ph);
+}
+
+[contenteditable=true]:empty:before {
+  content: attr(data-ph);
+}
+```
+
+## Разбор
+
+В HTML реализована фича, которая позволяет изменять содержимое
+любого HTML элемента.
+
+За это отвечает атрибут `contenteditable`.
+
+Берём `<div>`, добавляет атрибут `contenteditable="true"`
+и получаем аналог `<textarea>` 😉
+
+```html
+<div id="textarea" contenteditable="true" data-ph="Input text...">some text</div>
+```
+
+Однако, если очистить текст из элемента,
+он начинает скакать на странице и установка CSS свойств
+`margin`, `padding` и других вообще не помогает.
+
+Нужно, чтобы в элементе «что-то было».
+
+Реализовать это можно с помощью CSS свойста `content`.
+
+```css
+[contenteditable=true]:empty:not(:focus):before {
+  content: attr(data-ph);
+}
+
+[contenteditable=true]:empty:before {
+  content: attr(data-ph);
+}
+```
+
+Следующий код добавляет в тело элементов с атрибутом
+`contenteditable=true` значение из атрибута HTML элемента `data-ph`.
+
+Правила `:empty` и `:not(:focus)` проверяют что HTML тег пуст и не в фокусе.