15 przydatnych narzędzi do sprawnego tworzenia stron internetowych

Nie należymy do stereotypów, ale prawdopodobnie minęło trochę czasu, odkąd typowy programista (stereofoniczny) zgolił swoją cholerną brodę, zmienił ubranie, wziął kąpiel lub zgolił tę cholerną brodę…

Naprawdę nie możesz ich winić. Minęło trochę czasu, odkąd wszyscy programiści odetchnęli. Rok 2015 był dobrym rokiem z ogromnymi postępami w technologii tworzenia stron internetowych, ale programista nie może już po prostu uwolnić swojego laptopa/MAC (jak szef) i kodu platformy w wolnym czasie.

Teraz musisz zająć się responsywnym projektem z obsługą wielu platform, HTML5, PHP7, które zostaną wydane nieco później w tym roku, przeglądarkami takimi jak IE, które nie przestaną wszystkiego psuć… Matrycowe poziomy samego Internetu rzeczy.

To wszystko, co my, programiści, możemy zrobić, aby nadążyć. Ale robimy to, głównie dzięki tym sprytnym narzędziom.

Spójrz.

1. Komodo Edytuj

Wszystko rodzi się z kodu dla programisty, więc naturalne jest rozpoczęcie od najlepszego narzędzia do edycji, jakie możesz znaleźć. Komodo Edit jest dość koszerny za to wszystko i nie tylko. Jest to fajny, wieloplatformowy, wielojęzyczny edytor tekstu, w którym możesz pisać i edytować swój kod. Och, i to nic nie kosztuje.

Narzędzie działa na systemach Windows, Mac, Linux/UNIX, więc nie ma problemu. Podoba nam się również za funkcję automatycznego uzupełniania kodu dla języków takich jak HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (dla około 5 osób na świecie) itp. To jeden sprytny edytor tekstu.

Dodatkowe punkty za dodatkową wygodę funkcji Project Manager do organizowania i śledzenia plików.

2. Kreator CSS 3.0

Bądźmy szczerzy, pomimo wszystkiego, co kochasz w CSS3, nie możesz się powstrzymać, ale trochę go nienawidzisz, jeśli chodzi o pisanie składni takich rzeczy, jak zaokrąglone przeklęte krawędzie. Stracenie snu to taki trywialny szczegół, ale i tak to robisz. Nie możesz zapamiętać więcej niż 100 nowych właściwości i odpowiadających im przedrostków. Podziękuj więc Panu za narzędzie takie jak CSS 3.0 Maker.

To zgrabne, małe narzędzie online pozwoli Ci skopiować i wkleić skomplikowany kod do arkusza stylów. Generuje kod dla szczegółów stylu, takich jak promienie pola, gradienty, cienie tekstu i pola, transformacje, przejścia i rotacje do wyboru. Pokaże również, które przeglądarki komputerowe i mobilne obsługują te właściwości stylu. Mały obszar podglądu pokaże efekt, kod można skopiować z pola widoku lub pobrać w pliku HTML.

Dla tych z nas, którzy nie mogą poświęcić zbyt wiele czasu na pozornie banalne detale stylu, to narzędzie jest ratunkiem dla życia.

3. –bez prefiksów

„Uwolnij się od piekła prefiksów CSS!” – Strona wprowadzająca bez prefiksów.

Jest to bezsensowne narzędzie, przyniesione, by uwolnić nas od „prefiksowego piekła” przez anioła o imieniu Lea Verou z Github. Doda prefiks dostawcy (w miejscu, którego nie możesz zobaczyć) do arkuszy stylów w elementach <link> lub <style> . Ponadto: Nie będziesz musiał martwić się o nowe elementy <link> lub <style> , prefiksy .css() jQuery lub jakiekolwiek zmiany, które zrobisz, ponieważ obejmie to wszystko.

Czego nie lubić?

4. Czcionka Blokka

„Lorem Ipsum” był tekstem zastępczym od zbyt dawna. Na szczęście mamy teraz Blokk: czcionkę, która powstrzyma „ból” niezrozumiałej łaciny.

Blokk daje blokowy „tekst”, który ma być używany jako symbol zastępczy podczas tworzenia makiet i makiet. Nie trzeba też dodawać, że nie zmyli to podczas prezentacji mniej, hm, klientów korzystających z Internetu.

5. Fontello

Zanim czcionki ikon stały się rzeczą, programiści musieli skorzystać z pomocy projektantów w tworzeniu skalowalnych ikon. Czas potrzebny na ich opracowanie (który, nawiasem mówiąc, obejmuje tworzenie, wydobywanie, wdrażanie i dostosowywanie) graniczył z „absolutnie absurdalnym”. Ale wtedy ktoś zamienił ikony w czcionki i wszyscy żyli szczęśliwie… w dającej się przewidzieć przyszłości.

Fontello to świetny generator czcionek ikon. Pozwoli Ci to wybrać spośród tysięcy ikon, dostosować ich mapowanie lub edytować ich nazwy, a także skompilować je w jednym pliku czcionki. To niesamowite i bezpłatne.

