Świeże zasoby dla projektantów stron internetowych i programistów (sierpień 2016 r.)
W tym artykule przedstawiamy struktury ramek i narzędzia, które są nastawiony na tworzenie stron internetowych. Co ciekawe, znalazłem kilka z tych narzędzi i struktur pochodzących od gigantycznych korporacji, takich jak Microsoft i Alibaba.
To dobry znak, ponieważ coraz więcej firm wnosi swój wkład w open-source i pomaga w kształtowaniu lepszego Internetu. Rzućmy okiem na to, co jest na kompilacji w tym miesiącu.
Kliknij, aby uzyskać więcej zasobówKliknij, aby uzyskać więcej zasobów
Znajdź całą naszą kolekcję zalecanych zasobów oraz najlepsze dostępne narzędzia do projektowania i tworzenia stron internetowych.
CuteStrap
Struktura interfejsu użytkownika zbudowana na Sassie. Zawiera wszystkie najpopularniejsze interfejsy internetowe, takie jak formularze, nawigacje i przyciski, które w wielu przypadkach powinny być wystarczające. Jeśli znajdziesz popularne struktury takie jak Bootstrap i Foundation przytłaczające, Cutestrap może być świetną alternatywą dla Ciebie.

Test HTML5
Test HTML5 to narzędzie online, które przetestuje, jak daleko przeglądarka obsługuje najnowsze specyfikacje HTML5. Jest to przydatne narzędzie dla osób zaangażowanych w debugowanie i testowanie nowoczesnych aplikacji internetowych.

Kalorie przeglądarki
Kalorie przeglądarki to rozszerzenie Chrome, które mierzy wagę strony. Skanuje załadowane pliki i ich wkład w całkowitą wagę strony. Świetne małe narzędzie, które pomoże Ci zoptymalizować wydajność witryny.

Weex
Weex to framework Alibaba do budowania aplikacji mobilnych za pomocą HTML, CSS i JavaScript. Zawiera moduły, komponenty interfejsu użytkownika, własne narzędzia DevTools i CLI, które zaprojektowano z myślą o środowisku mobilnym i przyspieszają rozwój.

Microsoft Web Framework (MWF)
Struktura firmy Microsoft, komponenty interfejsu użytkownika w MWF jest zbudowany w oparciu o język Microsoft Modern design: płaski, czysty i minimalistyczny. Ramy te, oprócz komponentów interfejsu użytkownika, dają również wskazówki dotyczące korzystania z kolorów, typografii i animacji. Myślę, że Material Design Lite w końcu spotkał się z równym rywalem.

Istotny
Istotny to framework z bardzo przyjemnym minimalnym interfejsem. Jest lekki, nie ma JavaScript i natywnie Rogue - zapalniczki syntax opartej na Rubim.

Fontea
Fontea to bezpłatne rozszerzenie Photoshop do łatwego zarządzania i stosowania setek czcionek Google. Możesz przeszukiwać czcionkę z poziomu Photoshopa, przeglądać i stosować czcionkę bezpośrednio w projekcie - usprawniając przepływ pracy.

Mżawka
Jest to narzędzie, które umożliwia budowanie wzorców interfejsu użytkownika lub przewodnika po stylach na swojej stronie. Będzie generować takie rzeczy, jak kolory, podstawowe style lub układ komponentów, a także fragment kodu. Generator stylu przewodnika Mżawka pozwoli ci zachować spójność ze stylami swojej witryny.

InterCooler
InterCoolerJS to biblioteka JavaScript, która sprawia, że stosowanie AJAX na Twojej stronie jest tak proste, jak dodawanie atrybutów HTML. Zawiera obszerny przewodnik i wiele przykładów, które pomogą Ci rozpocząć korzystanie z narzędzia.

Picla
Picla to wtyczka jQuery do wyświetlania etykiet obrazów pobranych z obrazu alt
atrybut. Zapewnia kilka opcji umożliwiających dodanie niestandardowej stylizacji i ruchu do etykiety. Picla można zainstalować jako zależność witryny od Bower.

IziModal
Oto wtyczka jQuery do pokazania modalny wyskakujące okienka. IziModal ma wiele opcji personalizacji. Możesz na przykład dostosować animację, treść tekstu, kolory. Jest lekki, czuły i gotowy do siatkówki.

MegaBoilerplate
MegaBoilerplate to generator, który szybko skonfiguruje stos rozwoju. Przejdź do witryny i wybierz narzędzia i biblioteki (Node.js, HTML5, Vanilla JavaScript i Electron), których będziesz używać jako bazy witryny. Skompiluje i skonfiguruje wszystkie potrzebne rzeczy w spakowanym pakiecie, gotowe do pobrania.

Wyjec
Biblioteka JavaScript do wyświetlania nowoczesnego odtwarzacza audio za pomocą interfejsu API Web Audio, Wyjec działa w przeglądarkach tak starych jak IE9 i obsługuje wiele kodeków audio, takich jak MP3, WEBM, WAV. Wiele funkcji, modułowych i działa bez zewnętrznej biblioteki.

SuperEmbed
SuperEmbed to mała biblioteka JavaScript, która sprawia, że obiekty osadzone reagują, zachowując oryginalny stosunek. Obsługuje szeroką gamę źródeł, w tym Youtube, Flickr, Vine, VideoPress i DailyMotion. Zobacz prezentację.

CleaveJS
Rozszczepiać to biblioteka JavaScript, która automatycznie formatuje wartości na wejściu. Może na przykład dodać separator tysiąca na wejściu waluty, dodać miejsce na wejściu numeru karty kredytowej lub dodać /
na wejściu daty. Korzystaj z tej biblioteki, aby lepiej obsługiwać użytkowników.

Flipping Typical
FlippingTypical pozwala wyświetlić wszystkie czcionki zainstalowane w systemie. Uważam, że ta aplikacja jest wygodniejsza niż użycie FontBook aplikacja w systemie MacOS. Wpisuję losowy tekst i widzę, która z czcionek w moim systemie wygląda najlepiej.

LightTable
Nowe IDE, które moim zdaniem jest warte poznania. Zaczęło się od projektu KickStarter, wspieranego przez Matta Mullenwega (założyciela WordPressa), i wreszcie zostało otwarte. Możesz obejrzeć ten film, aby dowiedzieć się, jak fajne jest to IDE.

Kompresor
Kompresor to aplikacja internetowa, która kompresuje pliki graficzne do najmniejszego rozmiaru bez utraty jakości wizualnej. Obsługuje również JPG, GIF, PNG i SVG. Ta aplikacja jest bezpłatna.

Microsoft Site Scan
Jest to przydatne narzędzie firmy Microsoft do analizowania witryny pod kątem problemów, takich jak zgodność przeglądarki i dostępność. Narzędzie wyświetli raport informujący o tym, czy coś jest nie tak w Twojej witrynie i jak możesz rozwiązać ten problem. Spróbuj!

Wyłącz blogi
Ta wtyczka, jak sama nazwa wskazuje, usunie funkcje blogowania, takie jak Posty, Komentarze i Kanały. Jest to odpowiednia wtyczka dla Ciebie, jeśli nie potrzebujesz funkcji blogowania w WordPressie.
