15 жахливих порад веброзробникам
Упевнені, ви чули чимало хороших настанов про те, як підвищити якість своєї роботи. Але... як щодо поганих порад? Переклали для вас статтю про 15 жахливих порад веброзробникам. Тож, якщо раптом ви давно мріяли трохи пожартувати над колегами, записуйте варіанти!
1. Шари абстракції. Використовуйте якомога більше рівнів абстракції, поки:
- код важко зрозуміти та налагодити;
- зміни до коду вносити важко;
- код повільний або неефективний;
- код не багаторазовий.
2. Вимагайте змін у запитах на вилучення. Ви завжди повинні блокувати пул-реквести під час першого перегляду, щоб утвердити домінування.
Ось кілька ідей, аби замінити реквести:
- зробіть ім’я змінної довшим;
- зробіть імʼя змінної коротшим;
- перейменуйте імʼя змінної;
- зробіть код ще більш DRY.
3. Ні комітам! Аби написати хороші коміти, потрібний ваш дорогоцінний час. Не витрачайте його на це! Замість цього напишіть, наприклад: [JIRA-1234] build: replace vue-cli with vite
Ви можете використати цю команду, аби запушити ваш код з пустим комітом:git commit --allow-empty-message -m "" && git push --force
4. Частіше використовуйте магічні числа, аби всі знали, що ви — знавець своєї справи:
window.scrollTo({ top: 89, left: 12, behavior: "smooth", });
5. Змішуйте return-інструкцію. Кожен ваш крок — непередбачуваність! Ніхто не має дізнатися, що ви робитимете далі.
function shouldPayTax(income) { if(income.amount < 20_000) { return false } if(income.amount > 20_000 && income.country == 'USA') { return true } if(income.country == 'Panama') { return false } if(this.totalWorkingHoursPerWeek > 60) { return true } if(income.amount > 20_000 && income.isCelebrity == true) { return false } if(income.amount > 20_000) { return true } }
6. TypeScript. Якщо хтось мав нахабство додати до проєкту TypeScript, ви можете уникнути type-перевірку: використовуйте any
повсюди.
function add(a:any, b:any):any { return a + b }
7. Використовуйте два знаки рівності ==
замість трьох ===
. Памʼятайте, ваше головне завдання: зекономити такі цінні байти у bundle-продакшені.
8. Код коментарів. Окрім написання коду, який важко зрозуміти, залишати оманливі коментарі, які не мають сенсу, — це чудовий спосіб заплутати інших. Кілька правил, яких слід дотримуватися:
- коментарі повинні дублювати код;
- коментарі виправдовують незрозумілий код;
- якщо ви можете написати зрозумілий коментар, не робіть цього;
- коментарі повинні створювати плутанину, а не розсіювати її;
- ніколи не додавайте посилання на першоджерело скопійованого коду;
- ніколи не додавайте посилання на зовнішні джерела, особливо там, де вони можуть бути корисними;
- ніколи не додавайте коментарі (або тести) під час виправлення помилок;
- ніколи не використовуйте коментарі для позначення незавершених реалізацій.
9. Використовуйте пропозиції для синхронного стейту. Передача стейту за допомогою пропозицій — чудовий спосіб об’єднати ієрархію компонентів і зробити рефакторинг простішим.
10. Використовуйте керування стейтами для стану компонентів. З іншого боку, стан компонента слід перемістити до глобального сховища, щоб кожен міг його змінювати.
11. Довгі файли компонентів. Використовуйте великі та монолітні компоненти, аби мати кращий вигляд обовʼязків компонентів та можливість повторного використання змінних у різних функціях.
12.Ніяких лінтерів. Лінтер може аналізувати ваш код і виявляти потенційні помилки, невідповідності та відхилення від встановлених стандартів кодування, а це те, чого ми точно не хочемо.
Різниця між двома фрагментами очевидна:
const props=defineProps({ elements:Array, counter:{ type:Number, default:0, }, }); const{data,method}=useComposable(); const isEmpty=computed(()=>{returnprops.counter===0;}); watch(props.counter,()=>{console.log("Countervaluechanged");}); const emit=defineEmits(["event-name"]); function emitEvent(){ emit("event-name"); } function getParam(param){ return param; }
const props = defineProps({ elements: Array, counter: { type: Number, default: 0, }, }); const { data, method } = useComposable(); const isEmpty = computed(() => { return props.counter === 0; }); watch(props.counter, () => { console.log("Counter value changed"); }); const emit = defineEmits(["event-name"]); function emitEvent() { emit("event-name"); } function getParam(param) { return param; }
Порада для професіоналів: єдине прийнятне використання правила лінкування — це коли файл довший за задану кількість рядків. 1000 — дуже симпатичне початкове число.
13. Використовуйте HTML у перекладах. Використання жорстко закодованих рядків — це завжди гарна ідея. Але іноді використання перекладів, які містять html-елементи та класи, може бути ще кращим:translation.key.name = Hello <span class="red">World!</span>
14.Пишіть тести. Не писати тести — це хороший варіант, але поганий набір може принести ще більше розчарувань. Як правило, тест повинен бути:
- коротким: займати достатньо часу, щоб зварити каву;
- ненадійним: давати результати, що змінюються;
- дуже впливовим, себто впливати на інші тести;
- допитливим: знати якомога більше про інші частини програми.
15. Вчіться довіряти. І нарешті: безпечне програмування — це для слабких. Хто взагалі думає заподіяти вам шкоду?
А що порадите ви?
26 коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів