Profile

Scrapbook photo 1
Scrapbook photo 2
Scrapbook photo 3
Scrapbook photo 4
Scrapbook photo 5
John Johnson
2,589 followers|60,580 views
AboutPostsPhotosVideos

Stream

John Johnson

Shared publicly  - 
 
 
Front-end UI Toolkit

Titon Toolkit is a collection of very powerful user interface components and utility classes for the responsive, mobile, and modern web.

Each component represents encapsulated HTML, CSS, and JavaScript functionality for role specific page elements.

Toolkit makes use of the latest and greatest technology.

This includes HTML5 for semantics, CSS3 for animations and styles, Sass for CSS pre-processing, Grunt for task and package management, and powerful new browser APIs for the JavaScript layer.

-

Features:

Mobile First
Optimized for mobile and touch devices by designated them as first-class priorities.

Responsive Design
Fluid by design to work seamlessly in all resolutions. No more pixel perfect designs — unless that's your thing.

Semantic Markup
Structured using semantically valid HTML tags to relay information alongside presentation.

Flexible Styles
Provides no visual CSS styles allowing for easier integration and customization. No more tedious style overriding!

Accelerated Animations
Improves animations and transitions with CSS3 and the GPU. Older browsers will fall back to simple display toggling.

Extensible Configuration
Encourages a configuration over convention approach. Customizable options, templates, builds, and more.

Scalable Spacing
Fonts, margins, and padding scaled with em and rem measurements. Eases responsive rendering.

Reusable Code
Easier code re-use through the CSS block-element-modifier (BEM) methodology, and an advanced JavaScript component system.

Progressive Enhancement
Enables shiny new features if a users device supports it. Further increases accessibility and portability.

Graceful Degradation
Increases adaptability of legacy browsers by disabling or removing advanced features and providing bare bones functionality.

Stable Codebase
Tested in a wide array of browsers, operating systems, and devices. Primed and ready for the modern age.

-

Image / Source:
http://titon.io/toolkit

Demo:
http://demo.titon.io

Components:
https://github.com/titon/toolkit

Documentation:
http://titon.io/en/toolkit/1.3.2

GitHub / Download:
https://github.com/titon/toolkit

License:
BSD 2-Clause License
http://opensource.org/licenses/BSD-2-Clause
https://github.com/titon/toolkit/blob/master/license.md
1
2
Umesh Thota's profile photoMax Voß's profile photo
Add a comment...

John Johnson

Shared publicly  - 
 
A very good thing to add to your projects.
 
JavaScript Code Quality Tool

JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team's coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in. JSHint is open source and will always stay this way.

-

Who uses JSHint

Engineers from these companies and projects use JSHint:

* Mozilla
* Facebook
* Twitter
* Bootstrap
* Disqus
* Medium
* Yahoo!
* SmugMug
* jQuery
* PDF.js
* Coursera
* Adobe Brackets
* Apache Cordova
* RedHat
* SoundCloud
* Nodejitsu
* Yelp
* Voxer
* EnyoJS
* QuickenLoans
* oDesk
* Cloud9
* CodeClimate
* Pandoo TEK
* Zendesk

and many more!

-

Image / Source / Demo:
http://jshint.com

Documentation:
http://jshint.com/docs

GitHub / Download:
https://github.com/jshint/jshint

License:
JSHint is distributed under the MIT License.
One file and one file only (src/stable/jshint.js) is distributed under the slightly modified MIT License.
https://github.com/jshint/jshint/blob/2.x/LICENSE
1
1
Thom Allen's profile photo
Add a comment...

John Johnson

Shared publicly  - 
 
A great utility for your toolbox.
 
High-level Streams Library for Node.js and the Browser

Re-thinking the JavaScript utility belt, Highland manages synchronous and asynchronous code easily, using nothing more than standard JavaScript and Node-like Streams.

You may be familiar with Promises, EventEmitters and callbacks, but moving between them is far from seamless.

Thankfully, there exists a deeper abstraction which can free our code.

By updating the tools we use on Arrays, and applying them to values distributed in time instead of space, we can discard plumbing and focus on the important things.

With Highland, you can switch between synchronous and asynchronous data sources at will, without having to re-write your code.

Time to dive in!

-

