🌐 Public

Frontend Fun

By Samuel Beek for Yung Tech Money Gang

Introduction

Easy good looking things. Go make the web a better place.

Samuel Beek — I design and develop digital products.

2 Components · Ratchet

Title bars are full width and docked to the top of the viewport. Buttons in a title bar are left or right aligned and should be used for actions. Use

Added by Samuel Beek: “Feedback done right.

4 Feedbag.io — A lightweight design collaboration tool

Thanks for using Feedbag.io! Feedbag.io helps you collect feedback in a visual and user-friendly manner. How do I start?Start by simply pressing the browse button or dragging files on to the homepage. Which files does Feedbag.io support?We currently support png, jpeg, gif, pdf, psd, ai and maybe some we haven't tested. At this moment we process Photoshop and Illustrator files

Added by Samuel Beek: “It will take you a while to go trough all of this, but it's some really good quality stuff!

6 Design lessons for everyone, curated by top designers

Josh Long I'm a self-taught Designer & Writer. I spent 12 years as a business designer but now spend my days doing what I love best: coding, writing and designing. I'm currently the Editor at Treehouse, Co-Founder of Execute Ventures, Owner of Jenius Factory, and Author of Execute.

Added by Samuel Beek: “A minimal image gallery with great touch gestures and some niihiiice extras.

7 JavaScript Image Gallery

JavaScript gallery, no dependencies. Touch gesturesAll basic gestures are supported: flick to the next or previous image, spread to zoom in, drag to pan, pinch to zoom out or close, tap to toggle the controls, double-tap to zoom.* *You can assign your own actions for tap and double-tap gestures. Browser history APIPhotoSwipe manipulates the browser's history so that the user

12 svg animation

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a

13 PACE — Automatic page load progress bars

Pace is a Javascript and CSS library to automatically add beautiful progress and activity indicators for page loads and ajax navigation. It is free and open source and was developed by HubSpot developers Adam Schwartz (@adamfschwartz) and Zack Bloom (@zackbloom).

17 jQuery Animated Typing with Typed.js

typed-cursor{ opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } ...

Added by Samuel Beek: “Boring but important lesson!

18 It Is 2015. Update Your Footer.

Change your static timestamp to an automatically updating copyright year or other dynamic timestamp. Just copy a code snippet from below or read more. What dynamic timestamp? " JavaScript SnippetsThis is pure JavaScript, meaning it will refresh the year browser-side, depending on the user's time settings. Just copy the below snippet and paste it where you want your dynamic text

19 ☆ sweep.js ☆

sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces. Ordinary CSS transitions and existing frameworks convert HSL colors to RGB before transitioning. sweep.js addresses this by letting you transition through the color spectrum.

27 Build Realtime Apps

A powerful API to store and sync data in realtime. Firebase has full-featured libraries for all major web and mobile platforms and bindings for the most popular frameworks. Firebase-powered apps work offline. Data is synchronized instantly when your app regains connectivity. Firebase has full-featured libraries for all major web and mobile platforms and bindings for the most popular frameworks. Firebase-powered

Added by Samuel Beek: “Paper JS is plain sickness.

37 Paper.js — Features

Standing on the shoulders of Scriptographer and making use of HTML5 standards, Paper.js is a comprehensive open source vector graphics scripting framework. Paper.js provides a Document Object Model (also called a Scene Graph) that is very easy to work with. Create a project and populate it with layers, groups, paths, rasters etc. Groups and layers can contain other items and

38 minimal wireframing tool

Click and drag to drawCreating elements of your wireframe couldn't be easier. All you have to do is draw a rectangle on the canvas and select the stencil type that will be inserted there. You can do that by dragging your mouse across canvas and selecting an option from a pop-up menu. If you need to edit anything just double-click

Added by Samuel Beek: “great clock animation

40 CSS Animation

It's about time. In this article we'll take on the challenge of creating and animating a clock, using simple CSS animations as well as JavaScript to trigger them. This is the clock we'll create using HTML, CSS, an SVG background and a little JavaScript. We'll use CSS animations or transitions for any movement, and rely on JavaScript to set the

Pavlo Onyshchenko

Freshman

  • 2 Playlists
  • 0 Followers

Mustafa El-Helbawy

Front-End Developer

  • 0 Playlists
  • 0 Followers

ajkdasd

Freshman

  • 0 Playlists
  • 0 Followers

Ahmad Seder

Freshman

  • 0 Playlists
  • 0 Followers

Martijn Schouten

Freshman

  • 0 Playlists
  • 0 Followers

Beanez

Freshman

  • 0 Playlists
  • 0 Followers

akzfowl

Freshman

  • 0 Playlists
  • 0 Followers

abdallah alshaer

big ambition and crazy dream

  • 0 Playlists
  • 0 Followers

Alexis Lawson

Freshman

  • 0 Playlists
  • 0 Followers

Mudit saxena

Freshman

  • 0 Playlists
  • 0 Followers

Abu Hauri Asy-Syifa Falisha

Freshman

  • 0 Playlists
  • 0 Followers

Alex Brown

Freshman

  • 0 Playlists
  • 0 Followers

Haroon Ahmed

Freshman

  • 0 Playlists
  • 0 Followers

Matt Booth

I'm just a wannabe somebody

  • 0 Playlists
  • 0 Followers

Tomjebert

Freshman

  • 0 Playlists
  • 0 Followers

gaafar

Freshman

  • 0 Playlists
  • 0 Followers

ShaneVerploegh

Freshman

  • 0 Playlists
  • 0 Followers

Tr0ttr

Freshman

  • 0 Playlists
  • 0 Followers

kenhagist

Freshman

  • 0 Playlists
  • 0 Followers

nevermike

Freshman

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?