Nie możemy wystarczająco podziękować Witalijowi Puzrinowi.

6. Tester tekstu

Włącz JavaScript w przeglądarce i zacznij testować, jak wybrany krój pisma będzie wyglądał w rzeczywistej witrynie.

Typetester jest nieskomplikowany. Umożliwia wprowadzanie i porównywanie różnych czcionek oraz testowanie ich wyglądu. Możesz także bawić się rozmiarem, śledzeniem, kolorem itp., aż uzyskasz to, czego chcesz. Możesz porównać do 36 różnych krojów na raz. Wyobraź sobie, ile czasu możesz dzięki temu zaoszczędzić.

To całkiem fajne.

7. Brudne znaczniki

Kodowanie może być czasami nieco męczące, ale czyszczenie kodu istnieje na poziomie: Całkowicie nuda. Jest to jednak konieczne, jeśli chcesz uniknąć błędów i szybciej się ładować.

Brudny znacznik pomaga zaoszczędzić czas, który w przeciwnym razie mógłbyś spędzić na ciekawszych zajęciach (czy ktoś może kanapkę z bekonem?). Ten ma połączone możliwości innych narzędzi do czyszczenia pojedynczej składni. Mówimy o HTML Tidy, CSS Tidy, JS Beautify i Ace Editor. To jeden kompleksowy środek czyszczący.

Jest to aplikacja internetowa do czyszczenia i formatowania kodu HTML, CSS i JavaScript. Nie możemy prosić o więcej.

8. Stado robaków

Dzięki temu potężnemu narzędziu możesz po prostu zostać strażnikiem zabijającym robaki.

BugHerd podąża za odwiecznym powiedzeniem „Krótko i prosto, głupio”. Może przechwytywać opinie klientów, samodzielnie rozwiązywać drobne problemy, śledzić błędy (aby je eksterminować). Będzie także odgrywać rolę Sekretarza i zarządzać Twoimi projektami.

Bardzo łatwy w obsłudze interfejs użytkownika typu „wskaż i kliknij” w Twojej witrynie umożliwia użytkownikom zgłaszanie problemów. BugHerd zamienia je w raporty zawierające wszystkie potrzebne informacje (takie jak wersja przeglądarki użytkownika). Jest łatwy w konfiguracji, przyjemny w użyciu i ma takie funkcje, jak automatyczne zrzuty ekranu (rozszerzenie przeglądarki), bezpośrednie łącza, załączniki plików, pełne dane selektora i dyskusje.

Przy standardowej subskrypcji 29 USD za miesiąc to haczyk.

9. Mucha ekranowa

Responsywne projektowanie stron internetowych to coś więcej niż nowa moda, ponieważ jest tu na zawsze. Ale na razie w najlepszym razie okaże się, że układy płynów są trudne. Będziesz także wpadał w gwałtowną wściekłość, próbując przetestować swój układ na różnych rozmiarach ekranu.

Na szczęście Screenfly to fajna, mała aplikacja internetowa, która przetestuje Twoje zapytania @media. Wstawiasz adres URL, a pokaże on, jak Twoje zapytania obsługują wymiary urządzenia, które klikasz w górnym panelu.

Nie uwzględnia różnicy w renderowaniu między przeglądarkami, ale możesz do tego użyć ujęć przeglądarki. W przeciwnym razie jest to prosty, pięknie złożony sposób, aby zobaczyć, jak Twoja witryna wygląda w różnych rozdzielczościach.

10. Fundacja

Skoro mówimy o RWD, równie dobrze możemy zacząć mówić o frameworkach, aby go rozwijać.

W Internecie szaleje debata na temat tego, który framework front-endowy jest lepszy: Bootstrap czy Foundation? Możesz użyć jednego lub drugiego. Ale Foundation jest nieco bardziej na pierwszym planie, jeśli chodzi o systemy siatek, proporcjonalne jednostki do projektowania (chociaż Bootstrap 4.0 Alpha przeniósł się na jednostki em i rem), obsługę od prawej do lewej, tabele cen, wycieczki i nawigację poza kanwą .

To oczywiste, że wolimy podkład. Działa z SASS i CSS, jest pełen całej gamy funkcji i ogólnie jest wygodniejszy i bardziej elastyczny.

Zgadzamy się z Zurbem co do tego: jest „szalony szybko”.

11. Adobe Edge

Po dekadzie oprogramowania, które stawia projektowanie przed kodem, Adobe w końcu daje programistom Edge.

Ta naprawdę niesamowita gama narzędzi i usług została stworzona z myślą o nowych trendach w kodowaniu front-end. Mają dla nas niezłą ucztę. Edge Animate, aby pomóc programistom w tworzeniu animacji, jednocześnie usuwając wszelkie ślady Flasha. Przepraszamy Adobe, Flash był świetny. Ale program Animate używa standardowego kodu HTML i JavaScript, a wiesz, uniwersalny rozmiar…

