Główna » Projektowanie stron » Świeże zasoby dla projektantów stron internetowych i programistów (czerwiec 2015)

    Świeże zasoby dla projektantów stron internetowych i programistów (czerwiec 2015)

    Czy możesz uwierzyć, że ta seria działa od prawie 3 lat? W tym krótkim czasie przedstawiliśmy co najmniej 30 list najświeższych zasobów dla projektantów stron internetowych i programistów. I zamierzamy kontynuować to z nową kompilacją na czerwiec.

    W tej kompilacji zajmiemy się kilkoma bibliotekami JavaScript do wyświetlania suwaków, płynniejszym przewijaniem tabel danych, efektem chłodnej windy dla przycisku przewijania do góry i nie tylko.

    Sprawdźmy je.

    Średni styl Potwierdź

    Medium zostało chwalone za swój projekt; układ i interfejs użytkownika wydają się być dokładnie przemyślane. Ponadto inspiruje twórców stron internetowych do tworzenia bibliotek JavaScript lub CSS w celu replikacji interfejsu użytkownika. Średni styl Potwierdź to jedna biblioteka JavaScript, która przypomina wyskakujące okno dialogowe w Średnim.

    Pingwin

    Penguin to nowy front-end framework, którego możesz użyć jako podstawy swoich stron internetowych. Dzięki narzędziom takim jak Grunt i Sass możesz łatwo dodawać lub usuwać biblioteki lub CSS, których nie potrzebujesz z ram, co czyni go tak lekkim, jak to możliwe. To także dobra alternatywa dla Bootstrap i Foundation.

    Elevator.js

    Czy widziałeś ten przycisk w witrynie, która pozwala przesuwać się w górę strony? Większość przycisków przenosi Cię do góry, ale dzięki Elevator.js uzyskasz efekt przyspieszenia podobny do windy, muzyki i “Ding!” zabrzmi po dotarciu na najwyższe piętro. Bardzo miłe!

    X-Instagram

    X-Instagram to niestandardowy element Polymer, który ściąga i pokazuje obrazy z Instagram po tagu. Ten element znacznie ułatwia cały proces. Po prostu dodajemy element tak jak zwykły element HTML i określamy słowo kluczowe tag jako atrybuty elementu.

      

    I niech zacznie się magia!

    CamanJS

    CamanJS to świetna biblioteka JavaScript do manipulacji obrazami. Jest wyposażony w zestaw funkcji, który zwykle można znaleźć w edytorze obrazów. Możesz zmienić rozmycie obrazu, czarno-białe, a nawet zwiększyć kontrast.

    ClusterizeJS

    Clusterize.js to biblioteka JavaScript, która zwiększy wydajność podczas pracy z wieloma danymi w tabelach. Gdy przewijasz tabelę z, powiedzmy, 5000 na liście, zwykle przeżycie staje się opóźnione i gwałtowne. Te biblioteki JavaScript zajmą się tym problemem, dzięki czemu działanie przewijania będzie płynne.

    Usiądź test

    Usiądź test to zbiór pytań do oceny umiejętności i wiedzy na temat CSS3, HTML5 i JavaScript. Każdy test ma kilka pytań i ograniczony czas na wypełnienie wszystkich tych pytań. To dobre źródło, aby dowiedzieć się, jak naprawdę jesteśmy z tymi językami.

    Strzałki HTML

    Jest to zbiór specjalnych rodzimych symboli Unicode, które możesz osadzić w HTML i CSS. Znaki te obejmują strzałki, walutę i interpunkcję. Przekonasz się, że czasami nie potrzebujesz ikony czcionki do wyświetlenia tych znaków.

    Flickity

    Flickity to biblioteka JavaScript do wyświetlania karuzeli, galerii lub suwaków na Twojej stronie. Jest zoptymalizowany pod kątem ekranu dotykowego; możesz bez wysiłku przesuwać karuzele palcem lub gładzikiem, jeśli jesteś na laptopie. Jest również wyposażony w szereg opcji umożliwiających pełne dostosowanie w dowolny sposób.

    Typeslab

    Typeslab to poręczne narzędzie do tworzenia plakatu typu Slab. Wystarczy napisać treść i wybrać czcionkę, Typeslab natychmiast wygeneruje plakat. Następnie możesz go pobrać lub opublikować w Imgur.

    MatchMedia

    Matchmedia to biblioteka, która replikuje zapytania mediów CSS. Biblioteka nie jest tak naprawdę świeża, ale jest naprawdę użyteczną biblioteką, którą postanowiłem umieścić na liście. Jeśli potrzebujesz wykonać skrypty na podstawie rozmiaru rzutni użytkownika lub typu nośnika, jest to biblioteka, którą chcesz.

    Poniżej przedstawiono przykład uruchamiania skryptu w rozmiarze rzutni 320x i mniejszym:

     if (matchMedia (tylko ekran i (max-width: 320px) ”). matches)  

    Sass Burger

    Sass Burger jest wyposażony w Mixin, który pozwala stworzyć “Hamburger” ikona i zamień ją w krzyżyk z mniejszym kłopotem.

    Marks

    Marx jest zbiorem reguł stylu CSS, dzięki którym style elementów są bardziej spójne. Jest konfigurowalny (z Sass), lekki i działa od razu po wyjęciu z pudełka. Dobra alternatywa dla popularnych narzędzi resetowania CSS, takich jak Normalize.css.

    CSS.js

    CSS.js służy do analizowania plików CSS dla deklaracji stylu. Biblioteka została początkowo wykorzystana przez zespół w Jotform do zbudowania doświadczenia WYSIWYG do edycji formularzy za pomocą CSS. Teraz mają otwarte źródła, z których wszyscy możemy korzystać. Warto oszczędzać, na wypadek gdybyś potrzebował później.