9 записей с тегом "разработка"

Что такое deep-email-validator​

Deep-email-validator - это пакет, который проверяет адреса электронной почты на основе регулярных выражений, распространенных опечаток, одноразовых черных списков электронной почты, записей DNS и ответов SMTP-сервера.

Как установить​

Чтобы начать, просто установите пакет с помощью npm или yarn.

npm i deep-email-validator --save

yarn add deep-email-validator

Как использовать​

Просто импортируйте функцию validate из модуля deep-email-validator и используйте ее с электронной почтой, которую вы хотите проверить.

import validate from "deep-email-validator";

const main = async () => {
  let res = await validate("asdf@gmail.com");
  console.log(res);
};

Вы получите примерно такой ответ.

{
    "valid": false,
    "reason": "smtp",
    "validators": {
        "regex": {
          "valid": true
        },
        "typo": {
          "valid": true
        },
        "disposable": {
          "valid": true
        },
        "mx": {
          "valid": true
        },
        "smtp": {
          "valid": false,
          "reason": "Mailbox not found.",
        }
    }
  }

Кроме того, если не хотите получать такой длинный ответ, то можно настроить функцию validate.

await validate({
  email: "name@example.org",
  sender: "name@example.org",
  validateRegex: true,
  validateMx: true,
  validateTypo: true,
  validateDisposable: true,
  validateSMTP: true,
});

В постоянно развивающемся мире разработки программного обеспечения правильные инструменты могут значительно повлиять на продуктивность и качество кода. Один из таких инструментов, который привлекает внимание сообщества разработчиков, - это редактор Zed.

В этом посте мы рассмотрим, что делает Zed уникальным и почему вам стоит рассмотреть возможность его использования.

Что такое редактор Zed?​

Zed - это современный, открытый текстовый редактор, разработанный специально для кодирования. Он стремится обеспечить быстрый, эффективный и безотвлекающий рабочий процесс для разработчиков. С акцентом на производительность и простоту, Zed предлагает уникальное сочетание функций, которые подходят как для новичков, так и для опытных программистов.

Поддержка ИИ​

Экономьте время и количество нажатий клавиш, генерируя код с помощью ИИ. Zed поддерживает GitHub Copilot «из коробки». Также вы можете использовать GPT-4 для генерации или рефакторинга кода, нажав ctrl-enter и набрав подсказку на естественном языке.

Основные функции редактора Zed​

1. Молниеносная производительность​

Одна из выдающихся особенностей Zed - это его скорость. Разработанный с учетом производительности, Zed быстро загружается и легко справляется с большими файлами. Независимо от того, работаете ли вы над небольшим скриптом или массивной кодовой базой, Zed гарантирует, что вас не затормозит медленная работа.

2. Минималистичный интерфейс​

Интерфейс Zed чистый и минималистичный, созданный для того, чтобы минимизировать отвлекающие факторы. Редактор ориентирован на предоставление упрощенного опыта, который позволяет вам сосредоточиться на коде. Отсутствие ненужного беспорядка делает его легче для навигации и быстрого нахождения нужного.

3. Мощные возможности редактирования​

Несмотря на свою простоту, Zed наполнен мощными функциями редактирования. Он поддерживает множественные курсоры, позволяя редактировать код одновременно в разных местах. Редактор также предлагает надежные функции поиска и замены, что упрощает внесение изменений по всему проекту.

4. Расширяемость​

Zed очень расширяем благодаря своей системе плагинов. Вы можете настроить редактор под свой рабочий процесс, устанавливая плагины, которые добавляют новые функции или улучшают существующие. Активное сообщество вокруг Zed постоянно разрабатывает и делится плагинами, обеспечивая возможность адаптации редактора под ваши конкретные потребности.

5. Кросс-платформенная совместимость​

Независимо от того, используете ли вы Windows, macOS или Linux, Zed подойдет вам. Редактор является кросс-платформенным, обеспечивая единообразный опыт работы на любой операционной системе. Эта гибкость делает его отличным выбором для разработчиков, работающих в различных средах.

Начало работы с Zed​

Готовы попробовать Zed? Вот как вы можете начать:

1. Скачайте и установите: Перейдите на официальный сайт Zed и скачайте установочный файл для вашей операционной системы. Следуйте инструкциям по установке, чтобы настроить редактор на вашем компьютере.

2. Исследуйте интерфейс: Потратьте немного времени на изучение минималистичного интерфейса Zed. Ознакомьтесь с базовой компоновкой и функциями.

3. Настройте свою установку: Посетите репозиторий плагинов Zed, чтобы найти плагины, которые могут улучшить ваш опыт кодирования. Установите те, которые соответствуют вашему рабочему процессу, и настройте свою установку.

4. Начните кодировать: Откройте свой проект в Zed и начните кодировать. Воспользуйтесь мощными функциями редактирования и наслаждайтесь безотвлекающей средой.

Заключение​

Редактор Zed - это фантастический инструмент для разработчиков который поддерживает Github Copilot и GPT-4. Его минималистичный дизайн, мощные функции и кросс-платформенная совместимость делают его достойным дополнением к набору инструментов любого разработчика. Попробуйте Zed и посмотрите, как он может преобразовать ваш опыт кодирования.

Что такое Shadcn UI?​

Shadcn UI - это фреймворк пользовательского интерфейса (UI). Фреймворк пользовательского интерфейса - это набор инструментов и компонентов, которые помогают разработчикам создавать красивые и функциональные веб-сайты и приложения.

Зачем использовать Shadcn UI?​

1. Простота в использовании: Shadcn UI разработан таким образом, чтобы быть простым и интуитивно понятным. Это означает, что вам не нужно быть экспертом в программировании, чтобы им пользоваться.
2. Настраиваемый: вы можете легко изменить внешний вид своего веб-сайта в соответствии с вашим брендом или личным стилем.
3. Адаптивный дизайн: Ваш веб-сайт будет отлично смотреться на всех устройствах, будь то телефон, планшет или настольный компьютер.
4. **Готовые компоненты: **Shadcn UI содержит множество готовых компонентов, таких как кнопки, формы и панели навигации. Это экономит ваше время и усилия.\

Начало работы с Shadcn UI​

Вот основные шаги, чтобы начать использовать Shadcn UI в вашем проекте:

1. Установка: Сначала вам необходимо установить Shadcn UI. Вы можете сделать это с помощью менеджера пакетов npx

npx shadcn-ui@latest init

2. После установки вам необходимо добавить компоненты Shadcn-UI в свое приложение.

Вот пример того, как добавить компонент кнопки.​

npx shadcn-ui@latest add button

import { Button } from "shadcn-ui";

function App() {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
}

export default App;

3. Настройка компонентов: Вы можете настроить компоненты в соответствии с вашими потребностями. Shadcn-UI предоставляет различные опции и стили, которые вы можете применить. Например, для изменения цвета кнопки:

import { Button } from "shadcn-ui";

function App() {
  return (
    <div>
      <Button style={{ backgroundColor: "blue", color: "white" }}>
        Click Me
      </Button>
    </div>
  );
}

export default App;

Советы по использованию Shadcn-UI​

• Ознакомьтесь с документацией: В Shadcn UI есть отличная документация, в которой объясняется, как использовать каждый компонент. Это отличный ресурс, если вы застряли или нуждаетесь в дополнительной информации.
• Экспериментируйте: Не бойтесь пробовать разные стили и компоненты. Экспериментирование - лучший способ узнать и найти то, что лучше всего подходит для вашего проекта.

Заключение​

Shadcn UI - это мощный и простой в использовании инструмент для создания потрясающих веб-сайтов и приложений. Независимо от того, являетесь ли вы новичком или опытным разработчиком, Shadcn UI поможет вам воплотить ваши идеи в жизнь.

В этой статье я только познакомил вас с Shadcn, вы должны прочитать документацию с официального сайта, чтобы начать ее использовать.

Лучшие шрифты для программистов: улучшение читаемости и эстетики​

В мире программирования, где ясность и эффективность являются приоритетами, выбор шрифта может значительно повлиять на продуктивность и комфорт разработчика.

Правильный шрифт может уменьшить нагрузку на глаза, улучшить читаемость кода и сделать долгие сессии кодирования более приятными.

В этом блоге мы рассмотрим некоторые из самых популярных шрифтов, которые используют программисты сегодня, подчеркивая их особенности и почему они пользуются спросом в сообществе разработчиков.

1. Fira Code ✨​

Fira Code — популярный моноширинный шрифт с программными лигатурами. Эти лигатуры преобразуют общие многосимвольные комбинации в одиночные, визуально привлекательные символы. Например, == превращается в ≡, а != в ≠. Эти преобразования могут сделать код более читаемым и уменьшить визуальный беспорядок.

Особенности:

• Программные лигатуры для улучшенной читаемости.
• Четкое различие между похожими символами (например, 0 и O, 1 и l).
• Доступен в различных начертаниях (light, regular, medium, bold).

Почему программисты любят его:

• Лигатуры ускоряют чтение и написание кода.
• Легкость для глаз при долгих сессиях кодирования.

2. JetBrains Mono 🖥️​

JetBrains Mono — это шрифт, специально разработанный для разработчиков компанией JetBrains, создателями популярных IDE, таких как IntelliJ IDEA и PyCharm. Этот шрифт фокусируется на читаемости и снижении нагрузки на глаза, что делает его идеальным для длительных периодов кодирования.

