Windsurf vs Cursor IDE: кто лучший AI-редактор кода?

Две популярные IDE (среды разработки) с поддержкой искусственного интеллекта: Windsurf и Cursor. Оба инструмента заявляют, что ускорят процесс написания кода, но какой из них лучше подойдет именно вам? Я тщательно изучил обе, и в статье расскажу к каким выводам пришел.

👉 @seniorFront

Dropbox Color Picker

Вся сцена - это SVG картинка, анимируемая библиотекой gsap.

👉 @seniorFront

Next Prev & Hover Effects in JavaScript

В этом видео создается эффект при наведении на блок и его соседние блоки на JS.

👉 @seniorFront

"Боже, просто подай знак, могу ли я сегодня ничего не делать и списать 8 рабочих часов"

Бог:

👉 @seniorFront

Blurred Gear Loader

Реализовано с использованием возможностей препроцессоров Pug и SCSS.

👉 @seniorFront

Image Slider

Слайдер, реализованный без использования JS, при помощи радио-кнопок.

👉 @seniorFront

Simple CSS Animation Effects

В этом видео создается оригинальный анимированный загрузчик на чистом CSS.

👉 @seniorFront

Toggle Dark

Переключатель, реализованный на чистых HTML и CSS.

👉 @seniorFront

Roman Numerals Encoder

Создайте функцию, принимающую в качестве параметра целое положительное число от 1 до 3999 (оба числа включены) и возвращающую строку, содержащую римское цифровое представление этого целого числа.

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

В римских цифрах:
1990 год записывается: 1000=M + 900=CM + 90=XC; в результате получается MCMXC.
2008 год записывается как 2000=ММ, 8=VIII; или MMVIII.
1666 год использует каждый римский символ в порядке убывания: MDCLXVI.

Пример:

   1 --> "I"
1000 --> "M"
1666 --> "MDCLXVI"

Справка:

символ - значение:

I        1
V        5
X       10
L       50
C      100
D      500
M    1,000

👉 @seniorFront

Топ-10 техник атак веб-приложений 2024 года

PortSwigger опубликовали топ-10 техник атак веб-приложений 2024 года, проекта, созданного усилиями сообщества, чтобы определить самые инновационные и важные исследования в области веб-безопасности, опубликованные за последний год.

👉 @seniorFront

​Зачем нужен виртуальный DOM?

Виртуальный DOM (Virtual DOM) — это концепция, используемая в современных фреймворках и библиотеках, таких как React, для оптимизации и ускорения работы с реальным DOM. Реальный DOM медленный при частых изменениях, поэтому виртуальный DOM решает эту проблему, делая процесс более эффективным.

Зачем он нужен
1. Улучшение производительности: Значительно уменьшает количество прямых манипуляций с реальным DOM, которые являются дорогостоящими с точки зрения производительности.
2. Упрощение разработки: Работая с ним, можно более эффективно управлять состоянием приложения и его представлением, абстрагируясь от непосредственной работы с реальным DOM.

Как он работает
1. Создание: Когда состояние приложения меняется, создаётся новый виртуальный DOM, представляющий обновлённое состояние.
2. Сравнение: Сравниваются старый и новый виртуальные DOM, чтобы определить, какие части реального DOM нужно обновить. Этот процесс называется "диффинг" (diffing).
3. Минимальные: После сравнения, в реальный DOM вносятся только необходимые изменения, что значительно снижает количество операций с ним.

Пример

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

export default Counter;

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

Преимущества
1. Повышение производительности: Благодаря уменьшению количества прямых операций с реальным DOM.
2. Кроссбраузерная совместимость: Виртуальный DOM позволяет абстрагироваться от специфичных для браузера особенностей работы с DOM.
3. Лёгкость обновлений и рендеринга: Использование виртуального DOM делает процесс обновления интерфейса приложения более предсказуемым и управляемым.

👉 @seniorFront

LED Controls

Оригинальные переключатели, реализованные на React и стилизованные в SCSS.

👉 @seniorFront

​Scrum-то какой! За что критикуют спринты

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

Четыре причины недовольства

1 — Гонка за показателями. Классический спринт дробит процесс разработки на двухнедельные промежутки, в течение которых команда постепенно движется к цели. В теории тикеты в пределах одного спринта должны закрываться равномерно, но на практике бывает иначе. Некоторые разработчики отмечают, что в конце спринта часто начинается кранч — гонка за выполнением задач. Чтобы уложиться в сроки, команда помечает тикеты как завершенные, даже если осталось доделать еще 5% работы, а все недоделки перетекают в новые задачи. Еще хуже, когда команда применяет хаки и костыли, чтобы уложиться в срок, жертвуя качеством.

2 — Бюрократия. Также все чаще звучат мнения о том, что гибкие методологии приводят к микроменеджменту. Да, планирование, ретроспективы, стендапы — все это неотъемлемые составляющие каждого спринта, которые призваны помочь команде координировать усилия. К сожалению, как и в случае со многими другими разумными инициативами, их можно довести до абсурда — особенно, если команда обрастает менеджерами, с излишним рвением следующими букве фреймворка. В итоге программисты вместо реализации новых фич занимаются бюрократией: ресурсы уходят на отчёты и обсуждения.

3 — Проблемы междисциплинарности и потеря фокуса. Scrum-гайд отмечает, что в спринтах участвует команда, состоящая из скрам-мастера (одна штука), владельца продукта (одна штука) и разработчиков. Иных ролей в «каноничном» Scrum нет. На практике компании пытаются дооснастить команду не только менеджерами, но и другими специалистами (аналитиками, тестировщиками, юзабилистами), которые, с одной стороны, тоже должны принимать участие в процессе разработки, а с другой — с трудом втискиваются в прокрустово ложе фреймворка.

4 — Субъективная оценка производительности. Один из краеугольных камней, который появляется в каждом первом материале с критикой Scrum — сложности в оценке того, какой объем работы команда может реализовать за спринт. Вне зависимости от того, происходит оценка в человекочасах или стори пойнтах, точно спланировать объем работы, который не будет ни чрезмерным, ни недостаточным, крайне затруднительно.

И российские, и зарубежные специалисты при этом сходятся в одном: во-первых, оценить среднюю скорость/мощность/производительность команды (сколько стори поинтов команда может выполнить за спринт) можно только постфактум, по результатам двух или более спринтов, но никак не за «один пристрелочный подход». А во-вторых, даже эти оценки будут очень приблизительными, потому что команда не существует в вакууме: сотрудники уходят в отпуск и на больничный, у них рождаются дети, они увольняются, они, в конце концов, могут столкнуться с выгоранием или разочарованием в работе — все это влияет и на состав команды, и на ее скорость. А излишне оптимистичные оценки — это новый источник стресса, и привет, причина для недовольства номер 1 (кранч и гонка за показателями).

👉 @seniorFront

Как писать документацию, которую полюбят: 15 must-read книг (и не только)

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

👉 @seniorFront

page flip

Создано и стилизовано на HTML и CSS. При нажатии изменяются CSS классы через JS.

👉 @seniorFront

Fifteen Puzzle Game

В этом видео создается игра пятнашки на JS.

👉 @seniorFront

Когда только ты знаешь, как работает легаси-код

👉 @seniorFront

I Love You

Анимация реализована с использованием библиотеки mo.js

👉 @seniorFront

Dynamic Image Colorizing

Реализовано без использования JS. Вся сцена - это стилизованный input type="color".

👉 @seniorFront