Image / Source:
http://highlandjs.org

Examples:
http://highlandjs.org/#examples

GitHub / Download:
https://github.com/caolan/highland

License:
Apache License, Version 2.0
http://www.apache.org/licenses/LICENSE-2.0
https://github.com/caolan/highland/blob/master/LICENSE
1
Add a comment...

John Johnson

Shared publicly  - 
 
Simple and sweet
 
Rich Content Editing entirely re-imagined

Sir Trevor is rich content editing entirely re-imagined for the web: an intuitive editor for web content which does not presuppose anything about how it will be rendered.

-

Features:

* No HTML is stored, only structured JSON and clean Markdown
* Trivial to extend and create your own block types
* Intuitive interface for creating rich content
* Used on a national broadcast news site serving millions of users

-

Tested in the following Browsers:

* Chrome 25+
* Firefox 16+
* IE 10+
* Safari 5+

-

Source:
http://madebymany.github.io/sir-trevor-js

Demo:
http://madebymany.github.io/sir-trevor-js/example.html

Documentation:
http://madebymany.github.io/sir-trevor-js/docs.html

Image / GitHub / Download:
https://github.com/madebymany/sir-trevor-js

License:
The MIT License (MIT)
http://www.opensource.org/licenses/mit-license.php
https://github.com/madebymany/sir-trevor-js/blob/master/MIT-LICENCE
2
Add a comment...
Have him in circles
2,589 people

John Johnson

Shared publicly  - 
 
I really like the simplicity of bootflat.
 
Bootflat - Beautiful flat UI kit based on Bootstrap 3.1.1 and built with Sass 

http://bootflat.github.io/ 
Grab a free PSD of their UI elements while you're there too! 

#bootstrap   #css   #uikits2014  
1
Shawn Terry's profile photo
 
www.getuikit.com is great too
Add a comment...

John Johnson

Shared publicly  - 
 
 
Interactive and Multi-State Prototypes for Websites and Apps

Permit.js is a jQuery plugin that makes building interactive, multi-state prototypes for websites and apps easy.

Maybe your website has certain features that are only available to logged-in members and other features only available only to administrators? Or perhaps your app has different features depending on whether it's on- or offline? Or what about the free versus paid versions? These are all examples of states.

Permit.js makes simulating those different situations a breeze. It's designed for use by anyone that does interactive prototype work in HTML and CSS, including information architects and other user interface and user experience (UI/UX) professionals.

Use Cases:

* Logged-Out / Logged-In
* Free / Paid
* Online / Offline
* Writer / Editor / Publisher
* User / Moderator / Administrator
* Staff / Manager / Executive
* English / French / Spanish

-


How does it work

It's pretty simple. The plugin combines JavaScript-generated cookies with a set of dynamically-generated CSS utility classes to show and hide content. When you "issue a permit" with permit.js you're really just creating a cookie that remains in the browser throughout your prototype. Content is then displayed or hidden based on the existence (or non-existence) of the permits that have been issued.

Sure, you could write your own JavaScript and CSS to do the same, but you'll probably find yourself re-writing and altering the code for your next project.

-

Image / Demos:
http://www.technotarek.com/permit/permit.html

GitHub / Download:
https://github.com/technotarek/permit

License:
Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
http://creativecommons.org/licenses/by-sa/3.0
1
1
Mendy Weisz's profile photo
Add a comment...

John Johnson

Shared publicly  - 
1
Add a comment...

John Johnson

Shared publicly  - 
 
A good introduction to APIs
 
https://zapier.com/learn/apis/

An Introduction to APIs from Zapier. 


Zapier lets you easily connect the web apps you use, making it easy to automate tedious tasks.

You can wait for third-party app developers to offer the SaaS integrations you need. You can hire expensive freelance programmers to build custom software for you.

Zapier website is here https://zapier.com/

#api   #webdev  
1
1
Abdulmnem Benaiad's profile photo
Add a comment...

John Johnson

Shared publicly  - 
 
Always cool to see the evolution of a product.
 
Evolution of Glass over two years.
4
2
Maya Creative Group's profile photoChris Grey's profile photo
Add a comment...
People
Have him in circles
2,589 people
Basic Information
Gender
Male
Work
Occupation
create and modify stuff using code
Links