Подборка мемов, но на английском. 🤣
Читабельно? Или стоит делать русскую адаптацию?
Источник: DevGurt - сборище Программистов🧑💻
Читабельно? Или стоит делать русскую адаптацию?
Источник: DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
🦀 vs 🐍: Rust против Python – Решающее сравнение скорости и простоты на 2024 год
🚀 Почему Rust?
Rust – это системный язык программирования, известный своей скоростью, безопасностью памяти и абстракциями с нулевой стоимостью. Его часто сравнивают с C/C++, но он более современный и безопасный.
- Безопасность памяти без сборщика мусора: Rust предотвращает проблемы, такие как разыменование нулевых указателей и гонки данных.
- Высокая производительность: Rust компилируется в нативный код, что делает его одним из самых быстрых языков.
- Параллелизм: Система владения Rust гарантирует безопасность потоков.
🐍 Почему Python?
Python – это высокоуровневый интерпретируемый язык, известный своей простотой и читаемостью. Он широко используется в веб-разработке, науке о данных, автоматизации и скриптинге.
- Легкость изучения и использования:Простой синтаксис Python делает его отличным выбором для начинающих и быстрого прототипирования.
- Обширные библиотеки: От машинного обучения до веб-разработки, Python имеет огромную экосистему библиотек и фреймворков.
- Сообщество и поддержка: Сообщество Python огромно, и его поддержка различных случаев использования делает его популярным среди многих разработчиков.
🧑💻 Сравнение примеров кода: Rust vs Python
Рассмотрим простую задачу: чтение файла и подсчет количества строк.
🦀 Пример на Rust:
Сильные стороны Rust
- Безопасность памяти: Оператор
- Скорость: Rust компилируется в нативный код, что делает операции с файлами быстрее.
🐍 Пример на Python:
Сильные стороны Python
- Простота: Код лаконичен и легко читается.
- Удобство использования: Высокоуровневая природа Python делает операции с файлами простыми и требует минимум кода.
⚡️ Сравнение производительности
Читайте в статье
⚙️ Параллелизм и многопоточность
Параллелизм является ключевой сильной стороной Rust благодаря его системе владения, которая обеспечивает безопасность потоков на этапе компиляции. С другой стороны, глобальная блокировка интерпретатора (GIL) Python ограничивает его возможности параллелизма в многопоточных приложениях.
🦀 Пример параллелизма на Rust:
🐍 Пример параллелизма на Python:
Источник: DevGurt - сборище Программистов🧑💻
🚀 Почему Rust?
Rust – это системный язык программирования, известный своей скоростью, безопасностью памяти и абстракциями с нулевой стоимостью. Его часто сравнивают с C/C++, но он более современный и безопасный.
- Безопасность памяти без сборщика мусора: Rust предотвращает проблемы, такие как разыменование нулевых указателей и гонки данных.
- Высокая производительность: Rust компилируется в нативный код, что делает его одним из самых быстрых языков.
- Параллелизм: Система владения Rust гарантирует безопасность потоков.
🐍 Почему Python?
Python – это высокоуровневый интерпретируемый язык, известный своей простотой и читаемостью. Он широко используется в веб-разработке, науке о данных, автоматизации и скриптинге.
- Легкость изучения и использования:Простой синтаксис Python делает его отличным выбором для начинающих и быстрого прототипирования.
- Обширные библиотеки: От машинного обучения до веб-разработки, Python имеет огромную экосистему библиотек и фреймворков.
- Сообщество и поддержка: Сообщество Python огромно, и его поддержка различных случаев использования делает его популярным среди многих разработчиков.
🧑💻 Сравнение примеров кода: Rust vs Python
Рассмотрим простую задачу: чтение файла и подсчет количества строк.
🦀 Пример на Rust:
use std::fs::File;
use std::io::{self, BufRead};
use std::path::Path;
fn count_lines_in_file(filename: &str) -> io::Result<usize> {
let file = File::open(filename)?;
let reader = io::BufReader::new(file);
let line_count = reader.lines().count();
Ok(line_count)
}
fn main() -> io::Result<()> {
let filename = "example.txt";
let line_count = count_lines_in_file(filename)?;
println!("Файл содержит {} строк.", line_count);
Ok(())
}
Сильные стороны Rust
- Безопасность памяти: Оператор
? обеспечивает правильную обработку ошибок без сбоев.- Скорость: Rust компилируется в нативный код, что делает операции с файлами быстрее.
🐍 Пример на Python:
def count_lines_in_file(filename):
with open(filename, 'r') as file:
return sum(1 for _ in file)
if __name__ == "__main__":
filename = "example.txt"
line_count = count_lines_in_file(filename)
print(f"Файл содержит {line_count} строк.")
Сильные стороны Python
- Простота: Код лаконичен и легко читается.
- Удобство использования: Высокоуровневая природа Python делает операции с файлами простыми и требует минимум кода.
⚡️ Сравнение производительности
Читайте в статье
⚙️ Параллелизм и многопоточность
Параллелизм является ключевой сильной стороной Rust благодаря его системе владения, которая обеспечивает безопасность потоков на этапе компиляции. С другой стороны, глобальная блокировка интерпретатора (GIL) Python ограничивает его возможности параллелизма в многопоточных приложениях.
🦀 Пример параллелизма на Rust:
use std::thread;
fn main() {
let handles: Vec<_> = (0..10).map(|_| {
thread::spawn(|| {
println!("Привет из потока!");
})
}).collect();
for handle in handles {
handle.join().unwrap();
}
}
🐍 Пример параллелизма на Python:
import threading
def hello_from_thread():
print("Привет из потока!")
threads = []
for _ in range(10):
thread = threading.Thread(target=hello_from_thread)
threads.append(thread)
thread.start()
for thread in threads:
thread.join()
Источник: DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2👍1
Манипуляции со строками в PHP
В этой статье мы рассмотрим, как работать со строками в PHP.
➡️ Создание строк
Строки в PHP можно создавать, используя одинарные или двойные кавычки:
➡️ Интерполяция строк
Двойные кавычки позволяют использовать интерполяцию переменных:
➡️ Конкатенация строк
Для объединения строк используется оператор "." (точка):
➡️ Доступ к символам строки
Можно получить доступ к отдельным символам строки с помощью квадратных скобок:
➡️ Heredoc синтаксис
Для создания многострочных строк можно использовать Heredoc синтаксис:
➡️ Функции для работы со строками
PHP предоставляет множество встроенных функций для работы со строками:
- strtolower() и strtoupper() для изменения регистра
- trim() для удаления пробелов в начале и конце строки
- str_replace() для замены части строки
- strlen() для получения длины строки
- str_contains() для проверки наличия подстроки
Источник: DevGurt - сборище Программистов🧑💻
В этой статье мы рассмотрим, как работать со строками в PHP.
Строки в PHP можно создавать, используя одинарные или двойные кавычки:
$name = 'Mike';
// или
$name = "Mike";
Двойные кавычки позволяют использовать интерполяцию переменных:
echo "Hello $name";
// Hello Mike
echo "Hello {$name}";
// Hello Mike
Для объединения строк используется оператор "." (точка):
$name = 'Mike';
echo 'Hello ' . $name;
// Hello Mike
Можно получить доступ к отдельным символам строки с помощью квадратных скобок:
$message = "Hello World";
echo $message[0]; // H
$message[1] = 'a'; // Hallo World
Для создания многострочных строк можно использовать Heredoc синтаксис:
$html = <<<HTML
<h1>This is a title</h1>
<p>This is a paragraph</p>
HTML;
PHP предоставляет множество встроенных функций для работы со строками:
- strtolower() и strtoupper() для изменения регистра
- trim() для удаления пробелов в начале и конце строки
- str_replace() для замены части строки
- strlen() для получения длины строки
- str_contains() для проверки наличия подстроки
Источник: DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Манипуляции с числами в PHP
➡️ Математические операции
С числами можно выполнять стандартные математические операции:
➡️ Приоритет операторов
PHP учитывает приоритет операторов при выполнении вычислений:
➡️ Инкремент и декремент
Существует несколько способов увеличить или уменьшить значение переменной:
➡️ Округление чисел
Функция round() позволяет округлять числа:
➡️ Генерация случайных чисел
Функция rand() генерирует случайное целое число в заданном диапазоне:
➡️ Улучшение читаемости чисел
Для улучшения читаемости больших чисел можно использовать символ подчеркивания:
Источник: DevGurt - сборище Программистов🧑💻
С числами можно выполнять стандартные математические операции:
$value = 10;
echo $value + 5; // 15
echo $value - 2; // 8
echo $value * 2; // 20
echo $value / 2; // 5
PHP учитывает приоритет операторов при выполнении вычислений:
echo 1 + 5 * 3; // 16
echo (1 + 5) * 3; // 18
Существует несколько способов увеличить или уменьшить значение переменной:
$value = 10;
$value = $value + 1;
$value += 1;
$value++;
// Декремент
$value--;
Функция round() позволяет округлять числа:
echo round(10.52); // 11
echo round(10.5278, 2); // 10.53
Функция rand() генерирует случайное целое число в заданном диапазоне:
echo rand(10, 100);
Для улучшения читаемости больших чисел можно использовать символ подчеркивания:
$value = 1_000_000_000; // 1000000000
Источник: DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Для начала создадим новый проект Laravel:
composer create-project --prefer-dist laravel/laravel blog
cd blog
php artisan serve
После этого ваше приложение будет доступно по адресу localhost:8000.
Откройте Telegram и найдите @BotFather. Следуйте инструкциям для создания нового бота. Вы получите токен доступа, который нужно сохранить в безопасном месте.
Установите SDK для работы с Telegram API:
composer require irazasyed/telegram-bot-sdk dev-develop
php artisan vendor:publish
Настройте файл config/telegram.php, добавив имя пользователя и токен вашего бота.
Создайте новый маршрут API в routes/api.php для получения обновлений:
<?php
use Illuminate\Http\Request;
use Telegram;
Route::post('/bot/getupdates', function() {
$updates = Telegram::getUpdates();
return (json_encode($updates));
});
Добавьте новый маршрут для отправки сообщений:
<?php
Route::post('bot/sendmessage', function() {
Telegram::sendMessage([
'chat_id' => 'RECIPIENT_CHAT_ID',
'text' => 'Hello world!'
]);
return;
});
Теперь у вас есть базовая структура для создания Telegram-бота с использованием Laravel. Вы можете расширять функциональность бота, добавляя новые команды и обработчики сообщений.
Источник: DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
Редактор кода - это основной инструмент программиста, своего рода цифровой блокнот для написания кода. Среди наиболее популярных вариантов выделяются:
- Visual Studio Code
- Atom
- Sublime Text
Эти редакторы предлагают такие полезные функции, как автодополнение кода и подсветка синтаксиса, что существенно упрощает процесс программирования.
IDE представляет собой более продвинутую версию редактора кода с дополнительными инструментами для разработки. Вот несколько популярных IDE:
- Visual Studio для веб-разработки
- PyCharm для Python
- IntelliJ IDEA для Java
IDE помогают эффективно управлять проектами, отлаживать код и проводить тестирование.
Система контроля версий необходима для отслеживания изменений в коде, сотрудничества с другими разработчиками и управления историей проекта. Git является наиболее распространенной системой контроля версий, а GitHub - популярной платформой для хранения Git-репозиториев в облаке.
Терминал или интерфейс командной строки - важный инструмент для выполнения различных задач программирования. Популярные терминальные приложения включают:
- Windows Terminal для Windows
- Terminal.app или iTerm2 для macOS
- GNOME Terminal или Konsole для Linux
Для работы с базами данных необходимы специальные инструменты, такие как:
- MySQL Workbench
- SQL Server Management Studio
- DBeaver
Эти инструменты помогают создавать, модифицировать и запрашивать базы данных.
Для работы с текстовыми файлами, не являющимися кодом, полезны такие программы, как Notepad (Windows), TextEdit (Mac) или Notepad++ (Windows).
Виртуализация позволяет тестировать программное обеспечение на разных операционных системах. Популярные инструменты включают VirtualBox и VMware.
В зависимости от языка программирования, вам может понадобиться менеджер пакетов, например:
- npm для Node.js
- pip для Python
- gem для Ruby
Для эффективного общения с командой или клиентами используются такие инструменты, как Slack, Microsoft Teams или электронная почта.
Такие платформы, как Netlify, GitHub и Bitbucket, позволяют размещать код онлайн, сотрудничать с другими разработчиками и управлять проектами.
А какие тулы используете вы?
Источник: DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Forwarded from Python Hub - сборище Питонистов
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2🤔1
В этой статье рассматриваются основные соглашения по именованию, которые используются в крупных технологических компаниях при работе с PHP Laravel 8, особенно при разработке API. Эти соглашения соответствуют стандартам кодирования Laravel и спецификациям PSR, а также хорошо сочетаются с принципами SOLID и KISS.
- PascalCase: Используется для классов, интерфейсов/контрактов и трейтов
- TITLE_CASE: Применяется для констант
- camelCase: Используется для функций/методов, свойств класса и переменных
- lower_snake_case: Применяется для индексов массивов, имен полей базы данных, заполняемых объектов модели и отношений модели
- lower-kebab-case: Используется для маршрутов
// Класс
class AuthController extends Controller
{
// ...
}
// Интерфейс
interface LoginInterface
{
// ...
}
// Трейт
trait Audit
{
// ...
}
namespace App\Constants;
class AppConstant {
const DEFAULT_PAGE = 1;
const DEFAULT_PAGE_LIMIT = 10;
const MAX_PAGE_LIMIT = 100;
const ALPHANUMERIC_CHARACTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
}
class AuthController extends Controller
{
protected $loginService;
public function refreshToken() : JsonResponse
{
return $this->loginService->refreshToken();
}
public function __construct(LoginService $loginService)
{
$this->loginService = $loginService;
}
}
// Поля базы данных
Schema::create('audits', function (Blueprint $table) {
$table->id();
$table->string('user_type')->nullable();
$table->unsignedBigInteger('user_id')->nullable();
});
// Заполняемые поля модели
protected $fillable = [
'first_name',
'last_name',
'email',
];
Route::group(['middleware' => 'auth:api'], function() {
Route::post('refresh-token', [AuthController::class, 'refreshToken']);
Route::post('user-logout', [AuthController::class, 'logout']);
});Соблюдение этих соглашений об именовании поможет сделать ваш код более читаемым, поддерживаемым и соответствующим стандартам Laravel и PHP.
Источник: DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1
📕📕📕 PHP для начинающих: Руководство по основам
➡️ Что такое PHP и почему он так популярен?
PHP (PHP: Hypertext Preprocessor) - это язык сценариев с открытым исходным кодом, который произвел революцию в мире веб-разработки. Представьте себе инструмент, который легко интегрируется с HTML, позволяя вам создавать динамический контент на лету. Это и есть PHP!
- Простота в освоении: PHP дружелюбен к новичкам, позволяя вам быстро погрузиться в мир программирования.
- Универсальность: От простых блогов до сложных корпоративных сайтов - PHP справится со всем.
- Огромное сообщество: Миллионы разработчиков по всему миру готовы поделиться опытом и помочь в решении проблем.
- Бесплатность и открытость: PHP абсолютно бесплатен и имеет открытый исходный код.
- Высокая производительность: PHP оптимизирован для веб и обеспечивает быструю обработку запросов.
➡️ Ваша первая программа на PHP: Hello, World!
Давайте начнем наше путешествие в мир PHP с классического примера "Hello, World!". Этот простой скрипт покажет вам, насколько легко начать работу с PHP:
Этот код выведет приветственное сообщение на вашей веб-странице. Давайте разберем его по частям:
- <?php : Это открывающий тег PHP, который говорит серверу "Внимание, здесь начинается PHP-код!"
- echo : Это команда для вывода текста или переменных.
- "Hello, World! Добро пожаловать в мир PHP!" : Это строка, которую мы хотим вывести.
- ?> : Закрывающий тег PHP, обозначающий конец PHP-кода.
➡️ Основы синтаксиса PHP: Ваш путеводитель
Теперь, когда мы познакомились с простейшим примером, давайте углубимся в основы синтаксиса PHP:
➡️ 1. Переменные в PHP
В PHP переменные начинаются со знака $. Это ваши контейнеры для хранения данных:
➡️ 2. Типы данных
PHP поддерживает различные типы данных. Вот некоторые из них:
- Строки: $text = "Это строка";
- Целые числа: $number = 42;
- Числа с плавающей точкой: $pi = 3.14;
- Булевы значения: $isTrue = true;
➡️ 3. Массивы
Массивы в PHP - это мощный инструмент для хранения коллекций данных:
🔗 Условные операторы, циклы и функции можно изучить в статье 🔗
➡️ Практическое применение: Создаем простую форму
Давайте применим наши знания на практике и создадим простую форму обратной связи:
➡️ Что дальше?
- Изучите работу с базами данных MySQL
- Познакомьтесь с объектно-ориентированным программированием в PHP
- Исследуйте популярные PHP-фреймворки, такие как Laravel или Symfony
- Практикуйтесь в создании реальных веб-проектов
Удачи в вашем путешествии по миру PHP! Помните, что практика - ключ к успеху в программировании.
Источник: DevGurt - сборище Программистов🧑💻
PHP (PHP: Hypertext Preprocessor) - это язык сценариев с открытым исходным кодом, который произвел революцию в мире веб-разработки. Представьте себе инструмент, который легко интегрируется с HTML, позволяя вам создавать динамический контент на лету. Это и есть PHP!
- Простота в освоении: PHP дружелюбен к новичкам, позволяя вам быстро погрузиться в мир программирования.
- Универсальность: От простых блогов до сложных корпоративных сайтов - PHP справится со всем.
- Огромное сообщество: Миллионы разработчиков по всему миру готовы поделиться опытом и помочь в решении проблем.
- Бесплатность и открытость: PHP абсолютно бесплатен и имеет открытый исходный код.
- Высокая производительность: PHP оптимизирован для веб и обеспечивает быструю обработку запросов.
Давайте начнем наше путешествие в мир PHP с классического примера "Hello, World!". Этот простой скрипт покажет вам, насколько легко начать работу с PHP:
<?php
echo "Hello, World! Добро пожаловать в мир PHP!";
?>
Этот код выведет приветственное сообщение на вашей веб-странице. Давайте разберем его по частям:
- <?php : Это открывающий тег PHP, который говорит серверу "Внимание, здесь начинается PHP-код!"
- echo : Это команда для вывода текста или переменных.
- "Hello, World! Добро пожаловать в мир PHP!" : Это строка, которую мы хотим вывести.
- ?> : Закрывающий тег PHP, обозначающий конец PHP-кода.
Теперь, когда мы познакомились с простейшим примером, давайте углубимся в основы синтаксиса PHP:
В PHP переменные начинаются со знака $. Это ваши контейнеры для хранения данных:
<?php
$name = "Алексей";
$age = 25;
echo "Меня зовут $name и мне $age лет.";
?>
PHP поддерживает различные типы данных. Вот некоторые из них:
- Строки: $text = "Это строка";
- Целые числа: $number = 42;
- Числа с плавающей точкой: $pi = 3.14;
- Булевы значения: $isTrue = true;
Массивы в PHP - это мощный инструмент для хранения коллекций данных:
<?php
$fruits = array("Яблоко", "Банан", "Апельсин");
echo $fruits[0]; // Выведет "Яблоко"
?>
Давайте применим наши знания на практике и создадим простую форму обратной связи:
<!DOCTYPE html>
<html>
<body>
<h2>Форма обратной связи</h2>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
Имя: <input type="text" name="name"><br>
Email: <input type="text" name="email"><br>
Сообщение: <textarea name="message"></textarea><br>
<input type="submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
echo "<h3>Спасибо за ваше сообщение!</h3>";
echo "Имя: $name<br>";
echo "Email: $email<br>";
echo "Сообщение: $message";
}
?>
</body>
</html>
- Изучите работу с базами данных MySQL
- Познакомьтесь с объектно-ориентированным программированием в PHP
- Исследуйте популярные PHP-фреймворки, такие как Laravel или Symfony
- Практикуйтесь в создании реальных веб-проектов
Удачи в вашем путешествии по миру PHP! Помните, что практика - ключ к успеху в программировании.
Источник: DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Как быстро превратить текст в график
Napkin AI — сервис с ИИ, который преобразует текст пользователя в график, который можно также сгенерировать под нужный стиль.
➡️ Что нужно, чтобы создать график:
1. Нажмите +New Napkin в верхнем левом углу.
2. Выберите Draft with Ai или Blank Napkin.
*Первая вкладка позволяет создать текст с помощью промптов, вторая — самостоятельно.
3. Создайте или напишите текст → выберите стиль графика → если нужно отредактируйте текст, иконки или добавьте картинки.
➡️ Готовый график можно загрузить в форматах PNG, SVG или PDF и в двух вариациях фона: светлой и темной.
Сейчас сервис находится в бета-тесте, есть как бесплатная версия, так и тарифные планы.
Интересны посты про разные ИИ?🤔
Источник: DevGurt - сборище Программистов🧑💻
Napkin AI — сервис с ИИ, который преобразует текст пользователя в график, который можно также сгенерировать под нужный стиль.
1. Нажмите +New Napkin в верхнем левом углу.
2. Выберите Draft with Ai или Blank Napkin.
*Первая вкладка позволяет создать текст с помощью промптов, вторая — самостоятельно.
3. Создайте или напишите текст → выберите стиль графика → если нужно отредактируйте текст, иконки или добавьте картинки.
Сейчас сервис находится в бета-тесте, есть как бесплатная версия, так и тарифные планы.
Интересны посты про разные ИИ?
Источник: DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1
Представьте себе, что каждый раз, когда вы задаете вопрос ChatGPT 4, где-то в мире исчезает целая бутылка воды. Звучит как научная фантастика? Однако, последние исследования показывают, что это не так уж далеко от истины!
Недавнее исследование, проведенное совместно Калифорнийским университетом и The Washington Post, пролило свет на скрытую сторону работы искусственного интеллекта. Оказывается, каждый запрос к GPT-4 связан с существенным расходом воды, необходимой для охлаждения серверов. И это только верхушка айсберга энергозатрат!
Интересно, что количество потребляемой воды зависит от местоположения дата-центров:
- 🏙 В Вашингтоне: около 1,5 литра воды на 100 слов
- 🏜 В Техасе: всего 235 мл на тот же объем текста
Эта разница объясняется различиями в системах охлаждения в разных регионах.
Это исследование подчеркивает важность понимания скрытых экологических последствий технологического прогресса. Пока мы наслаждаемся удивительными возможностями ИИ, важно помнить о ресурсах, которые стоят за каждым запросом. 🌍
DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1
В США произошла серия необычных инцидентов с китайскими роботами-пылесосами. Устройства компании Ecovacs стали жертвами хакерских атак и начали вести себя крайне неадекватно.
Пылесосы внезапно начали выкрикивать оскорбления и нецензурную брань через встроенные динамики. В одном случае робот-пылесос буквально преследовал членов семьи, обзывая их "грязными ниггерами" и другими обидными словами.
Но люди - не единственные жертвы взбесившихся пылесосов. Зафиксирован случай, когда устройство без остановки гонялось за домашним питомцем, вызывая панику у собаки.
Кто бы мог подумать, что обычные бытовые приборы могут стать источником такого хаоса? Похоже, будущее, которое мы представляли в научной фантастике, наступает быстрее, чем мы ожидали.
DevGurt - сборище Программистов
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
CSS - мощный инструмент для веб-разработчиков, но иногда он может быть сложным в использовании. В этой статье мы рассмотрим 10 полезных фрагментов кода CSS, которые помогут улучшить ваши таблицы стилей и сделать ваши дизайны более эффективными.
Центрирование элементов как по вертикали, так и по горизонтали часто вызывает трудности. Вот простой способ идеально отцентрировать элемент:
.center-me {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Этот код использует абсолютное позиционирование и CSS-трансформации для точного центрирования элемента в его родительском контейнере.
Добавьте элегантности навигации по странице с помощью плавной прокрутки:
html {
scroll-behavior: smooth;
}Это простое объявление обеспечивает плавную анимацию при прокрутке к якорным ссылкам на странице.
Решите проблемы с плавающими элементами с помощью хака clearfix:
.clearfix::after {
content: "";
display: table;
clear: both;
}Добавьте этот класс к контейнеру с плавающими дочерними элементами, чтобы предотвратить их выход за пределы контейнера.
Настройте внешний вид полос прокрутки в соответствии с дизайном вашего сайта:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}Этот код работает в браузерах на основе WebKit, таких как Chrome и Safari.
Используйте Flexbox для простого центрирования содержимого:
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}Этот класс центрирует дочерние элементы как по вертикали, так и по горизонтали.
Ограничьте отображение длинного текста и добавьте многоточие:
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Этот код предотвращает перенос текста и добавляет многоточие в конце обрезанного текста.
Создайте треугольник с помощью чистого CSS:
.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #333;
}Этот код создает треугольник, направленный вверх. Вы можете изменять размеры и направление, настраивая свойства границ.
Добавьте глубины вашему дизайну с помощью градиентного фона:
.gradient-bg {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}Этот код создает горизонтальный градиент от теплого оранжевого до мягкого персикового цвета.
Добавьте постоянный интервал между элементами:
* + * {
margin-top: 1.5em;
}Этот селектор добавляет верхнее поле ко всем элементам, которые следуют за другим элементом.
Используйте переменные CSS для создания гибких, тематических дизайнов:
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size: 16px;
}
.button {
background-color: var(--primary-color);
font-size: var(--font-size);
}Определите переменные в псевдоклассе :root и используйте их в вашей таблице стилей для легкого обновления тем.
Эти 10 фрагментов кода CSS могут значительно улучшить ваши навыки веб-разработки и сделать ваши проекты более эффективными и элегантными. Экспериментируйте с ними и адаптируйте их под свои нужды, чтобы создавать впечатляющие пользовательские интерфейсы.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1