Kod

Gdy zestawy narzędzi są lepsze niż ramy

Zacznijmy od obserwacji: kocham moje ramy. Zamiast ponownie całkowicie wymyślać koło lub stylizować przycisk od początku, ciężko jest pokonać wszechstronne rozwiązanie dla Twoich podstawowych potrzeb HTML / CSS / JavaScript.

Problem polega na tym, że to właśnie powiedziałem. Ramy naprawdę nie są rozwiązaniem typu "wszystko w jednym", prawda? Mimo tego, że stworzyliśmy je modułowo i łatwo dostosowujemy, czasami po prostu nie mają tego, czego potrzebujemy.

Niemożliwe jest uwzględnienie każdego możliwego kodu HTML, stylu elementu lub funkcji javascript. Ale to też może być dobra rzecz.

Struktura może mieć wiele rzeczy, których po prostu nie potrzebujemy. Niektóre z moich najbardziej frustrujących prac obejmowały ręczne przeszukiwanie ogromnych plików CSS Bootstrapa, aby zmienić trochę kodu, który sieje spustoszenie w moim projekcie.

Po prostu weź komponent paska nawigacyjnego Bootstrap, na przykład. Jest świetny, działa bezbłędnie i wygląda dobrze. Ale jeśli spróbujesz zmienić sposób, w jaki wygląda na jakikolwiek wielki sposób, musisz zmienić wiele stylów, a znalezienie wszystkich zajmie trochę czasu. Jeśli jest to tylko pozioma lista linków w górnej części strony, może być łatwiej napisać nowy od początku.

Ale hej, bardziej popularne struktury, w szczególności Bootstrap, mają wiele narzędzi dostosowywania, prawda? Tak, i to jest świetna sprawa, ale domyślne opcje nie dają wystarczająco dużo miejsca do pracy.

Mówiąc prosto, jeśli skupiasz się na kreatywności, potężne ramy prawdopodobnie nie są drogą do zrobienia. Pewnie, możesz to zhakować, ale to zajmie dużo czasu.

Jeszcze jeden problem, na który natknąłem się: niezgodności z językiem JavaScript. Jako facet, który nie jest programistą, było to bolesne.

Konkretnie, był ten jeden raz, kiedy próbowałem zintegrować kilka wtyczek jQuery z projektem opartym na fundamencie. Nie jest to samodzielny wyłącznik, ale zajmuje więcej czasu na debugowanie.

Oczywiście, był to jakiś czas w zeszłym roku. Szczerze mówiąc nie wiem, co by się stało, gdybym spróbował tego samego z nowymi wersjami tego samego szkieletu i wtyczek, ale wciąż jest coś do rozważenia.

Podsumowując, są chwile, kiedy ramy po prostu nie są odpowiedzią. To tutaj pojawia się zestaw narzędzi i powinieneś go mieć.

Czym więc jest zestaw narzędzi i czym różni się od struktury?

Zestaw narzędzi, w kontekście tego artykułu, to samodzielnie zebrany i opracowany zestaw narzędzi, fragmentów, wtyczek i zasobów, które umożliwiają szybsze kodowanie projektów. Ludzie często znajdą te zasoby w czasie i przywiązują się do nich. To osobista sprawa i naprawdę musisz zrobić własną.

Podobieństwa

  • Zestawy narzędzi i frameworki składają się w dużej mierze z kodu zaprojektowanego w celu ułatwienia rozpoczęcia pracy.
  • Ich zadaniem jest ułatwić ci życie, ale nie mogą i nie powinni wykonywać całej pracy za ciebie.
  • Oba muszą być utrzymywane i aktualizowane, aby odzwierciedlały najnowsze technologie w grze.

Różnice

  • Zestawy narzędziowe nie zawierają żadnych założeń konstrukcyjnych ani strukturalnych, często są tworzone przez frameworki.
  • Zestawy narzędzi składają się zazwyczaj z rzeczy pochodzących z zupełnie innych źródeł.
  • To nie tylko kod, zestawy narzędzi mogą zawierać oprogramowanie, linki z zakładkami i tak dalej.
  • Zestawy narzędzi zwykle nie mają żadnych "domyślnych plików", dzięki czemu możesz wybrać i wybrać.

Kiedy więc powinienem użyć?

Zaletą zestawu narzędzi w ramach jest jego wszechstronność. Jak już wspomniano, w projektach, w których planujesz przesuwać granice w sposób projektowy, ramy często są po prostu zbyt kłopotliwe.

Ta sama jakość to także upadek ram w projektach o małej i średniej wielkości. Czy budujesz promocyjną stronę docelową? Jednokartkowa strona internetowa? Prosty blog? W takim przypadku framework jest prawdopodobnie niepotrzebny. Lepiej zaczynać od zera, a każdy szczegół projektu należy do ciebie.