Istnieje Edge Code do edycji CSS z poziomu dokumentu HTML. Inspect konsoliduje testy przeglądarek i testy zgodności urządzeń w celu responsywnego projektowania i synchronizuje je wszystkie w celu superszybkiej aktualizacji/dostosowania. Niezwykle popularny Typekit jest teraz częścią rodziny Edge. Reflow jeszcze nie został wydany, ale prawdopodobnie zdmuchnie innych twórców frontendowych siatek CSS z wody. A jest jeszcze więcej.

Wiemy. Musieliśmy też oderwać szczęki od podłogi.

12. Włóczęga

Vagrant to znacznie więcej niż wirtualne oprogramowanie programistyczne.

To piękno pozwala tworzyć przenośne, łatwo odtwarzalne środowiska pracy. Konsoliduje oprogramowanie do wirtualizacji, serwer podstawowy i narzędzia konfiguracyjne w jednym potężnym pakiecie. Zasadniczo nie musisz już mieć VirtualBox + Ubuntu + Chef. Vagrant wykona pracę wszystkich trzech i zajmie mniej miejsca podczas jej wykonywania. Zaawansowani użytkownicy powiedzą Ci również, w jaki sposób umożliwia łatwe konfigurowanie sieci z wieloma maszynami wirtualnymi.

Jest napisany w Ruby, ale będzie działać w PHP, Java, JavaScript, Python i C#. Możesz pracować z Vagrantem na Windows, Mac OSX, Linux i FreeBSD.

Jest superszybki, ponieważ nie ma w nim nic z przyjaznego dla U-ja, który wygląda ładnie, ale zajmuje bardzo potrzebną przestrzeń. Świetnie sprawdza się jako środowisko testowe dla programistów.

To tak blisko Świętego Graala, jak tylko możemy.

13. Informacje o PageSpeed

Google PageSpeed ​​Insights robi dokładnie to, co mówi na opakowaniu. Daje wgląd w wydajność front-endu Twojej strony. To będzie otworzyć oczy dla wielu potężnych programistów. Więc zrób sobie chortle-fest i zacznij przyspieszone łysienie od wszystkich włosów, które zostaną wyrwane.

Wszystko, co robi, to pomiar czasu, jaki upłynął między: renderowaniem żądania i części strony widocznej na ekranie oraz żądaniem i renderowaniem całej strony.

Sprawdza aspekty niezależne od sieci, aby obliczyć, jak działa Twoja strona: konfiguracja serwera, struktura HTML, JavaScript, CSS i obrazy.

Jest ostry jak brzytwa i bezlitośnie szybki; więc z pewnością zrani to twoje uczucia i prawdopodobnie sprawi, że będziesz płakać, jeśli uzyskasz niski wynik. Będzie również próbował to nadrobić, dając ci konkretne sugestie, jak poprawić twoje wyniki, jak protekcjonalny rodzic.

I kochamy to.

14. Gita

Większość współczesnych programistów już go zna. W końcu tak wyjaśniasz istnienie społeczności takich jak GitHub.

Git to system kontroli wersji typu open source i zarządzania kodem źródłowym, który śledzi historię projektu w repozytorium. To w zasadzie superszybki, superwydajny PA.

Pozwala swobodnie eksperymentować bez obawy, że wszystko zepsuje na zawsze. Możesz także tworzyć wiele repozytoriów i używać rozgałęzień/scalania do pracy z poszczególnymi funkcjami. Jest to szczególnie przydatne narzędzie do wspólnych działań.

Jest w pełni dystrybuowany, więc nie musisz obawiać się koszmaru bez sieci, gdy jesteś offline (przez projekt lub przypadek). Możesz po prostu dodać aktualizacje do głównego repozytorium, które będzie na Ciebie cierpliwie czekać z powrotem online.

15. Walidacja znaczników W3C

To jest ostatni rytuał przejścia.

Walidacja znaczników W3C jest dość prosta i konieczna. Jak ujmuje to W3C, walidacja może: pomóc w debugowaniu, zabezpieczyć witrynę na przyszłość (przeglądarki są zbudowane na standardach W3C) i pomóc w utrzymaniu.

Uczy również, jak być zgodnym ze standardami, pokazując „błędy” w swoich sposobach.

Walidacja znaczników nie powinna być uważana za represyjną, ponieważ tak naprawdę nie jest. Pomoże Ci nauczyć się pisać lepszy kod…

Jak profesjonalista.

Dolna linia

Oczywiście istnieje więcej narzędzi, wtyczek, dodatków i ogólnie zasobów i społeczności, które sprawiają, że programowanie… nie do końca łatwiejsze, ale mniej uciążliwe. I więcej jest obecnie opracowywanych. Dostępny jest dodatek Firebug do przeglądarki Firefox, który umożliwia monitorowanie i edycję na żywo kodu HTML, CSS i JavaScript. PixelDropr to dodatek do Photoshopa, który pozwoli Ci tworzyć urocze przyciski i ikony dla Twojej witryny przy minimalnym wysiłku.

Każdy profesjonalny programista w końcu ma swój własny „zestaw narzędzi” aplikacji i oprogramowania, na których polega, aby działać szybciej i wydajniej. Niektóre są darmowe, za inne trzeba zapłacić.

Ale w takim razie kto może wycenić wygodę?