Особенности:

• Увеличенная высота строчных букв для лучшей читаемости.
• Четкое различие между похожими символами.
• Поддержка программных лигатур.

Почему программисты любят его:

• Разработан компанией, которая глубоко понимает потребности разработчиков.
• Несколько увеличенная x-высота улучшает читаемость.

3. Source Code Pro 📄​

Source Code Pro — это шрифт с открытым исходным кодом, созданный Adobe. Он стремится улучшить читаемость и сделать код более эстетичным.

Особенности:

• Сбалансированный интервал между символами.
• Четкое различие между легко путаемыми символами.
• Отсутствие программных лигатур, что делает его простым и понятным.

Почему программисты любят его:

• Чистый и профессиональный вид.
• Отсутствие лигатур предпочитают некоторые разработчики, находящие их отвлекающими.

4. Ubuntu Mono 🐧​

Ubuntu Mono — это стандартный моноширинный шрифт для операционной системы Ubuntu. Он разработан для того, чтобы быть легким для глаз и обеспечивать отличную читаемость.

Особенности:

• Уникальный стиль, который отличает его от других моноширинных шрифтов.
• Четкое различие между символами.
• Доступен в обычном и жирном начертаниях.

Почему программисты любят его:

• Его уникальный дизайн придает свежий вид коду.
• Оптимизирован для экранного отображения, снижая нагрузку на глаза.

5. Cascadia Code 🌟​

Cascadia Code — это современный моноширинный шрифт от Microsoft, специально разработанный для кодирования. Он включает в себя программные лигатуры и поддерживает символы Powerline, делая его универсальным для различных сред кодирования.

Особенности:

• Программные лигатуры для улучшенной читаемости кода.
• Поддержка символов Powerline для интерфейсов командной строки.
• Четкий и стильный дизайн.

Почему программисты любят его:

• Лигатуры и поддержка символов улучшают опыт кодирования.
• Его современный дизайн выглядит отлично в любом IDE или терминале.

Заключение​

Выбор правильного шрифта — это личное решение каждого программиста, так как он зависит от индивидуальных предпочтений и конкретных требований кода. Независимо от того, предпочитаете ли вы лигатуры Fira Code, четкость JetBrains Mono или простоту Source Code Pro, существует идеальный шрифт, который улучшит ваш опыт кодирования. Экспериментируйте с этими опциями, чтобы найти тот, который подходит вам лучше всего, и наслаждайтесь более комфортным и эффективным процессом программирования.

А вы знали? 📢

Вы можете легко добавлять уведомления в свои веб-приложения, используя ванильный JavaScript без каких-либо библиотек. 💻

Вот простой пример кода.

Notification.requestPermission().then((permission) => {
  if (permission === "granted") {
    new Notification("привет, мир!");
  }
});

К сожалению, пользователь должен включить уведомление, прежде чем оно будет показано.

Браузер автоматически предложит пользователю принимать уведомления от вашего веб-приложения при выполнении метода requestPermission. 📬

Устали от использования Postman для своих вызовов API? 🚫📮 У меня есть для вас отличное решение: плагин REST Client для VS Code. 🚀

Благодаря более чем 4 миллионам загрузок и 5-звездочному рейтингу, этот плагин пользуется популярностью у разработчиков. 💻

Я сам использую его в своих личных проектах, и это удобнее, чем использовать PostMan или другие альтернативы.

Примеры​

🌐 Это для простого GET запроса

🌐 а это POST-запрос с данными

Генерация кода на основе запроса​

После того, как вы завершите свой запрос в REST Client, вы можете захотеть сделать тот же запрос из своего исходного кода.

Как только вы подготовите запрос, как и ранее, используйте сочетание клавиш Ctrl+Alt+C (Cmd+Alt+C для macOS).

Заключение​

Если вам понравился плагин, вы можете прочитать больше из официальной документации.

[Официально] Использование фреймворка React Native, такого как Expo, в настоящее время является рекомендуемым способом создания новых приложений React Native. 📱​

Kурс по Expo (React Native)​

Посмотреть на канале. 🎓

👤 Мое мнение об Expo и React Native

Я предпочитаю Expo (React Native) для разработки мобильных приложений и рекомендую его другим. 👍

Если вы хотите взглянуть на React Native, прочтите этот пост.

Многие разработчики ошибочно полагают, что компании используют React Native из-за его дешевизны, но многие богатые компании также полагаются на него, в том числе:

• Meta (Instagram, Messenger)
• Discord (основное приложение)
• Microsoft (Teams, Outlook)
• Tesla (основное приложение)