Powiedziałbym nawet - moim zdaniem - że większość witryn opartych na treści nie potrzebuje w pełni rozwiniętego środowiska. Wyjątek stanowią masywne witryny, takie jak ars technica na przykład. W przypadku czegoś dużego powinieneś użyć frameworku, ale prawdopodobnie powinieneś go sam opracować od podstaw, aby spełnić dokładne wymagania strony.

Tam, gdzie struktury takie jak Bootstrap i Foundation naprawdę świecą, to tworzenie aplikacji internetowych i stron internetowych opartych na aplikacjach. Właśnie w tych projektach przydają się relatywnie sztywne ograniczenia, zamiast spowalniać.

Jak zrobić własny zestaw narzędzi.

Stworzenie własnego zestawu narzędzi jest kwestią czasu, cierpliwości i doświadczenia. To znaczy, możesz po prostu pójść i poszukać "zasobów do projektowania stron internetowych". Otrzymasz tysiące tysięcy trafień, a za kilka godzin będziesz mógł pobrać więcej fragmentów kodu niż kiedykolwiek mógłbyś użyć.

Ale to nie jest zestaw narzędzi. To jest biblioteka, której nigdy nie dotkniesz, ponieważ jej sortowanie zajęłoby zbyt dużo czasu. Jesteśmy zajęci ludźmi, więc podjąłem bardziej organiczne podejście do tego problemu: gdy napotykam problem, to go Google.

Fragmenty są często zbyt długie, aby je zapamiętać, więc jeśli znajdę się wielokrotnie szukając tego samego, dodaję to do mojego zestawu narzędzi. To samo dotyczy oprogramowania: jeśli jest to coś, o czym wiesz, że będziesz dużo używał, dodaj to.

Nie oznacza to, że nigdy nie należy poświęcać czasu na eksperymentowanie z nowymi "zabawkami" ... powinieneś. Jeśli słyszysz o konkretnym źródle, które może zmienić sposób pracy na lepsze, sprawdź to. Ale pamiętaj, że zestawy narzędzi są lepiej utrzymywane stosunkowo małe. Powinieneś skupić się na utrzymywaniu tylko tego, czego potrzebujesz, aby zaspokoić potrzeby, które regularnie napotykasz.

Mój zestaw narzędzi

Jeszcze raz powiem, że te zestawy narzędzi są czymś, co sam musisz zrobić, aby spełnić własne potrzeby. Mimo to, mam zamiar wymienić rzeczy w moim zestawie narzędzi, aby dać ci lepsze wyobrażenie o tym, czego szukać, gdy tworzysz swój własny.

Wstępny procesor CSS

Preprocesory CSS takie jak MNIEJ i SASS zrób dwie rzeczy:

  1. Rozszerzają podstawową funkcjonalność CSS o zmienne, mixiny, selektory zagnieżdżone itp.
  2. Sprawiają, że kodowanie CSS jest szybsze.

Jeśli jeszcze nie próbowałeś kodowania CSS za pomocą preprocesora, zachęcam cię do zrobienia tego teraz. Teraz. Poczekam.

Zakładki

Dobrze zorganizowana lista zakładek może być bardzo przydatna, gdy potrzebujesz czegoś, czego nie możesz zapisać na lokalnym dysku twardym. Zakładam takie rzeczy jak Generatory CSS3 , sprite generators , twórcy schematów kolorów i inne narzędzia, które pomagają mi szybko wykonywać zadania, które trwają o wiele dłużej, gdy robisz je ręcznie.

Semantic.gs: silnik układu

Systemy gridowe to 2000s. Odkąd responsywny projekt sieci stał się rzeczywistością, systemy gridowe stają się coraz bardziej złożone, aby sprostać potrzebom niezliczonych urządzeń.

A co, jeśli potrzebujesz niestandardowego systemu siatki? Możesz trafić na jeden z wielu internetowych generatorów systemów gridowych, ale są one ograniczone.

Rozwiązanie przychodzi w formie semantic.gs . Teraz, gdy jego własny autor nazywa to układem siatki, ja nazywam to układem, ponieważ nie jest to jedna siatka. Jest to narzędzie oparte na wstępnym przetwarzaniu CSS (można go używać z LESS, SASS i Stylus) i pozwala na bieżąco generować dowolną sieć, o stałej szerokości lub responsywną.

Wszystko, co musisz zrobić, to zmienić niektóre liczby w pliku .less (lub SASS, itp.) I iść.

Emmet - wcześniej znany jako Zen Coding

Mrówka to zbiór wtyczek, które zmieniają skróty w pełne wiersze kodu, zarówno w HTML, jak i CSS.

Zasadniczo okazuje się to: 

div>ul>li*3>a

Zaangażowany w to:

OdWebDesign.Net