Если вы начинаете заниматься мобильной разработкой, я настоятельно рекомендую учить Expo (React Native). 📚

Для тех, кто не в курсе:

Expo (React Nativea) - это кроссплатформенный фреймворк, позволяющий создавать Android, iOS, а иногда и веб-приложения с использованием единой кодовой базы. Он использует систему компонентов, аналогичную React, но без DOM. 🌐

В чем разница между React Native и Expo?​

React Native

React Native - это фреймворк, разработанный Facebook, который позволяет разработчикам создавать мобильные приложения с использованием JavaScript и React. Он позволяет создавать по-настоящему нативные приложения путем прямой визуализации компонентов с использованием собственных API.

Expo

Expo - это фреймворк и платформа, построенные на базе React Native. Она призвана упростить процесс разработки, предоставляя набор инструментов и сервисов, которые "из коробки" решают многие распространенные задачи. Expo можно рассматривать как управляемый рабочий процесс для приложений React Native.

Kурс по Expo (React Native)​

Знакомство с React Native​

В этом посте я хочу, чтобы вы просто бегло ознакомились с React Native и поняли некоторые принципы и то, как он работает, а также посмотрели на некоторый код.

Для тех, кто не знает. React Native — кроссплатформенный фреймворк с открытым исходным кодом для разработки нативных мобильных и настольных приложений на JavaScript и TypeScript, созданный Facebook Подробнее.

В React Native используются те же функции, что и в React. Основное различие заключается в DOM и стилизации.

Примеры кода​

Вот простой пример xука useState в React

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажми на меня!</button>
    </div>
  );
};

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

тот же пример useState, но в React Native

import React, { useState } from "react";
import { View, Text, Button, StyleSheet } from "react-native";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>Вы нажали {count} раз</Text>
      <Button onPress={() => setCount(count + 1)} title="Нажми на меня!" />
    </View>
  );
};

// Стили React Native
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

Разница между React и React Native​

Как вы можете видеть, основное различие заключается в стиле, потому что React Native не использует HTML и CSS

Все основные компоненты React Native поддерживают опцию с именем style. Названия и значения стилей обычно соответствуют тому, как работает CSS в Интернете, за исключением того, что названия написаны с использованием верблюжьего регистра (CamelCase), например, backgroundColor, а не background-color.

Заключение​

Этот пост - всего лишь небольшое введение в React Native. Если вы хотите создавать мобильные приложения в React Native, я рекомендую вам посмотреть курс, который я выложил в нашем telegram-канале.

Kурс по Expo (React Native)​

Посмотреть на канале. 🎓

Что такое Gravatar?​

, сокращенно от "Globally Recognized Avatar", - это сервис, который позволяет пользователям создавать изображение аватара, связанное с их адресом электронной почты. После настройки этот аватар можно использовать на различных веб-сайтах и платформах, поддерживающих Gravatar.

Основные функции Gravatar включают:

Глобальная узнаваемость: Ваш аватар будет отображаться на любом сайте, поддерживающем Gravatar, что обеспечивает постоянную онлайн-идентификацию. Простота использования: Как только вы загрузите свой аватар, вам не нужно будет повторно настраивать его для разных сайтов. Привязка к электронной почте: Аватар привязан к вашему адресу электронной почты, поэтому при желании вы можете использовать разные аватары для разных адресов электронной почты. Настройка: Вы можете изменить свой аватар в любое время, и изменения будут отражены на всех сайтах, использующих Gravatar.

Сервисы, использующие Gravatar​

Gravatar широко используется на таких платформах, как

• WordPress
• GitHub
• Stack Overflow
• Slack

и многих других блогах и форумах.

Gravatar для разработчиков​

Если другие сервисы используют gravatar, это означает, что вы также можете использовать его для своих приложений.

Вот пример того, как получить аватар пользователя из Gravatar.

Я скопировал этот пример кода из официальной документации Gravatar

const sha256 = require("js-sha256");

function getGravatarURL(email) {
  // Удалить начальные и конечные пробелы из
  // адреса электронной почты и привести все символы
  // к нижнему регистру
  const address = String(email).trim().toLowerCase();

  // Создать SHA256 хэш из конечной строки
  const hash = sha256(address);

  // Получить фактический URL изображения
  return `https://www.gravatar.com/avatar/${hash}`;
}

Заключение​

Если вы зарегистрируетесь на Gravatar с тем же адресом электронной почты, который используете для других сервисов, а затем загрузите свой аватар в Gravatar, те сервисы, которые используют Gravatar, автоматически извлекут из него ваш аватар. Это означает, что вам не нужно будет загружать свой аватар в каждый сервис по отдельности.

Тот же пост в telegram​