├── README.md
├── TOTALLY-GIGANTIC-FILE.md
├── about.md
├── animation
└── web-animations-api.md
├── appearance
├── animation.md
├── typography.md
└── visualization.md
├── architecture
├── algorithms.md
├── complete-systems.md
├── design-patterns.md
├── designs.md
├── event-driven-programming.md
├── functional-programming.md
└── functional-reactive-programming-frp.md
├── compatibility
├── cross-browser.md
├── e-mail.md
├── keyboard.md
├── mobile.md
├── printers.md
├── responsive-web-design-rwd.md
└── web-accessibility.md
├── contributing.md
├── ecosystem
├── communities-around-projects.md
├── news.md
├── notable-community-members.md
├── organizations.md
└── podcasts.md
├── languages-protocols-browser-apis
├── cascading-style-sheets-css.md
├── document-object-model-dom.md
├── hypertext-markup-language-html.md
├── hypertext-transfer-protocol-http.md
├── javascript-ecmascript.md
├── javascript-object-notation-json.md
├── scalable-vector-graphics-svg.md
├── service-workers.md
├── templating-languages-and-engines.md
├── transpiled-languages.md
├── uniform-resource-identifier-uri.md
└── webassembly.md
├── user-interface-components
├── buttons.md
├── code.md
├── forms.md
├── galeries-and-image-sliders.md
├── grid.md
├── rich-text-editors.md
├── table-of-contents.md
├── ui-kits.md
└── video-and-audio.md
└── workflow
├── automated-testing.md
├── build-tools.md
├── code-editors.md
├── css-tools.md
├── documentation.md
├── fonts-for-programmers.md
├── getting-started.md
├── html-tools.md
├── image-post-processing.md
├── javascript-tools.md
├── package-management.md
├── sourcemaps.md
├── tutorials.md
└── version-control.md
/README.md:
--------------------------------------------------------------------------------
1 | # Frontend Development [](https://github.com/sindresorhus/awesome)
2 |
3 | **Manually curated collection of resources for frontend web developers.**
4 |
5 | You are viewing a browseable version, split by category in many small files. There is also a really huge file with every single resource on one page. Proceed to the [totally gigantic file](TOTALLY-GIGANTIC-FILE.md) if you are into this kind of thing.
6 |
7 | This is the current version, which receives ongoing updates. If you want the good old bookmarks, please use the tag v.1.0. Keep in mind, that the old version has many outdated links.
8 |
9 | [](http://frontend.directory/)
10 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
11 | [](https://twitter.com/FrontendDir)
12 |
13 |
14 | ---------------------------------------------------------
15 |
16 | ## Appearance
17 |
18 | The outward or visible aspect of a website.
19 |
20 | + **[Animation](appearance/animation.md)**: The process of creating motion and shape change.
21 | + **[Typography](appearance/typography.md)**: The style, arrangement, or appearance of typeset matter.
22 | + **[Visualization](appearance/visualization.md)**: Placing data in a visual context.
23 |
24 | ## Architecture
25 |
26 | High level structure of the frontend code and the discipline of creating such structures.
27 |
28 | + **[Algorithms](architecture/algorithms.md)**: A self-contained step-by-step set of operations to be performed. Algorithms perform calculation, data processing, and/or automated reasoning tasks.
29 | + **[Design Patterns](architecture/design-patterns.md)**: Best practices that the programmer can use to solve common problems when designing an application or system.
30 | + **[Designs](architecture/designs.md)**: Ready to use and well documented structures and frameworks for frontend development.
31 | + **[Event-Driven Programming](architecture/event-driven-programming.md)**: Event-driven programming is a programming paradigm in which the flow of the program is determined by events such as user actions, sensor outputs, or messages from other programs/threads.
32 | + **[Functional Programming](architecture/functional-programming.md)**: Functional programming is a programming paradigm, that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data.
33 | + **[Functional Reactive Programming (FRP)](architecture/functional-reactive-programming-frp.md)**: FRP is a programming paradigm for asynchronous dataflow programming using the building blocks of functional programming.
34 |
35 | ## Compatibility
36 |
37 | Ability of a product to work with different input/output devices and rendering software. Including printers, email, mobile devices and different browsers.
38 |
39 | + **[Cross Browser](compatibility/cross-browser.md)**: Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking.
40 | + **[E-Mail](compatibility/e-mail.md)**: Preparing HTML based electronic mail.
41 | + **[Keyboard](compatibility/keyboard.md)**: Working with keyboard input in a web browser.
42 | + **[Mobile](compatibility/mobile.md)**: Development of websites optimized for viewing on smartphone and tablet devices.
43 | + **[Printers](compatibility/printers.md)**: Manipulation of printer output through CSS.
44 | + **[Responsive Web Design (RWD)](compatibility/responsive-web-design-rwd.md)**: RWD responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device.
45 | + **[Web Accessibility](compatibility/web-accessibility.md)**: Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.
46 |
47 | ## Ecosystem
48 |
49 | Important developers, companies, organizations and news sources.
50 |
51 | + **[Communities Around Projects](ecosystem/communities-around-projects.md)**: Successful open source projects attract many developers who produce plugins, libraries, tutorials and other resources. This section collects such resources.
52 | + **[News](ecosystem/news.md)**: Websites & newsletters which provide daily and weekly news related to frontend web development.
53 | + **[Notable Community Members](ecosystem/notable-community-members.md)**: Important engineers, evangelists, architects and other celebrities.
54 | + **[Organizations](ecosystem/organizations.md)**: Commercial companies and nonprofit organizations around web development.
55 | + **[Podcasts](ecosystem/podcasts.md)**: A podcast is a form of digital media that consists of an episodic series of audio, video, digital radio, PDF, or ePub files subscribed to and downloaded automatically through web syndication or streamed online to a computer or mobile device.
56 |
57 | ## Languages, Protocols, Browser APIs
58 |
59 | Programming/mark-up languages and web related standards.
60 |
61 | + **[Cascading Style Sheets (CSS)](languages-protocols-browser-apis/cascading-style-sheets-css.md)**: CSS are a stylesheet language used to describe the presentation of a document written in HTML or XML. It describes how elements should be rendered on screen, on paper, in speech, or on other media.
62 | + **[Document Object Model (DOM)](languages-protocols-browser-apis/document-object-model-dom.md)**: The DOM is a programming interface for HTML, XML and SVG documents. It defines methods that allow access to the tree, so that they can change the document structure, style and content.
63 | + **[HyperText Markup Language (HTML)](languages-protocols-browser-apis/hypertext-markup-language-html.md)**: HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.
64 | + **[Hypertext Transfer Protocol (HTTP)](languages-protocols-browser-apis/hypertext-transfer-protocol-http.md)**: The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.
65 | + **[JavaScript (EcmaScript)](languages-protocols-browser-apis/javascript-ecmascript.md)**: JavaScript is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites. It is defined by ECMAScript standard.
66 | + **[JavaScript Object Notation (JSON)](languages-protocols-browser-apis/javascript-object-notation-json.md)**: JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language.
67 | + **[Scalable Vector Graphics (SVG)](languages-protocols-browser-apis/scalable-vector-graphics-svg.md)**: An XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
68 | + **[Service Workers](languages-protocols-browser-apis/service-workers.md)**: A method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.
69 | + **[Templating Languages and Engines](languages-protocols-browser-apis/templating-languages-and-engines.md)**: Template engines are tools to separate program-logic and presentation into two independent parts. This makes the development of both logic and presentation easier, improves flexibility and eases modification and maintenance.
70 | + **[Transpiled Languages](languages-protocols-browser-apis/transpiled-languages.md)**: Abstract languages converted to native, browser supported standards like JavaScript or CSS.
71 | + **[Uniform Resource Identifier (URI)](languages-protocols-browser-apis/uniform-resource-identifier-uri.md)**: URI is a string of characters used to identify a resource. The most common form of URI is the Uniform Resource Locator (URL).
72 | + **[Web Animations API](animation/web-animations-api.md)**: Web Animations is a new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.
73 | + **[WebAssembly](languages-protocols-browser-apis/webassembly.md)**: WebAssembly is meant to fill a place that JavaScript has been forced to occupy up to now: a low-level code representation that can serve as a compiler target.
74 |
75 | ## User Interface Components
76 |
77 | Drop-in UI components for web sites and applications.
78 |
79 | + **[Buttons](user-interface-components/buttons.md)**: The term button refers to any graphical control element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes, like confirming an action.
80 | + **[Code](user-interface-components/code.md)**: Code viewers and editors designed for embedding inside a website.
81 | + **[Forms](user-interface-components/forms.md)**: A HTML form on a web page allows a user to enter data that is sent to a server for processing. Web users fill out the forms using checkboxes, radio buttons, or text fields.
82 | + **[Galeries & Image Sliders](user-interface-components/galeries-and-image-sliders.md)**: A sophisticated way to present a collection of images on your website.
83 | + **[Grid](user-interface-components/grid.md)**: CSS Grid Layout Systems.
84 | + **[Rich Text Editors](user-interface-components/rich-text-editors.md)**: A rich text editor is the interface for editing rich text within web browsers. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup.
85 | + **[Table Of Contents](user-interface-components/table-of-contents.md)**: Components for automatic table of contents generation.
86 | + **[UI Kits](user-interface-components/ui-kits.md)**: Collections of ready to use components.
87 | + **[Video & Audio](user-interface-components/video-and-audio.md)**: Components for playing audio and video files on a website.
88 |
89 | ## Workflow
90 |
91 | Task automation and asset delivery.
92 |
93 | + **[Automated Testing](workflow/automated-testing.md)**: Automated software testing is a process in which software tools execute pre-scripted tests on a software application before it is released into production.
94 | + **[Build Tools](workflow/build-tools.md)**: Toolkits and their ecosystems, that help you automate painful and repeated tasks.
95 | + **[CSS Tools](workflow/css-tools.md)**: Tools for analysis, pre and post processing of CSS files.
96 | + **[Code Editors](workflow/code-editors.md)**: Text editor programs designed specifically for editing source code of a website.
97 | + **[Documentation](workflow/documentation.md)**: Writing, generating, publishing and consuming documentation for web deliverables.
98 | + **[Fonts for Programmers](workflow/fonts-for-programmers.md)**: Programmers need special fonts, which help align the code and distinguish between characters, that look alike.
99 | + **[Getting Started](workflow/getting-started.md)**: Step by step guides for setting up a frontend development workflow.
100 | + **[HTML Tools](workflow/html-tools.md)**: Tools for pre and post processing of the HTML source code.
101 | + **[Image Post Processing](workflow/image-post-processing.md)**: Tools for image conversion and optimization.
102 | + **[JavaScript Tools](workflow/javascript-tools.md)**: Tools for static analysis, pre and post processing of JavaScript files.
103 | + **[Package Management](workflow/package-management.md)**: A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing reusable libraries and components in a consistent manner.
104 | + **[Sourcemaps](workflow/sourcemaps.md)**: Sourcemap is a way to map a combined/minified file back to an unbuilt state.
105 | + **[Version Control](workflow/version-control.md)**: Version control or source control is a system that records changes to a file or set of files over time so that you can recall specific versions later.
106 |
107 |
108 | ------------------
109 |
110 | # License
111 |
112 | 
This work is licensed under a Creative Commons Attribution 4.0 International License.
113 |
114 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/about.md:
--------------------------------------------------------------------------------
1 | # About this list
2 |
3 | If I have a specific development task the workflow for me looks like this:
4 |
5 | 1. Search through Google, GitHub, Unheap, npm, bower, jster and so on.
6 | 2. Compile a list of useful packages and tutorials for every one of them.
7 | 3. Select the best package for the task.
8 |
9 | So I created this list to not have to go through step #1 and #2 every time.
10 |
--------------------------------------------------------------------------------
/animation/web-animations-api.md:
--------------------------------------------------------------------------------
1 | # Web Animations API
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Animation**
4 |
5 | Web Animations is a new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Are we animated yet?](https://birtles.github.io/areweanimatedyet/)**: This page tracks the progress of implementing the Web Animations API in Firefox.
13 | + **[WAAPI Browser Support Test (+ Polyfill)](http://codepen.io/danwilson/pen/XmWraY)**: This codepen tests whether and to which extend your browser supports Web Animations API. The test is run after including the Polyfill.
14 | + **[Web Animations Polyfill](https://github.com/web-animations/web-animations-js)**: JavaScript implementation of the Web Animations API.
15 |
16 |
17 | ------------------
18 |
19 | # License
20 |
21 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
22 |
23 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/appearance/animation.md:
--------------------------------------------------------------------------------
1 | # Animation
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Appearance**
4 |
5 | The process of creating motion and shape change.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Animate.css](http://daneden.github.io/animate.css/)**: Just-add-water CSS animations.
13 | + **[Animate.less](https://github.com/machito/animate.less)**: A bunch of cool, fun, and cross-browser animations converted into LESS for you to use in your Bootstrap projects.
14 | + **[Anime.js](https://github.com/juliangarnier/anime)**: Anime is a flexible yet lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.
15 | + **[Approach](http://srobbin.com/jquery-plugins/approach/)**: A jQuery plugin that allows you to animate CSS properties based on distance to an object.
16 | + **[CSS Spritesheet Animation Example](http://jsfiddle.net/simurai/CGmCe/light/)**: Sprite Sheet animation with CSS3 using the steps() feature.
17 | + **[Caat](http://hyperandroid.github.io/CAAT/)**: Scene graph director-based animation framework for javascript.
18 | + **[CanvasScript3](http://www.arahaya.com/canvasscript3/)**: CanvasScript3 is a Javascript library for the new HTML5 Canvas with an interface similar to ActionScript3. This library enables Sprite Groups, Layers, Mouse Events, Keyboard Events, Bitmap Effects, Tween Animations etc.
19 | + **[Collie](http://jindo.dev.naver.com/collie/)**: Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM.
20 | + **[Emile.js](https://github.com/madrobby/emile)**: Emile.js is a no-frills stand-alone CSS animation JavaScript framework.
21 | + **[Firmin](http://extralogical.net/projects/firmin/)**: Firmin is a JavaScript animation library using CSS transforms and transitions.
22 | + **[GreenSock Animation Platform](http://www.greensock.com/get-started-js/)**: GreenSock Animation Platform is a suite of tools for scripted animation.
23 | + **[Codepen Repository](http://codepen.io/GreenSock/)**: Codepen repository with examples of Greensock usage and code.
24 | + **[Examples](http://ahrengot.com/tutorials/greensock-javascript-animation/)**: Here are a couple of examples demonstrating the core features of the Greensock Animation Platform.
25 | + **[Learning Center](http://www.greensock.com/learning/)**: Tutorials and videos for GreenSock Animation Platform.
26 | + **[JQuery Transit](http://ricostacruz.com/jquery.transit/)**: Super-smooth CSS3 transformations and transitions for jQuery.
27 | + **[Janis](https://github.com/MikeMcTiernan/Janis)**: Janis is a lightweight Javascript framework that provides simple animations via CSS transitions for modern browsers on the web as well as mobile devices.
28 | + **[Keanu](https://github.com/wambotron/Keanu)**: Keanu is a micro-lib for animation on Canvas/JS.
29 | + **[Magic](https://github.com/miniMAC/magic)**: CSS3 Animations with special effects.
30 | + **[Move.js](http://visionmedia.github.com/move.js/)**: Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.
31 | + **[Ramjet](http://www.rich-harris.co.uk/ramjet/)**: Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree.
32 | + **[Rekapi](http://rekapi.com/)**: A keyframe animation library for JavaScript.
33 | + **[SVG.js](http://svgjs.com/)**: A lightweight library for manipulating and animating SVG.
34 | + **[Scripty2](http://scripty2.com/)**: scripty2 is a powerful, flexible JavaScript framework to help you write your own delicious visual effects & user interfaces.
35 | + **[Shifty](http://jeremyckahn.github.com/shifty/)**: Shifty is a tweening engine built in JavaScript. It is designed to fit any number of tweening needs.
36 | + **[Snap.svg](http://snapsvg.io/)**: Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
37 | + **[Stylie](http://jeremyckahn.github.io/stylie/)**: Stylie is a fun tool for easily creating complex CSS animations. Quickly design your animation graphically, grab the generated code and go!
38 | + **[Textillate.js](http://jschr.github.io/textillate/)**: Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.
39 | + **[Tween.js](https://github.com/sole/tween.js)**: Super simple, fast and easy to use tweening engine which incorporates optimised Robert Penner's equations.
40 | + **[Twitter Fave Animation](https://cssanimation.rocks/twitter-fave/)**: Rather than rely on CSS transitions, the new animation makes use of a series of images. Here’s how to recreate the animation using the CSS animation steps timing function.
41 | + **[Web Animation Past, Present, and Future (2016)](http://alistapart.com/article/web-animation-past-present-and-future)**: Rachel Nabors explores the world of web animation standards, platforms and tools in 2016: SVG, SMIL, GreenSock AP, Framer, Browser Tooling etc.
42 | + **[Web Animations API](http://w3c.github.io/web-animations/)**: Web Animations is a new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.
43 | + **[Are we animated yet?](https://birtles.github.io/areweanimatedyet/)**: This page tracks the progress of implementing the Web Animations API in Firefox.
44 | + **[WAAPI Browser Support Test (+ Polyfill)](http://codepen.io/danwilson/pen/XmWraY)**: This codepen tests whether and to which extend your browser supports Web Animations API. The test is run after including the Polyfill.
45 | + **[Web Animations Polyfill](https://github.com/web-animations/web-animations-js)**: JavaScript implementation of the Web Animations API.
46 |
47 |
48 | ------------------
49 |
50 | # License
51 |
52 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
53 |
54 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/appearance/typography.md:
--------------------------------------------------------------------------------
1 | # Typography
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Appearance**
4 |
5 | The style, arrangement, or appearance of typeset matter.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[A Comprehensive Guide to Font Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/)**: Zach Leatherman describes different approaches to loading of web fonts.
13 | + **[Adobe Edge Web Fonts](https://edgewebfonts.adobe.com/fonts)**: Edge Web Fonts is a free service that provides access to a large library of fonts for your website. It’s one of the Edge Tools & Services from Adobe. Use of the service is free and unlimited.
14 | + **[Baseline.js](https://github.com/daneden/Baseline.js)**: A simple jQuery plugin for restoring vertical baselines thrown off by odd image sizes.
15 | + **[CSS Typography cheat sheet](http://www.newnet-soft.com/blog/csstypography)**: Small roundup on CSS features that will enhance your web typography.
16 | + **[Convincing a browser to load fonts from other domains](http://stackoverflow.com/questions/2892691/font-face-fonts-only-work-on-their-own-domain)**: A StackOverflow question about loading fonts across domains.
17 | + **[FitText](http://fittextjs.com/)**: FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
18 | + **[FlowType.JS](http://simplefocus.com/flowtype/)**: Font-size and line-height based on element width.
19 | + **[Fontmatrix](http://media.24ways.org/2007/17/fontmatrix.html)**: Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite.
20 | + **[Google Fonts](https://www.google.com/fonts/)**: Google Fonts makes it quick and easy for everyone to use web fonts. Our goal is to create a directory of web fonts for the world to use. Our API service makes it easy to add Google Fonts to a website in seconds.
21 | + **[Gutenberg](http://matejlatin.github.io/Gutenberg/)**: Gutenberg is a flexible and simple-to-use web typography starter kit for web designers and developers.
22 | + **[Lettering.js](http://letteringjs.com/)**: Web type is exploding all over the web but CSS currently doesn't offer complete down-to-the-letter control. So we created a jQuery plugin to give you that control.
23 | + **[OpenFoundry](http://open-foundry.com/)**: A platform for open-source fonts in a noise-free environment; to highlight their beauty and encourage further exploration.
24 | + **[Pure Typography](http://tilomitra.github.io/csstypography/)**: CSS Styles for nicer web type. Depends on Pure.
25 | + **[Quick guide to webfonts via @font-face](http://www.html5rocks.com/en/tutorials/webfonts/quick/)**: The @font-face feature from CSS3 allows us to use custom typefaces on the web in an accessible, manipulable, and scalable way.
26 | + **[Truly Fluid Typography With vh And vw Units](https://www.smashingmagazine.com/2016/05/fluid-typography/)**: This article describes viewport units and other technics to achieve typography which resizes smoothly with the screen.
27 | + **[TypeButter](https://github.com/hudsonfoo/typebutter)**: TypeButter allows you to set optical kerning for any font on your website. If you're longing for beautifully laid out text that today' browsers just don't provide, this is the plugin for you.
28 | + **[Typeset.css](https://github.com/joshuarudd/typeset.css)**: A no-nonsense CSS typography reset for styling user-generated content like blog posts, comments, and forum content.
29 | + **[Typeset.css](http://stormwarning.github.io/typeset.css/)**: A Sass library that provides some sensible default styles, optional classes to use & extend as needed, and some utility functions & mixins to make elevating your typography simpler.
30 | + **[bacon](http://baconforme.com/)**: Bacon is a jQuery plugin that allows you to wrap text around a bezier curve or a line.
31 | + **[slabText](https://github.com/freqDec/slabText/)**: A jQuery plugin for producing big, bold & responsive headlines.
32 | + **[trunk8](http://jrvis.com/trunk8/)**: trunk8 is an intelligent text truncation plugin to jQuery. When applied to a large block of text, trunk8 will cut off just enough text to prevent it from spilling over.
33 |
34 |
35 | ------------------
36 |
37 | # License
38 |
39 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
40 |
41 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/appearance/visualization.md:
--------------------------------------------------------------------------------
1 | # Visualization
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Appearance**
4 |
5 | Placing data in a visual context.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Bonsai.js](http://bonsaijs.org/)**: A lightweight graphics library with an intuitive graphics API and an SVG renderer.
13 | + **[Chart.js](http://www.chartjs.org/)**: Simple, clean and engaging charts for designers and developers.
14 | + **[Crossfilter](http://square.github.io/crossfilter/)**: Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser.
15 | + **[Cube](http://square.github.io/cube/)**: Cube is a system for collecting timestamped events and deriving metrics. By collecting events rather than metrics, Cube lets you compute aggregate statistics post hoc.
16 | + **[Cubism.js](http://square.github.io/cubism/)**: Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources.
17 | + **[D3.js](https://d3js.org/)**: D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.
18 | + **[DataMaps](http://datamaps.github.io/)**: Customizable SVG (world) map visualizations for the web in a single Javascript file using D3.js.
19 | + **[Interactive Introduction to D3](http://vadim.ogievetsky.com/IntroD3/)**: D3 slides in D3 that I put together after becoming frustrated with explaining D3 using PowerPoint.
20 | + **[NVD3](http://nvd3.org/)**: This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you.
21 | + **[Tutorial: Introduction to D3](http://www.janwillemtulp.com/2011/03/20/tutorial-introduction-to-d3/)**: Basically we just plot hidden circles randomly on the screen, and then transition them to a portion of the screen. Then we add some interaction to it so that the circles will move once you move your mouse over them.
22 | + **[xCharts](http://tenxer.github.io/xcharts/)**: xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.
23 | + **[Easy Pie Chart](http://rendro.github.io/easy-pie-chart/)**: Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values
24 | + **[Flot](http://www.flotcharts.org/)**: Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
25 | + **[Google Chart Tools](https://developers.google.com/chart/)**: The Google Visualization API allows you to create charts and reporting applications over structured data and helps integrate these directly into your website.
26 | + **[Paper.js](http://paperjs.org)**: Paper.js offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves.
27 | + **[Photon](http://photon.attasi.com/)**: Photon is a JavaScript library that adds simple lighting effects to DOM elements in 3D space.
28 | + **[Piecon](http://lipka.github.io/piecon/)**: A tiny javascript library for dynamically generating progress pie charts in your favicons.
29 | + **[Processing.js](http://berniesumption.com/software/animator/)**: Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations work using web standards.
30 | + **[Smoothie Charts](http://smoothiecharts.org/)**: A JavaScript Charting Library for Streaming Data.
31 | + **[TimelineJS](http://timeline.knightlab.com/)**: TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines.
32 | + **[Timesheet.js](http://sbstjn.github.io/timesheet.js/)**: Visualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well.
33 | + **[Treefun by Jim Blackler](https://github.com/jimblackler/treefun)**: This tool creates SVG (Standard Vector Graphics) files to illustrate information structured as a basic tree.
34 | + **[jQuery.Gantt](http://taitems.github.io/jQuery.Gantt/)**: Draw Gantt charts with the famous jQuery ease of development.
35 | + **[jStat](http://jstat.github.io/)**: jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language (e.g. MATLAB or R).
36 | + **[morris.js](http://morrisjs.github.io/morris.js/)**: Morris.js is a very simple API for drawing line, bar, area and donut charts.
37 | + **[mxgraph](http://jgraph.github.io/mxgraph/)**: mxGraph is a JavaScript diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser, both HTML 5 capable and Internet Explorer v7+.
38 | + **[three.js](http://threejs.org/)**: Three.js is a library that makes WebGL - 3D in the browser - easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that.
39 | + **[vis.js](http://visjs.org/)**: Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, handle large amounts of dynamic data, and enable manipulation of the data.
40 |
41 |
42 | ------------------
43 |
44 | # License
45 |
46 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
47 |
48 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/architecture/algorithms.md:
--------------------------------------------------------------------------------
1 | # Algorithms
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Architecture**
4 |
5 | A self-contained step-by-step set of operations to be performed. Algorithms perform calculation, data processing, and/or automated reasoning tasks.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Algorithm Visualizer](https://github.com/parkjs814/AlgorithmVisualizer)**: A collection of algorithms with code and visualizations for each one of them.
13 | + **[Sorting Algorithms Animations](https://www.toptal.com/developers/sorting-algorithms/)**: The following animations illustrate how effectively data sets from different starting points can be sorted using different algorithms.
14 |
15 |
16 | ------------------
17 |
18 | # License
19 |
20 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
21 |
22 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/architecture/complete-systems.md:
--------------------------------------------------------------------------------
1 | # Complete Systems
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Architecture**
4 |
5 | Ready to use and well documented structures and frameworks for frontend development.
6 |
7 | [](http://frontend.directory/)
8 | [](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=4FAGPMANWRVJJ)
9 | [](https://beerpay.io/dypsilon/frontend-dev-bookmarks)
10 | [](https://flattr.com/submit/auto?fid=3nlo5p&url=https%3A%2F%2Fgithub.com%2Fdypsilon%2Ffrontend-dev-bookmarks)
11 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
12 | [](https://twitter.com/FrontendDir)
13 |
14 | -----------------------------------------
15 |
16 | + **[Atomic Design](http://atomicdesign.bradfrost.com/table-of-contents/)**: Atomic Design discusses the importance of crafting robust design systems, and introduces a methodology for which to create smart, deliberate interface systems.
17 | + **[A More Seamless Workflow — Style Guides for Better Design and Development](https://medium.com/@AshConnolly/a-more-seamless-workflow-style-guides-for-better-design-and-development-639fc55be28c)**: Ash Connolly explains what styles guides are and which benefits they bring to designers and developers.
18 | + **[Atomic Docs](http://atomicdocs.io/)**: Atomic Docs is a styleguide generator and component manager. Atomic Docs is built in PHP. Inspired by Brad Frost's Atomic Design principles.
19 | + **Authoring jQuery Plugins**: jQuery is an utility library and a plugin framework. This section collects resources about creating such plugins.
20 | + **[Advanced Plugin Concepts](http://learn.jquery.com/plugins/advanced-plugin-concepts/)**: A collection of best practices for jQuery plugin authoring.
21 | + **[How to Create a Basic Plugin](http://learn.jquery.com/plugins/basic-plugin-creation/)**: The article describes basic plugin creation and provides a simple boilerplate.
22 | + **[Signs of a poorly written jQuery plugin](https://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin)**: Collection of jQuery plugin antipatterns.
23 | + **[The Ultimate Guide to Writing jQuery Plugins](https://websanova.com/blog/jquery/the-ultimate-guide-to-writing-jquery-plugins)**: A comprehensive guide on how to develop jQuery plugins including a simple boilerplate.
24 | + **[Writing Stateful Plugins with the jQuery UI Widget Factory](http://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/)**: The article demonstrates the capabilities of the Widget Factory by building a simple progress bar plugin.
25 | + **[jQuery Boilerplate](https://github.com/jquery-boilerplate/jquery-boilerplate)**: This project won't seek to provide a perfect solution to every possible pattern, but will attempt to cover a simple template for beginners and above.
26 | + **[jQuery Plugin Patterns](https://github.com/jquery-boilerplate/jquery-patterns)**: This project won't seek to provide implementations for every possible pattern, but will attempt to cover popular patterns developers often use in the wild.
27 | + **[Block Element Modifier (BEM)](https://en.bem.info/method/)**: Methodology aimed at achieving fast to develop long-lived projects, team scalability, and code reuse.
28 | + **[A New Front-End Methodology: BEM](http://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/)**: An introduction by Varvara Stepanova at SmashingMagazine.
29 | + **[An Introduction to the BEM Methodology](http://webdesign.tutsplus.com/articles/an-introduction-to-the-bem-methodology--cms-19403)**: General introduction article on tutsplus.
30 | + **[Block, Element, Modifying Your JavaScript Components](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b)**: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack.
31 | + **[Emmet filter for BEM](http://docs.emmet.io/filters/bem/)**: If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes.
32 | + **[Fifty Shades of BEM](http://blog.kaelig.fr/post/48196348743/fifty-shades-of-bem)**: Article describes different flavors of BEM.
33 | + **[Introduction To BEM Methodology (Toptal)](https://www.toptal.com/css/introduction-to-bem-methodology)**: General introduction to BEM methodology and platform.
34 | + **[MindBEMding – getting your head ’round BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)**: Article on csswizardry explaining the BEM syntax for CSS classes.
35 | + **[Support for BEM modules in Sass 3.3](http://mikefowler.me/2013/10/17/support-for-bem-modules-sass-3.3/)**: The next major release of Sass is poised for release and with it comes real support for BEM-style modules...
36 | + **[To BEM or not to BEM](http://www.didoo.net/to-bem-or-not-to-bem/)**: A series of interviews on BEM methodology.
37 | + **[Polymer Project](https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html)**: The Polymer library is designed to make it easier and faster for developers to create great, reusable components for the modern web.
38 | + **[Building web components using ES6 classes](https://www.polymer-project.org/1.0/articles/es6.html)**: Web components evolve markup into something that’s meaningful, maintainable, and highly modular. Thanks to these new API primitives, not only do we have improved ergonomics when building apps, but we gain better overall structure, design, and reusability.
39 | + **[ShadowDOM Visualizer](http://html5-demos.appspot.com/shadowdom-visualizer)**: This tools allows you to visualize how Shadow DOM renders in the browser.
40 | + **[What is shady DOM?](https://www.polymer-project.org/1.0/articles/shadydom.html)**: On browsers that support shadow DOM, it’s possible to have an element that is rendered with complex DOM, but have that complexity hidden away as implementation detail.
41 | + **[SMACSS](https://smacss.com/book/)**: SMACSS (pronounced “smacks”) is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
42 | + **[T3](http://t3js.org/)**: T3 is a minimalist JavaScript framework sponsored by Box Inc. that provides core structure to code.
43 | + **[TodoMVC](http://todomvc.com/)**: A project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
44 |
45 |
46 | ------------------
47 |
48 | [](http://frontend.directory/)
49 | [](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=4FAGPMANWRVJJ)
50 | [](https://beerpay.io/dypsilon/frontend-dev-bookmarks)
51 | [](https://flattr.com/submit/auto?fid=3nlo5p&url=https%3A%2F%2Fgithub.com%2Fdypsilon%2Ffrontend-dev-bookmarks)
52 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
53 | [](https://twitter.com/FrontendDir)
54 |
55 | # License
56 |
57 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
58 |
59 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/architecture/event-driven-programming.md:
--------------------------------------------------------------------------------
1 | # Event-Driven Programming
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Architecture**
4 |
5 | Event-driven programming is a programming paradigm in which the flow of the program is determined by events such as user actions, sensor outputs, or messages from other programs/threads.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Comparison Between Different Observer Pattern Implementations](https://github.com/millermedeiros/js-signals/wiki/Comparison-between-different-Observer-Pattern-implementations)**: The comparison below is just about the basic features of subscribing to an event type, dispatching and removing an event listener.
13 | + **[Event Emitter, Pub Sub or Deferred Promises](https://otaqui.com/blog/1374/event-emitter-pub-sub-or-deferred-promises-which-should-you-choose/)**: In this post Pete Otaqui explores a little about how each pattern works with (very) basic implementations and looks at the reasons why you might choose one over another.
14 | + **Implementations**: Libraries, frameworks and tools that use Event-Driven Programming paradigm.
15 | + **[Bacon.js](https://baconjs.github.io/)**: A small functional reactive programming lib for JavaScript. Turns your event spaghetti into clean and declarative feng shui bacon, by switching from imperative to functional.
16 | + **[Flight](http://flightjs.github.io/)**: An event-driven web framework, from Twitter.
17 | + **[Mediator.js](http://thejacklawson.com/Mediator.js/)**: Mediator is a simple class that allows you to register, unregister, and call subscriber methods to help event-based, asyncronous programming.
18 | + **[Postal.js](https://github.com/postaljs/postal.js)**: Postal.js takes the familiar "eventing-style" paradigm and extends it by providing "broker" and subscriber implementations
19 | + **[Radio.js](http://radio.uxder.com/)**: Radio.js is a small dependency-free publish/subscribe JavaScript library. Use it to implement the observer pattern in your code to help decouple your application architecture for greater maintainability.
20 | + **[js-signals](http://millermedeiros.github.io/js-signals/)**: Custom Event/Messaging system for JavaScript.
21 | + **[pubsub.js](https://github.com/federico-lox/pubsub.js)**: A tiny (~600 bytes when minified, ~300 bytes when gzip'd) and robust pubsub implementation.
22 |
23 |
24 | ------------------
25 |
26 | # License
27 |
28 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
29 |
30 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/architecture/functional-reactive-programming-frp.md:
--------------------------------------------------------------------------------
1 | # Functional Reactive Programming (FRP)
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Architecture**
4 |
5 | FRP is a programming paradigm for asynchronous dataflow programming using the building blocks of functional programming.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[A General Theory of Reactivity](https://github.com/kriskowal/gtor)**: Kris Kowal describes popular primitives of Reactive Programming and some use cases.
13 | + **[A General Theory of Reactivity (Video)](https://www.youtube.com/watch?v=R9CGieinKVo)**: Kris Kowal talks about reactive primitives and their traits.
14 | + **[Controlling Time and Space](https://www.youtube.com/watch?v=Agu6jipKfYw)**: This talk will quickly cover the basics of FRP, and then go into a couple different formulations of FRP that people are beginning to use. We will explore how these formulations fit together historically and theoretically.
15 | + **[Cycle.js](http://cycle.js.org/)**: A functional and reactive JavaScript framework that solves the cyclic dependency of Observables which emerge during dialogues (mutual observations) between the Human and the Computer.
16 | + **[Async Driver](https://github.com/whitecolor/cycle-async-driver)**: Higher order factory for creating cycle.js async request based drivers. Allows you almost completely eliminate boilerplate code for this kind of drivers.
17 | + **[Cycle.js Was Built to Solve Problems](https://www.youtube.com/watch?v=Rj8ZTRVka4E)**: In this video André Staltz shows how Cycle.js has a practical purpose, meant to solve problems your customers/business may relate to.
18 | + **[Cycle.js and Functional Reactive User Interfaces](https://www.youtube.com/watch?v=uNZnftSksYg)**: In this talk we will discover how Cycle.js is purely reactive and functional, and why it's an interesting alternative to React.
19 | + **[Draw Cycle](https://glebbahmutov.com/draw-cycle/)**: Simple Cycle.js program visualized
20 | + **[Drivers](http://cycle.js.org/drivers.html)**: Drivers are functions that listen to Observable sinks (their input), perform imperative side effects, and may return Observable sources (their output).
21 | + **[Animation](https://github.com/Widdershin/cycle-animation-driver)**: A Cycle driver for requestAnimationFrame.
22 | + **[Audio Graph Driver](https://github.com/benji6/cycle-audio-graph)**: Audio graph driver for Cycle.js based on virtual-audio-graph.
23 | + **[Cookie](https://github.com/10clouds/cyclejs-cookie)**: Cycle.js Cookie Driver, based on cookie_js library.
24 | + **[DOM](https://github.com/cyclejs/dom)**: The standard DOM Driver for Cycle.js based on virtual-dom, and other helpers.
25 | + **[Fetch](https://github.com/secobarbital/cycle-fetch-driver)**: A Cycle.js Driver for making HTTP requests, using the Fetch API.
26 | + **[Fetcher](https://github.com/r7kamura/cycle-fetcher-driver)**: A Cycle.js Driver for making HTTP requests using stackable-fetcher.
27 | + **[Firebase](https://github.com/dralletje/cycle-firebase)**: Thin layer around the firebase javascript API that allows you to query and declaratively update your favorite real-time database.
28 | + **[HTTP](https://github.com/cyclejs/http)**: A Cycle.js Driver for making HTTP requests, based on superagent.
29 | + **[Hammer.js](https://github.com/CyclicMaterials/cycle-hammer-driver)**: The driver incorporates the Hammer.js gesture library.
30 | + **[History](https://github.com/cyclejs/history)**: Cycle.js URL Driver based on the rackt/history library.
31 | + **[Keys](https://github.com/raquelxmoss/cycle-keys)**: A Cycle.js driver for keyboard events.
32 | + **[Mongoose.js](https://github.com/whitecolor/cycle-mongoose/)**: A driver for using Mongoose with Cycle JS. Accepts both, write and read operations.
33 | + **[Notification](https://github.com/cyclejs/cycle-notification-driver)**: A Cycle.js Driver for showing and responding to HTML5 Notifications.
34 | + **[Router](https://github.com/TylorS/cycle-router)**: A router built from the ground up with Cycle.js in mind. Stands on the shoulders of battle-tested libraries switch-path for route matching and rackt/history for dealing with the History API.
35 | + **[Router5](https://github.com/axefrog/cycle-router5)**: A source/sink router driver for Cycle.js, based on router5.
36 | + **[Server-Sent Events](https://github.com/jessaustin/cycle-sse-driver)**: Cycle.js driver for Server-Sent Events (SSE), a browser feature also known as EventSource. Server-Sent Events allow the server to continuously update the page with new events, without resorting to hacks like long-polling.
37 | + **[Snabbdom](https://github.com/TylorS/cycle-snabbdom)**: Alternative DOM driver utilizing the snabbdom library.
38 | + **[Socket.IO](https://github.com/cgeorg/cycle-socket.io)**: A Cycle driver for applications using Socket.IO
39 | + **[Storage](https://github.com/cyclejs/storage)**: A Cycle.js Driver for using localStorage and sessionStorage in the browser.
40 | + **Example Projects**: Example applications built with Cycle.js
41 | + **[Cycle.js Examples](https://github.com/cyclejs/examples)**: Browse and learn from examples of small Cycle.js apps using Core, DOM Driver, HTML Driver, HTTP Driver, JSONP Driver, and others.
42 | + **[RX Marbles](https://github.com/staltz/rxmarbles)**: Interactive diagrams of Rx Observables.
43 | + **[TODO: Minimum Viable Pizza](https://github.com/cgeorg/todomvp)**: Minimum Viable Pizza implemented with Cycle.js
44 | + **[Tricycle](https://github.com/Widdershin/tricycle)**: A scratchpad for trying out Cycle.js.
45 | + **[Intro to Functional Reactive Programming with Cycle.js](https://www.youtube.com/watch?v=6_ETUyh0tns)**: Nick Johnstone gives an introduction to developing with Cycle.js in this video presentation.
46 | + **[Learning How to Ride: an Introduction to Cycle.js](https://www.youtube.com/watch?v=31URmaeNHSs)**: In this talk, Fernando Macias Pereznieto introduces us to the good, the bad, and the beautiful of using Cycle.js, whether you are a complete beginner or an experienced JS ninja.
47 | + **[Motorcycle.js](https://github.com/motorcyclejs/core)**: This is a sister project that will continue to evolve and grow alongside Cycle.js for the foreseeable future. The primary focus of this project is to tune it for performance as much as possible.
48 | + **[Most](https://github.com/cujojs/most)**: Monadic reactive streams with high performance.
49 | + **[Plug and Play All Your Observable Streams With Cycle.js](https://medium.com/@fkrautwald/plug-and-play-all-your-observable-streams-with-cycle-js-e543fc287872)**: Frederik Krautwald explains the principles behind Cycle.js, it's inner workings and how to use it to create a simple program with drivers.
50 | + **[Tricycle](https://github.com/Widdershin/tricycle)**: A scratchpad for trying out Cycle.js.
51 | + **[What Developers Need to Know about MVI (Model-View-Intent)](http://thenewstack.io/developers-need-know-mvi-model-view-intent/)**: The article explains the general MVI pattern and how it relates to React, Reactive Programming and Cycle.js
52 | + **[Cycle.js and Functional Reactive User Interfaces](https://www.youtube.com/watch?v=uNZnftSksYg)**: In this talk we will discover how Cycle.js is purely reactive and functional, and why it's an interesting alternative to React.
53 | + **[Dynamics of Change: why Reactivity Matters](https://www.youtube.com/watch?v=v68ppDlvHqs)**: In this talk we will see when passive or reactive strategy is advantageous, and how the reactive strategy is a sensible default.
54 | + **[Enemy of the State](https://vimeo.com/68987289)**: An introduction to Functional Reactive Programming and Bacon.js by Philip Roberts.
55 | + **[MobX](https://github.com/mobxjs/mobx)**: MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
56 | + **[Promises + FP = Beautiful Streams](https://medium.com/@yelouafi/promises-fp-beautiful-streams-6f0235c5b179)**: Yassine Elouafi show how to use functional programming and algebraic data types to derive a pure functional definition of reactive programming like streams.
57 | + **Stream Libraries**: Libraries which help you compose asynchronous operations on streams of time-varying values and events.
58 | + **[Bacon.js](http://baconjs.github.io/)**: A small functional reactive programming lib for JavaScript. Turns your event spaghetti into clean and declarative feng shui bacon, by switching from imperative to functional.
59 | + **[Kefir.js](https://rpominov.github.io/kefir/)**: Kefir — is a Reactive Programming library for JavaScript inspired by Bacon.js and RxJS, with focus on high performance and low memory usage.
60 | + **[Most](https://github.com/cujojs/most)**: Monadic reactive streams with high performance.
61 | + **[Reactive Extensions (RxJS)](https://github.com/Reactive-Extensions/RxJS)**: RxJS is a set of libraries for composing asynchronous and event-based programs using observable sequences and fluent query operators.
62 | + **[Async JavaScript with Reactive Extensions](https://www.youtube.com/watch?v=XRYN2xt11Ek)**: Jafar Husain explains in this video how Netflix uses the Reactive Extensions (Rx) library to build responsive user experiences that strive to be event-driven, scalable and resilient.
63 | + **[Exploring Rx Operators: FlatMap](http://blog.thoughtram.io/rx/2016/08/01/exploring-rx-operators-flatmap.html)**: Christoph Burgdorf introduces the FlatMap operator and its usage for collections and observables.
64 | + **[Exploring Rx Operators: Map](http://blog.thoughtram.io/angular/2016/05/16/exploring-rx-operators-map.html)**: Christoph Burgdorf explains how to use the map operator in RxJS.
65 | + **[Functional Core Reactive Shell](http://www.mokacoding.com/blog/functional-core-reactive-shell/)**: Giovanni Lodi makes an overview of different architecture meta-patterns and describes his current findings about functional programming and observables as a way to control side effects.
66 | + **[Learn RX](http://reactivex.io/learnrx/)**: A series of interactive exercises for learning Microsoft's Reactive Extensions (Rx) Library for Javascript.
67 | + **[Learn RxJS](http://www.learnrxjs.io/)**: This site focuses on making RxJS concepts approachable, the examples clear and easy to explore, and features references throughout to the best RxJS related material on the web.
68 | + **[Real World Observables](https://medium.com/@sergimansilla/real-world-observables-1f65748c8f9)**: Sergi Mansilla writes an FTP client to use it as an example for a real world application based on RxJS.
69 | + **[Rx Training Games](https://github.com/JulienMoumne/rx-training-games)**: Rx Training Games is a coding playground that can be used to learn and practice Reactive Extensions coding grid-based games
70 | + **[Rx-Book](http://xgrommx.github.io/rx-book/index.html)**: A complete book about RxJS v.4.0.
71 | + **[RxMarbles](http://rxmarbles.com/)**: A webapp for experimenting with diagrams of Rx Observables, for learning purposes.
72 | + **[RxState](https://www.npmjs.com/package/rxstate)**: Simple opinionated state management library based on RxJS and Immutable.js
73 | + **[Taking Advantage of Observables in Angular 2](http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html)**: Christoph Burgdorf describes the advantages of Observables and how you can use them in Angular 2 context.
74 | + **[Transducers with Observable Sequences](https://xgrommx.github.io/rx-book/content/getting_started_with_rxjs/creating_and_querying_observable_sequences/transducers.html)**: A chapter from the RxJS Book describing Transducers.
75 | + **[Why We Built Xstream](http://staltz.com/why-we-built-xstream.html)**: The authors needed a stream library tailored for Cycle.js. It needs to be “hot” only, small in kB size and it should have only a few and intuitive operators.
76 | + **[Xstream](https://github.com/staltz/xstream)**: An extremely intuitive, small, and fast functional reactive stream library for JavaScript.
77 | + **[Why We Built Xstream](http://staltz.com/why-we-built-xstream.html)**: The authors needed a stream library tailored for Cycle.js. It needs to be “hot” only, small in kB size and it should have only a few and intuitive operators.
78 | + **[The Introduction to Reactive Programming](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)**: André Staltz provides a complete introduction to the Reactive Programming and RxJS.
79 | + **[What if the User was a Function?](https://www.youtube.com/watch?v=1zj7M1LnJV4)**: In this video André Staltz talks about the input/output cycle between humans and computers and how to take advantage of this model by using FRP and event streams.
80 |
81 |
82 | ------------------
83 |
84 | # License
85 |
86 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
87 |
88 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/compatibility/cross-browser.md:
--------------------------------------------------------------------------------
1 | # Cross Browser
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility**
4 |
5 | Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Can I use ... ?](http://caniuse.com/)**: "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
13 | + **[Dev Tools by Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/tools/)**: These tools allow you to test your product on different version of Internet Explorer and Microsoft Edge.
14 | + **[HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills)**: So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them.
15 | + **[HTML5 Please](http://html5please.com/)**: Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.
16 | + **[Modernizr](https://modernizr.com/)**: It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user.
17 | + **[Normalize.css](http://necolas.github.io/normalize.css/)**: A modern, HTML5-ready alternative to CSS resets.
18 | + **[Polyfill.io](https://polyfill.io/)**: Just the polyfills you need for your site, tailored to each browser.
19 |
20 |
21 | ------------------
22 |
23 | # License
24 |
25 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
26 |
27 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/compatibility/e-mail.md:
--------------------------------------------------------------------------------
1 | # E-Mail
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility**
4 |
5 | Preparing HTML based electronic mail.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Bulletproof E-Mail Buttons](https://buttons.cm/)**: Design gorgeous buttons using progressively enhanced VML and CSS.
13 | + **[Email Lab](https://github.com/sparkbox/email-lab)**: This a project for developing and testing email templates. It uses Grunt to streamline and simplify the creation of email templates. Email template can be built with re-usable components.
14 | + **[Email-Boilerplate](https://github.com/seanpowell/Email-Boilerplate)**: Use these code examples as a guideline for formatting your HTML email to avoid some of the major styling pitfalls in HTML email design.
15 | + **[Foundation for Emails 2](http://foundation.zurb.com/emails.html)**: Frontend Framework for E-Mails including a grid, global styles, aligment classes, buttons, callout panels, thumbnail styles, typography, visibility classes.
16 | + **[MJML](https://mjml.io/)**: MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase.
17 | + **[MailChimp E-Mail Blueprints](https://github.com/mailchimp/Email-Blueprints)**: Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails.
18 | + **[Open Source Email Templates](https://www.sendwithus.com/resources/templates)**: The sendwithus Open Source Template Project is a collection of free email templates created and managed by the sendwithus team and community.
19 | + **[Really Simple Responsive HTML Email Template](https://github.com/leemunroe/responsive-html-email-template)**: Sometimes all you want is a really simple HTML email template. Here it is.
20 | + **[Responsive Email Design](https://www.campaignmonitor.com/dev-resources/guides/mobile/)**: In this guide, the author will cover the fundamentals of designing and building a mobile-friendly email and back it all up with some neat tips and techniques.
21 | + **[Responsive Email Templates](http://zurb.com/playground/responsive-email-templates)**: Zurb Studios put together this set of super awesome email templates so that you can make your email campaigns responsive.
22 | + **[The Ultimate Guide to CSS](https://www.campaignmonitor.com/css/)**: A complete breakdown of the CSS support for the top 10 most popular mobile, web and desktop email clients on the planet.
23 |
24 |
25 | ------------------
26 |
27 | # License
28 |
29 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
30 |
31 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/compatibility/keyboard.md:
--------------------------------------------------------------------------------
1 | # Keyboard
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility**
4 |
5 | Working with keyboard input in a web browser.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[What’s New with KeyboardEvents? Keys and Codes!](https://developers.google.com/web/updates/2016/04/keyboardevent-keys-codes)**: Jeff Posnick talks about the code and key event attributes and how to use them in practice.
13 |
14 |
15 | ------------------
16 |
17 | # License
18 |
19 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
20 |
21 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/compatibility/mobile.md:
--------------------------------------------------------------------------------
1 | # Mobile
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility**
4 |
5 | Development of websites optimized for viewing on smartphone and tablet devices.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **Emulation**: Tools for emulating features of mobile devices on a desktop.
13 | + **[Responsinator](http://www.responsinator.com/)**: Quickly test any website in popular resolutions.
14 | + **[Simulate Mobile Devices with Chrome Developer Tools](https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=en)**: Use Chrome DevTools' Device Mode to build mobile-first, fully responsive web sites. Learn how to use it to simulate a wide range of devices and their capabilities.
15 | + **[Touché](https://github.com/davidcalhoun/touche)**: Touché: bringing touch events to non-touch browsers (how touching!). No dependencies. No code bloat.
16 | + **[thumbs.js](http://mwbrooks.github.io/thumbs.js/)**: Adds touch support to your browser.
17 | + **Gestures**: Resources for working with touch mechanics (what your fingers do on the screen) and touch activities (results of specific gestures).
18 | + **[Hammer.js](http://hammerjs.github.io/)**: Hammer helps you add support for touch gestures to your page, and remove the 300ms delay from clicks.
19 | + **[Introduction to Gestures](https://www.google.com/design/spec/patterns/gestures.html)**: Descriptions of different gestures an their meanings.
20 | + **[Pointer Events Polyfill](https://github.com/jquery/PEP)**: PEP polyfills pointer events in all browsers that haven't yet implemented them, providing a unified, responsive input model for all devices and input types.
21 | + **[Touchy](https://github.com/HotStudio/touchy)**: Touchy is a jQuery plugin for managing touch events on W3C-compliant browsers, such as Mobile Safari or Android Browser, or any browser that supports the ontouchstart, ontouchmove and ontouchend events.
22 | + **[jGestures](http://jgestures.codeplex.com/)**: A jQuery plugin that enables you to add gesture events just like native jQuery events. Includes event substitution for mouse events.
23 | + **Layout**: The way in which the parts of the website are arranged or laid out.
24 | + **[Snap.js](https://github.com/jakiestfu/Snap.js)**: A Library for creating beautiful mobile shelfs (side menus) in Javascript.
25 | + **[Swipe](https://github.com/thebird/swipe)**: Swipe is the most accurate touch slider.
26 | + **[Swiper](http://idangero.us/swiper/)**: Swiper is a free mobile touch slider with hardware accelerated transitions and native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
27 | + **[jqm-pagination](https://github.com/filamentgroup/jqm-pagination)**: A jQuery Mobile plugin for sequential pagination between pages with support for touch, mouse, and keyboard.
28 | + **[swipeslide](https://github.com/max-power/swipeslide)**: A Zepto Plugin for iOS like swipe navigation.
29 | + **Scrolling**: Native scrolling of the browsers doesn't always fit for mobile websites. There are resources which solve this problem.
30 | + **[Overscroll](https://github.com/azoff/overscroll)**: Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser.
31 | + **[Overthrow](https://www.filamentgroup.com/lab/overthrow.html)**: A framework-independent, overflow: auto polyfill for use in responsive design.
32 | + **[Zynga Scroller](https://github.com/zynga/scroller)**: A pure logic component for scrolling/zooming. It is independent of any specific kind of rendering or event system.
33 | + **[iScroll](http://iscrolljs.com/)**: iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller.
34 | + **[jQuery.pep.js](http://pep.briangonzalez.org/)**: A lightweight plugin for kinetic-drag on mobile/desktop.
35 | + **[jSwipeKinetic](http://jswipekinetic.codeplex.com/)**: A jQuery plugin that enables you to add kinetic scrolling on your touch optimized projects. jSwipeKinetic is build on top of jGestures.
36 | + **[pull-to-refresh.js](https://github.com/visiongeist/pull-to-refresh-js)**: This plugin enables a pull-to-refresh functionality in mobile safari for scrollable block elements with native scrolling on iOS.
37 | + **Tap Acceleration**: Every touch-based mobile browser has an artificial ~300ms delay between you tapping a thing on the screen and the browser considering it a "click", but there are ways to work around this behavior.
38 | + **[300ms Tap Delay, Gone Away](https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away)**: An article by Google describing the 300ms delay and how Chrome 32+ on Anrdoid deals with it.
39 | + **[Hammer.js](http://hammerjs.github.io/)**: Hammer helps you add support for touch gestures to your page, and remove the 300ms delay from clicks.
40 | + **[Tappable](http://cheeaun.github.io/tappable/)**: Tappable is a simple, standalone library to invoke the tap event for touch-friendly web browsers.
41 | + **[fastclick](https://github.com/ftlabs/fastclick)**: FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.
42 | + **Touch Keyboard**: Almost all modern smartphones provide a touch based keyboard for text input. There are some tactics to influence them and work around their quirks.
43 | + **[A Guide To Designing Touch Keyboards](https://www.smashingmagazine.com/2013/08/guide-to-designing-touch-keyboards-with-cheat-sheet/)**: In this article, we will look a bit deeper into the usability issues surrounding touch keyboards, including five design guidelines that will alleviate some of these pains.
44 | + **Working With Sensors**: All mobile devices are equipped with sensors like gyroscope, accelerometers, photometers, magnetometers and so on. Some of them are accessible in a browser through JavaScript.
45 | + **[This End Up: Using Device Orientation](http://www.html5rocks.com/en/tutorials/device/orientation/)**: In this article, we’ll take a look at device orientation and motion events, and use CSS to rotate an image based on the orientation of the device.
46 | + **[lenticular.js](http://lenticular.attasi.com/)**: Tilt-controlled images in the browser.
47 |
48 |
49 | ------------------
50 |
51 | # License
52 |
53 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
54 |
55 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/compatibility/printers.md:
--------------------------------------------------------------------------------
1 | # Printers
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility**
4 |
5 | Manipulation of printer output through CSS.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Tips And Tricks For Print Style Sheets](http://coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/)**: A comprehensive guide for print optimization including background images and colors, expanding external links, QR codes, CSS3 filters for print quality.
13 |
14 |
15 | ------------------
16 |
17 | # License
18 |
19 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
20 |
21 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/compatibility/responsive-web-design-rwd.md:
--------------------------------------------------------------------------------
1 | # Responsive Web Design (RWD)
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility**
4 |
5 | RWD responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **Data Tables**: Tables filled with data don't behave well on small screens. Here are some resources to tame them.
13 | + **[Responsive Data Tables](https://css-tricks.com/responsive-data-tables/)**: Several ideas by Chris Coyier on how to deal with responsive tables.
14 | + **[stacktable.js](http://johnpolacek.github.com/stacktable.js/)**: jQuery plugin for stacking tables on small screens.
15 | + **[Future Friendly Thinking](http://futurefriendlyweb.com/thinking.html)**: We want to make things that are future friendly. The following ideas have been on our minds recently. Help us explore them further or suggest new ones.
16 | + **[How to make a Responsive Newspaper-like layout](http://www.newnet-soft.com/blog/responsive-multi-column)**: The article describes several approaches for creating multi column websites.
17 | + **Images**: Images pose a set of problems on responsive websites: scaling, performance, retina screens and file size.
18 | + **[Adaptive Images](http://adaptive-images.com/)**: Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images.
19 | + **[Choosing A Responsive Image Solution](https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/)**: This article leads you through the basics, and then arms you with the information you’ll need to pick the best responsive image solution for your situation.
20 | + **[Clown Car Technique](https://github.com/estelle/clowncar)**: We can use media queries within SVG to serve up the right image. The beauty of the "Clown Car" technique is that all the logic remains in the SVG file.
21 | + **[How to Use Responsive Images...](http://www.shutterstock.com/blog/2013/05/how-to-use-responsive-images-to-make-your-site-shine-on-any-platform/)**: Engineers at Shutterstock describe different problems and solutions around responsive images.
22 | + **[Picturefill](http://scottjehl.github.io/picturefill/)**: A responsive image polyfill for , srcset, sizes, and more.
23 | + **[Riloadr](https://github.com/tubalmartin/riloadr)**: The goal of this library is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions in order to improve page load time.
24 | + **[Why We Need Responsive Images](https://timkadlec.com/2013/06/why-we-need-responsive-images/)**: Tim Kadlec talks about page weight and responsive image solutions.
25 | + **[imgLiquid](https://github.com/karacas/imgLiquid)**: A jQuery Plugin to resize images to fit in a container.
26 | + **[jQuery Picture](http://jquerypicture.com/)**: jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format.
27 | + **Monitoring Breakpoints**: Triggering JavaScript events on different breakpoints.
28 | + **[Breakpoints.js](http://xoxco.com/projects/code/breakpoints/)**: Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.
29 | + **[Harvey](http://harvesthq.github.io/harvey/)**: Harvey helps you monitor and manage behavior changes by firing an event whenever your media query is activated.
30 | + **[enquire.js](http://wicky.nillia.ms/enquire.js/)**: enquire.js is a lightweight, pure javascript library (with no dependencies) for programmatically responding to media queries.
31 | + **Navigation**: Adapting the website navigation to different screen sizes.
32 | + **[Complex Navigation Patterns](http://bradfrost.com/blog/web/complex-navigation-patterns-for-responsive-design/)**: The article describes some emerging patterns for dealing with complex, lengthy and/or multi-level navigations.
33 | + **[Responsive Navigation On Complex Websites](http://mobile.smashingmagazine.com/2013/09/11/responsive-navigation-on-complex-websites/)**: To illustrate the techniques involved in implementing responsive navigation on a large website, author refers to two actual clients.
34 | + **[Responsive Navigation Patterns](http://bradfrost.com/blog/web/responsive-nav-patterns/)**: The article describes some of the more popular techniques for handling navigation in responsive designs.
35 | + **[Responsive Design Workflow](http://vimeo.com/45915667)**: In this video, Stephen Hay explores at a content-based approach to design workflow which is grounded in our multiplatform reality, not fixed-width Photoshop comps and overproduced wireframes.
36 | + **[Responsive Elements](http://kumailht.com/responsive-elements/)**: Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It's a tiny JavaScript library that you can drop into your projects today.
37 | + **[Responsive Patterns](http://bradfrost.github.io/this-is-responsive/patterns.html)**: A collection of patterns and modules for responsive designs.
38 | + **Text**: Working with text in a context of different viewport sizes.
39 | + **[FitText](http://fittextjs.com/)**: FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
40 | + **[Out Of Words!](http://starburst1977.github.io/out-of-words/)**: The responsive typography framework behind Words App.
41 | + **[Responsive Font Sizing](http://www.newnet-soft.com/blog/responsivefontsizing)**: Making your font size respond to your screen size, easy & maintainable.
42 | + **[Responsive Measure](http://jbrewer.github.com/Responsive-Measure/)**: A jQuery plugin for generating a responsive ideal measure.
43 | + **[Truly Fluid Typography With vh And vw Units](https://www.smashingmagazine.com/2016/05/fluid-typography/)**: This article describes viewport units and other technics to achieve typography which resizes smoothly with the screen.
44 | + **[Viewport Component](https://github.com/pazguille/viewport)**: Viewport is a component to ease viewport management. You can get the dimensions of the viewport and beyond, which can be quite helpful to perform some checks with JavaScript.
45 |
46 |
47 | ------------------
48 |
49 | # License
50 |
51 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
52 |
53 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/compatibility/web-accessibility.md:
--------------------------------------------------------------------------------
1 | # Web Accessibility
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Compatibility**
4 |
5 | Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Notes on Using ARIA in HTML](http://w3c.github.io/aria-in-html/)**: This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification.
13 | + **[The A11Y Project](http://a11yproject.com/)**: A community-driven effort to make web accessibility easier.
14 |
15 |
16 | ------------------
17 |
18 | # License
19 |
20 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
21 |
22 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/contributing.md:
--------------------------------------------------------------------------------
1 | # Contribution Guidelines
2 |
3 | Please ensure your pull request adheres to the following guidelines:
4 |
5 | - Search previous suggestions before making a new one, as yours may be a duplicate.
6 | - Make an individual pull request for each suggestion.
7 | - Use the following format: `[Bookmark Title](link): Description.`
8 | - The title usually consists of several words. For bookmarks of an article or tutorial, use the title of the article.
9 | - The description consists of one-two sentences about the bookmark. It is required.
10 | - Titles should be [capitalized](http://grammar.yourdictionary.com/capitalization/rules-for-capitalization-in-titles.html).
11 | - Additions should be added to the bottom of the relevant category.
12 | - New categories or improvements to the existing categorization are welcome.
13 | - Check your spelling and grammar.
14 | - Make sure your text editor is set to remove trailing whitespace.
15 | - The pull request and commit should have a useful title.
16 |
17 | Thank you for your suggestions!
--------------------------------------------------------------------------------
/ecosystem/news.md:
--------------------------------------------------------------------------------
1 | # News
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Ecosystem**
4 |
5 | Websites & newsletters which provide daily and weekly news related to frontend web development.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[A Drip of JavaScript](http://adripofjavascript.com/)**: One quick JavaScript tip, delivered to your inbox every other week.
13 | + **[CSS Weekly](http://css-weekly.com/)**: Weekly E-Mail roundup of CSS articles, tutorials, experiments and tools
14 | curated by Zoran Jambor.
15 | + **[Deterministic](https://deterministic.curated.co/)**: A weekly digest of interesting news and articles covering functional programming for the web, especially on the front end.
16 | + **[Frontend Dev Weekly](http://frontenddevweekly.com/)**: Front-end developer news, tools and inspiration hand-picked each week.
17 | + **[HTML5 Bookmarks](http://html5bookmarks.com/)**: Daily bookmarks of HTML5 related resources.
18 | + **[HTML5 Weekly](http://html5weekly.com/)**: A once–weekly HTML5 and Web Platform technology roundup. CSS 3, Canvas, WebSockets, WebGL, Native Client, and more.
19 | + **[JavaScript Weekly](http://javascriptweekly.com/)**: A free, once–weekly e-mail round-up of JavaScript news and articles.
20 | + **[Ng-Newsletter](http://www.ng-newsletter.com/)**: The free, weekly newsletter of the best AngularJS content on the web.
21 | + **[Responsive Design Newsletter](http://responsivedesignweekly.com/)**: A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links.
22 | + **[WDRL](https://wdrl.info/)**: A handcrafted, carefully selected list of web development related resources. Curated and published usually every week.
23 | + **[Web Design Weekly](https://web-design-weekly.com/)**: A once a week email with no spam, no rambling. Just pure awesome links to the best news and articles to hit the interweb during the week.
24 | + **[Web Platform Daily](http://webplatformdaily.org/)**: Daily digest of web development news.
25 | + **[Web Tools Weekly](http://webtoolsweekly.com/)**: Web Tools Weekly is a front-end development and web design newsletter with a focus on tools.
26 | + **[echo.js](http://www.echojs.com/)**: Echo JS is a community-driven news site entirely focused on JavaScript development, HTML5, and front-end news.
27 |
28 |
29 | ------------------
30 |
31 | # License
32 |
33 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
34 |
35 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/ecosystem/notable-community-members.md:
--------------------------------------------------------------------------------
1 | # Notable Community Members
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Ecosystem**
4 |
5 | Important engineers, evangelists, architects and other celebrities.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Addy Osmani](https://addyosmani.com/)**: Engineer at Google working on open web tooling.
13 | + **[Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)**: In this free book Addy Osmani explores applying both classical and modern design patterns to the JavaScript programming language.
14 | + **[Patterns For Large-Scale JavaScript Application Architecture](https://addyosmani.com/largescalejavascript/)**: An extensive overview by Addy Osmani of existing architectural solutions in the frontend development field.
15 | + **[Writing Modular JavaScript With AMD, CommonJS & ES Harmony](https://addyosmani.com/writing-modular-js/)**: In this article Addy Osmani reviewes several of the options available for writing modular JavaScript using modern module formats AMD, CommonJS and ES6 Modules.
16 | + **[Alex Sexton](https://alexsexton.com/)**: Alex Sexton is an engineer at Stripe. He is on the Modernizr core team, the jQuery Board of Directors, as well as the Dojo Foundation Board.
17 | + **[Modernizr](https://modernizr.com/)**: It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user.
18 | + **[André Staltz](http://staltz.com/)**: Founder of the cycle.js framework and important contributor to ReactiveX.
19 | + **[Cycle.js and Functional Reactive User Interfaces](https://www.youtube.com/watch?v=uNZnftSksYg)**: In this talk we will discover how Cycle.js is purely reactive and functional, and why it's an interesting alternative to React.
20 | + **[Dynamics of Change: why Reactivity Matters](https://www.youtube.com/watch?v=v68ppDlvHqs)**: In this talk we will see when passive or reactive strategy is advantageous, and how the reactive strategy is a sensible default.
21 | + **[MVI in Cycle.js Docs](http://cycle.js.org/model-view-intent.html)**: André Staltz describes how to refactor an application into MVI pattern.
22 | + **[Nothing New in React and Flux Except One Thing](http://staltz.com/nothing-new-in-react-and-flux-except-one-thing.html)**: Andre Staltz talks about aspects of React and Flux which make them innovative and compelling.
23 | + **[RxMarbles](http://rxmarbles.com/)**: A webapp for experimenting with diagrams of Rx Observables, for learning purposes.
24 | + **[Some Problems with React/Redux](http://staltz.com/some-problems-with-react-redux.html)**: André Staltz goes through the pros and cons of React + Redux.
25 | + **[The Introduction to Reactive Programming](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)**: André Staltz provides a complete introduction to the Reactive Programming and RxJS.
26 | + **[Unidirectional Data Flow Architectures (Talk)](https://vimeo.com/168652278)**: Andre Staltz compares modern architecture patterns including Flux, Redux, Model-View-Intent, Elm Arch and BEST.
27 | + **[What if the User was a Function?](https://www.youtube.com/watch?v=1zj7M1LnJV4)**: In this video André Staltz talks about the input/output cycle between humans and computers and how to take advantage of this model by using FRP and event streams.
28 | + **[Why We Built Xstream](http://staltz.com/why-we-built-xstream.html)**: The authors needed a stream library tailored for Cycle.js. It needs to be “hot” only, small in kB size and it should have only a few and intuitive operators.
29 | + **[Xstream](https://github.com/staltz/xstream)**: An extremely intuitive, small, and fast functional reactive stream library for JavaScript.
30 | + **[Why We Built Xstream](http://staltz.com/why-we-built-xstream.html)**: The authors needed a stream library tailored for Cycle.js. It needs to be “hot” only, small in kB size and it should have only a few and intuitive operators.
31 | + **[Brad Frost](http://bradfrost.com/)**: Web designer, speaker, writer, consultant, musician, and artist in beautiful Pittsburgh.
32 | + **[Atomic Design](http://atomicdesign.bradfrost.com/table-of-contents/)**: Atomic Design discusses the importance of crafting robust design systems, and introduces a methodology for which to create smart, deliberate interface systems.
33 | + **[A More Seamless Workflow — Style Guides for Better Design and Development](https://medium.com/@AshConnolly/a-more-seamless-workflow-style-guides-for-better-design-and-development-639fc55be28c)**: Ash Connolly explains what styles guides are and which benefits they bring to designers and developers.
34 | + **[Atomic Docs](http://atomicdocs.io/)**: Atomic Docs is a styleguide generator and component manager. Atomic Docs is built in PHP. Inspired by Brad Frost's Atomic Design principles.
35 | + **[Atomic Lab](http://steelydylan.github.io/atomic-lab/)**: Template sharing and coding environment based on atomic design.
36 | + **[Responsive Navigation Patterns](http://bradfrost.com/blog/web/responsive-nav-patterns/)**: The article describes some of the more popular techniques for handling navigation in responsive designs.
37 | + **[Brian Lonsdorf](https://github.com/DrBoolean)**: Lead UXE Engineer at Salesforce, JavaScript developer and speaker known for his work in functional programming community.
38 | + **[A Million Ways to Fold in JS](https://www.youtube.com/watch?v=JZSoPZUoR58)**: Brian Lonsdorf provides many functional alternatives to loops in this video.
39 | + **[Debugging Functional](https://medium.com/@drboolean/debugging-functional-7deb4688a08c)**: This post will demonstrate a simple solution that can go a long way to enhance the debugging experience in functional JavaScript applications.
40 | + **[Free Monads Video Series](https://www.youtube.com/watch?v=WH5BrkzGgQY&list=PLK_hdtAJ4KqUWp5LJdLOgkD_8qKW0iAHi&index=1)**: A video series on free monads by Brian Lonsdorf explaining Coyoneda, Free Monad and Interpretors.
41 | + **[Freeky](https://github.com/DrBoolean/freeky)**: Collection of free monads by Brian Lonsdorf.
42 | + **[Hey Underscore, You're Doing It Wrong!](http://functionaltalks.org/2013/05/27/brian-lonsdorf-hey-underscore-youre-doing-it-wrong/)**: In this talk Brian Lonsdorf gently takes a shot at underscore.js for not thinking about currying and partial function application in its library design.
43 | + **[JSAir - Functional and Immutable Design Patterns in JavaScript](https://javascriptair.com/episodes/2015-12-30/)**: An episode of JavaScript Air about "the how and why of functional programming and immutable design patterns in JavaScript" with Dab Abramov and Brian Lonsdorf as guests.
44 | + **[Lenses Quick n’ Dirty](https://vimeo.com/104807358)**: A video by Brian Lonsdorf that introduces lenses.
45 | + **[Lenses.js](https://github.com/DrBoolean/lenses)**: Composable kmett style lenses.
46 | + **[Monad a Day: Reader](https://vimeo.com/105300347)**: Short video by Brian Lonsdorf about the Reader Monad.
47 | + **[Monad a day 1: Reader](https://vimeo.com/105300347)**: A video by Brian Lonsdorf explaining the Reader Monad.
48 | + **[Monad a day 2: Future](https://vimeo.com/106008027)**: Brian Lonsdorf explains the Future monad in this video.
49 | + **[Monad a day 3: State](https://vimeo.com/109984691)**: Brian Lonsdorf explains the State monad in this video.
50 | + **[Mostly Adequate Guide to Functional Programming](https://drboolean.gitbooks.io/mostly-adequate-guide/content/)**: A book by Brian Lonsdorf that introduces algebraic functional programming in JavaScript.
51 | + **[Charles Max Wood](https://twitter.com/cmaxw)**: Podcaster at Devchat.tv, organizer of remote confs such as Angular RC, React RC, Rails RC. Software consultant and developer.
52 | + **[Adventures in Angular](https://devchat.tv/adv-in-angular)**: Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.
53 | + **[JavaScript Jabber](https://devchat.tv/js-jabber/)**: A weekly podcast about JavaScript, including Node.js, Front-End Technologies, Careers, Teams and more.
54 | + **[Chris Coyier](http://chriscoyier.net/)**: Designer at Codepen. Writer at CSS-Tricks. Podcaster at ShopTalk.
55 | + **[Responsive Data Tables](https://css-tricks.com/responsive-data-tables/)**: Several ideas by Chris Coyier on how to deal with responsive tables.
56 | + **[Douglas Crockford](http://www.crockford.com/)**: Computer programmer who is best known for his ongoing involvement in the development of the JavaScript language, for having popularized the data format JSON, and for developing JSLint and JSMin.
57 | + **[Monads and Gonads](https://www.youtube.com/watch?v=dkZFtimgAcM)**: In this video from YUIConf 2012, Douglas Crockford attempts to break the long-standing Monad tutorial curse by explaining the concept and applications of monads in a way that is actually understandable to the audience.
58 | + **[Prototypal Inheritance in JavaScript](http://javascript.crockford.com/prototypal.html)**: An article by Douglas Crockford introducing the Object.create() method and describing the rational behind it.
59 | + **[James Long](http://jlongster.com/)**: Works on Firefox Developer Tools at Mozilla.
60 | + **[A Study on Solving Callbacks with JavaScript Generators](http://jlongster.com/A-Study-on-Solving-Callbacks-with-JavaScript-Generators)**: This article describes how Generators help fight callback hell.
61 | + **[Removing User Interface Complexity, or Why React is Awesome](http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome)**: In this post James Long tries not to evangelize React specifically, but to explain why its technique is profound.
62 | + **[Transducers.js Library by James Long](https://github.com/jlongster/transducers.js)**: A small library for generalized transformation of data (inspired by Clojure's transducers)
63 | + **[Transducers.js Round 2 with Benchmarks](http://jlongster.com/Transducers.js-Round-2-with-Benchmarks)**: Refactored version of Transducers.js, some benchmarks, Laziness, the transformer protocoll.
64 | + **[Transducers.js: A JavaScript Library for Transformation of Data](http://jlongster.com/Transducers.js--A-JavaScript-Library-for-Transformation-of-Data)**: A post announcing the transducers.js library with some explanation.
65 | + **[Transducers.js Round 2 with Benchmarks](http://jlongster.com/Transducers.js-Round-2-with-Benchmarks)**: Refactored version of Transducers.js, some benchmarks, Laziness, the transformer protocoll.
66 | + **[Transducers.js: A JavaScript Library for Transformation of Data](http://jlongster.com/Transducers.js--A-JavaScript-Library-for-Transformation-of-Data)**: A post announcing the transducers.js library with some explanation.
67 | + **[Jonathan Snook](http://snook.ca/about/)**: A web designer and developer who is currently UX Architect at Xero. Former lead frontend developer at Shopify.
68 | + **[SMACSS](https://smacss.com/book/)**: SMACSS (pronounced “smacks”) is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
69 | + **[Mikito Takada (mixu)](http://mixu.net/)**: Software engineer at Stripe.
70 | + **[Learn CSS Layout the pedantic way](http://book.mixu.net/css/)**: Walks you through every major concept in CSS layout, without trying to simplify away the underlying mechanisms described in the CSS 2.1 and flexbox specs.
71 | + **[Single Page Apps in Depth](http://singlepageappbook.com/)**: This free book is what I wanted when I started working with single page apps. It's not an API reference on a particular framework, rather, the focus is on discussing patterns, implementation choices and decent practices.
72 | + **[Nicholas C. Zakas](https://www.nczonline.net/about/)**: Former principal front-end engineer at Yahoo! and YUI developer. Leads a team of frontend engineers at Box now.
73 | + **[Box Tech Talk: Scalable JavaScript Application Architecture](https://www.youtube.com/watch?v=mKouqShWI4o)**: A video by Nicholas Zakas (2012) about JavaScript Architecture.
74 | + **[Scalable JavaScript Application Architecture](https://www.youtube.com/watch?v=vXjVFPosQHw)**: In this video (2011) Nicholas Zakas discusses frontend architecture for complex, modular web applications with significant JavaScript elements.
75 | + **[T3](http://t3js.org/)**: T3 is a minimalist JavaScript framework sponsored by Box Inc. that provides core structure to code.
76 | + **[Understanding ECMAScript 6](https://leanpub.com/understandinges6/read)**: Free (as in pay what you want) E-Book by Nicholas C. Zakas describing the new features in EcmaScript 6.
77 | + **[Nicolas Gallagher](http://nicolasgallagher.com/)**: Frontend Engineer at Twitter.
78 | + **[Normalize.css](http://necolas.github.io/normalize.css/)**: A modern, HTML5-ready alternative to CSS resets.
79 | + **[Pete Hunt](https://github.com/petehunt)**: Co-founder & CEO @HelloSmyte. Ex-FB and Instagram. Worked on React.js.
80 | + **[Functional DOM Programming](https://medium.com/@floydophone/functional-dom-programming-67d81637d43)**: One of the earliest intros to React and its purpose by Pete Hunt.
81 | + **[React: Rethinking best practices (2013)](https://www.youtube.com/watch?v=x7cQ3mrcKaY)**: A video introduction to React by Pete Hunt.
82 | + **[Why did we build React?](http://facebook.github.io/react/blog/2013/06/05/why-react.html)**: Pete Hunt tries to explain why Facebook devs built React in the first place.
83 |
84 |
85 | ------------------
86 |
87 | # License
88 |
89 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
90 |
91 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/ecosystem/podcasts.md:
--------------------------------------------------------------------------------
1 | # Podcasts
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Ecosystem**
4 |
5 | A podcast is a form of digital media that consists of an episodic series of audio, video, digital radio, PDF, or ePub files subscribed to and downloaded automatically through web syndication or streamed online to a computer or mobile device.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Adventures in Angular](https://devchat.tv/adv-in-angular)**: Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.
13 | + **[CDNify Podcasts](https://itunes.apple.com/us/podcast/cdnify/id786191888)**: The CDNify podcast covers all things tech, startup, web performance and acceleration.
14 | + **[JavaScript Air](https://javascriptair.com/)**: The live broadcast podcast all about JavaScript.
15 | + **[JavaScript Jabber](https://devchat.tv/js-jabber/)**: A weekly podcast about JavaScript, including Node.js, Front-End Technologies, Careers, Teams and more.
16 | + **[Non Breaking Space Show](http://goodstuff.fm/nbsp)**: Seeking out the best, brightest, and smartest creative people on digital art, design, and development. From workflows to life hacks, we examine why they do what they do and how they did it.
17 | + **[Shop Talk Show](http://shoptalkshow.com/)**: An internet radio show about the internet starring Dave Rupert and Chris Coyier.
18 | + **[The Big Web Show](http://5by5.tv/bigwebshow)**: The award winning Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more. It's everything web that matters.
19 | + **[The Web Ahead](http://5by5.tv/webahead)**: Conversations with world experts on changing technologies and future of the web. The Web Ahead is your shortcut to keeping up.
20 | + **[Web Security Warrior](https://devchat.tv/web-sec-warriors)**: Web Security Warriors is a weekly discussion by developers about keeping websites, data, servers, and other internet outposts secure.
21 |
22 |
23 | ------------------
24 |
25 | # License
26 |
27 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
28 |
29 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/cascading-style-sheets-css.md:
--------------------------------------------------------------------------------
1 | # Cascading Style Sheets (CSS)
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | CSS are a stylesheet language used to describe the presentation of a document written in HTML or XML. It describes how elements should be rendered on screen, on paper, in speech, or on other media.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **CSS Coding Conventions**: Coding conventions are a set of guidelines for a specific programming language that recommend programming style, practices and methods for each aspect of a piece program written in this language.
13 | + **[CSS Guidelines](http://cssguidelin.es/)**: High-level advice and guidelines for writing sane, manageable, scalable CSS.
14 | + **[Idiomatic CSS](https://github.com/necolas/idiomatic-css)**: The following document outlines a reasonable style guide for CSS development. These guidelines strongly encourage the use of existing, common, sensible patterns.
15 | + **[Maintainable CSS](http://maintainablecss.com/)**: MaintainableCSS is an approach to writing modular, scalable and of course, maintainable CSS.
16 | + **[Primer](http://primercss.io/)**: Primer is GitHub’s internal CSS framework. It includes basic global styling for typography, small components like buttons and tabs, and our general guidelines for writing HTML and CSS.
17 | + **[Wordpress CSS Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/)**: The purpose of the WordPress CSS Coding Standards is to create a baseline for collaboration and review within various aspects of the WordPress open source project and community, from core code to themes to plugins.
18 | + **[CSS Variables W3C Editor's Draft](https://drafts.csswg.org/css-variables/)**: This module introduces cascading variables as a new primitive value type that is accepted by all CSS properties, and custom properties for defining them.
19 | + **Flexbox**: The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size.
20 | + **[5 Flexbox Techniques You Need to Know About](http://tutorialzine.com/2016/04/5-flexbox-techniques-you-need-to-know-about/)**: In this article we’re going to take a look at five flexbox approaches to solving common CSS layout problems. We’ve also included practical examples to showcase real life scenarios in which these techniques are applied.
21 | + **[A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)**: Chris Coyer provides a great reference to the flexbox features with code examples.
22 | + **[A Visual Guide to CSS3 Flexbox Properties](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)**: Rather that explaining how the flex properties work, this guide will focus on how the flex properties affect the layout in a visual way.
23 | + **[CSS Flexible Box Layout Module Level 1](https://www.w3.org/TR/css-flexbox-1/)**: W3C specification for CSS flexbox.
24 | + **[Flex-Grow is weird. Or is it?](https://css-tricks.com/flex-grow-is-weird/)**: Manuel Matuzovic describes how flex-grow works, including it's weird quirks. Then he goes into several examples on how common layout patterns may be implemented using flex-grow and flex-basis.
25 | + **[Flexbox Froggy](http://flexboxfroggy.com/)**: A fun way to learn Flexbox by playing a game where you help Froggy and friends to arrive at a lilypad.
26 | + **[Flexbox Patterns](http://www.flexboxpatterns.com/)**: These interactive examples will show you practical ways to use Flexbox to build UI components.
27 | + **[Flexbugs](https://github.com/philipwalton/flexbugs)**: This repository is a community-curated list of flexbox issues and cross-browser workarounds for them.
28 | + **[How To Center in CSS](http://howtocenterincss.com/)**: This tool consolidates the many ways of centering a div and gives you the code you need for each situation.
29 | + **[The Complete Guide to Centering a DIV](http://www.tipue.com/blog/center-a-div/)**: The aim of this article is to show how, with a few CSS tricks, any div can be centered; horizontally, vertically or both. And within the page or a div.
30 | + **[Understanding border-image](https://css-tricks.com/understanding-border-image/)**: The new CSS3 property border-image can allow you to create flexible boxes with custom borders with a single div and a single image.
31 | + **[What No One Told You About Z-Index](http://philipwalton.com/articles/what-no-one-told-you-about-z-index/)**: The problem with z-index is that it’s not complicated, but it if you’ve never taken the time to read its specification, there are almost certainly crucial aspects that you’re completely unaware of.
32 |
33 |
34 | ------------------
35 |
36 | # License
37 |
38 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
39 |
40 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/document-object-model-dom.md:
--------------------------------------------------------------------------------
1 | # Document Object Model (DOM)
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | The DOM is a programming interface for HTML, XML and SVG documents. It defines methods that allow access to the tree, so that they can change the document structure, style and content.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **Document Events**: DOM event model is a generic event system and a set of standard modules of events for user interface control and document mutation notifications
13 | + **[An Introduction To DOM Events](https://www.smashingmagazine.com/2013/11/an-introduction-to-dom-events/)**: Wilson Page introduces the basics of working with DOM events, then delves into their inner workings, explaining how we can make use of them to solve common problems.
14 | + **[DOM Level 2 Event Model](https://www.w3.org/TR/DOM-Level-2-Events/events.html)**: W3C specification section for DOM Level 2 Events.
15 | + **[Gator](https://craig.is/riding/gators)**: Gator is a small (~0.8 kb minified + gzipped), simple, standalone, event delegation library.
16 | + **Overview**: High level guides, articles and documents about DOM.
17 | + **[DOM Features You Didn’t Know Existed](http://www.impressivewebs.com/dom-features-you-didnt-know-existed-video-slides/)**: Louis Lazaris talks about DOM Features you probably don't know.
18 | + **[DOM Reference at the MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)**: Complete reference of the DOM provided by the Mozilla Development Network.
19 | + **[Document Object Model (DOM) Technical Reports](https://www.w3.org/DOM/DOMTR)**: Specifications by the W3C.
20 | + **[Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)**: This section provides a brief conceptual introduction to the DOM: what it is, how it provides structure for HTML and XML documents, how you can access it, and how this API presents the reference information and examples.
21 |
22 |
23 | ------------------
24 |
25 | # License
26 |
27 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
28 |
29 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/hypertext-markup-language-html.md:
--------------------------------------------------------------------------------
1 | # HyperText Markup Language (HTML)
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Dive Into HTML5 (Book)](http://diveintohtml5.info/)**: Dive Into HTML5 elaborates on a hand-picked selection of features from the HTML5 specification and other fine standards.
13 | + **[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.xml)**: This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure.
14 | + **[HEAD](https://github.com/joshbuchea/HEAD)**: A list of everything that could go in the of your document.
15 | + **[Idiomatic HTML](https://github.com/necolas/idiomatic-html)**: The following document outlines a reasonable style guide for HTML development. These guidelines strongly encourage the use of existing, common, sensible patterns. They should be adapted as needed to create your own style guide.
16 | + **Video & Audio**: Use the HTML video and audio element to embed video content in a document.
17 | + **[Bringing Production Video To The Web](https://www.smashingmagazine.com/2016/04/html5-media-source-extensions-bringing-production-video-web/)**: Stefan Lederer gives you a good overview of the state and future of video on the web.
18 | + **[Wordpress HTML Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/html/)**: Coding conventions for WordPress.
19 |
20 |
21 | ------------------
22 |
23 | # License
24 |
25 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
26 |
27 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/hypertext-transfer-protocol-http.md:
--------------------------------------------------------------------------------
1 | # Hypertext Transfer Protocol (HTTP)
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Best Practice for HTTP2 Front-End Deployments](http://blog.cloud66.com/best-practice-for-http2-front-end-deployments/)**: This post describes how to set up and use the new HTTP/2 protocol.
13 | + **[Ideal HTTP Performance](https://www.mnot.net/blog/2016/04/22/ideal-http)**: This post talks about the design of the HTTP protocol, it's performance drawbacks and how to work around them.
14 |
15 |
16 | ------------------
17 |
18 | # License
19 |
20 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
21 |
22 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/javascript-ecmascript.md:
--------------------------------------------------------------------------------
1 | # JavaScript (EcmaScript)
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | JavaScript is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites. It is defined by ECMAScript standard.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **Control Flow & Error Handling**: Statements, that you can use to incorporate interactivity in your application.
13 | + **[A Guide to Proper Error Handling in JavaScript](https://www.sitepoint.com/proper-error-handling-javascript/)**: Camilo Reyes describes ways to handle Exceptions and asynchronous errors in JavaScript.
14 | + **Enhancement Libraries**: Libraries that attempt to improve and enhance the vanilla JavaScript language by providing utility functions.
15 | + **[Flow](https://flowtype.org/)**: Flow is a static type checker for JavaScript. It can be used to catch common bugs in JavaScript programs before they run.
16 | + **[Lodash](https://lodash.com/)**: A modern JavaScript utility library delivering modularity, performance, & extras.
17 | + **[MOUT](http://moutjs.com/)**: MOUT provides many helper methods similar to those found on other languages standard libraries (ie. Python, Ruby, PHP).
18 | + **[Ramda](http://ramdajs.com/)**: A practical library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.
19 | + **Practical Ramda - Functional Programming Examples**: Tom MacWright gives some practical examples of Ramda usage.
20 | + **[RubyJS](http://rubyjs.org/)**: RubyJS is a JavaScript implementation of all methods from Ruby classes like Array, String, Numbers, Time and more.
21 | + **Functions**: A function is a JavaScript procedure—a set of statements that performs a task or calculates a value.
22 | + **[Closures explained by Jim Ley](http://jibbering.com/faq/notes/closures/)**: Explanation of closures in JavaScript.
23 | + **[Let’s Learn JavaScript Closures](https://medium.freecodecamp.com/lets-learn-javascript-closures-66feb44f6a44)**: So this post will be dedicated to the nuts and bolts of how and why closures work the way they do.
24 | + **[MDN Guide Chapter about Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)**: Defining functions, scope, closures, arguments, parameters, arrow functions and predefined functions.
25 | + **[MDN Reference for Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)**: Defining functions, arguments, parameters, methods, block-level functions and browser compatibility.
26 | + **Generators**: Generators allow you to define an iterative algorithm by writing a single function which can maintain its own state.
27 | + **[A Closer Look at Generators Without Promises](http://jlongster.com/A-Closer-Look-at-Generators-Without-Promises)**: Author looks at libraries for asynchronous programming with generators but without promises.
28 | + **[A Study on Solving Callbacks with JavaScript Generators](http://jlongster.com/A-Study-on-Solving-Callbacks-with-JavaScript-Generators)**: This article describes how Generators help fight callback hell.
29 | + **[Callbacks vs Coroutines](https://medium.com/@tjholowaychuk/callbacks-vs-coroutines-174f1fe66127)**: In this post TJ Holowaychuk goes through hist experiences with coroutines and why he thinks they’re a great tool.
30 | + **[Coroutine Event Loops in Javascript](https://x.st/javascript-coroutines/)**: An intriguing use of coroutines is to implement event loops as an alternative to callback functions. This is particularly relevant to Javascript, where the use of callbacks is pervasive.
31 | + **[Coroutine vs Continuation vs Generator](http://stackoverflow.com/questions/715758/coroutine-vs-continuation-vs-generator)**: StackOverflow Discussion about the difference between Couroutines, Continuations and Generators.
32 | + **[Regenerator](https://github.com/facebook/regenerator)**: This package implements a source transformation that takes the proposed syntax for generators/yield from future versions of JS and spits out efficient JS-of-today (ES5) that behaves the same way.
33 | + **Grammar and Types**: JavaScript's basic grammar, variable declarations, data types scope, hoisting and literals.
34 | + **[Detailed Overview of Well-Known Symbols](https://rainsoft.io/detailed-overview-of-well-known-symbols/)**: Well-known symbols are used by built-in JavaScript algorithms. This article guides through the list of well-known symbols and explains how to use them comfortable in your code.
35 | + **[Grammar and Types Chapter on the MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types)**: This chapter discusses JavaScript's basic grammar, variable declarations, data types and literals.
36 | + **[Variable Hoisting Explained](http://bytearcher.com/articles/variable-hoisting-explained/)**: The author explains how hoisting works in JavaScript including variable declarations and ES6 let operator.
37 | + **[Variables Lifecycle: Why Let is not Hoisted](https://rainsoft.io/variables-lifecycle-and-why-let-is-not-hoisted/)**: ES2015 provides a different and improved mechanism for let. It demands stricter variable declaration practices and as result better code quality. Let's dive into more details about this process.
38 | + **JS Coding Conventions**: Coding conventions are a set of guidelines for a specific programming language that recommend programming style, practices and methods for each aspect of a piece program written in this language.
39 | + **[Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)**: A reasonable approach to JavaScript by Airbnb.
40 | + **[Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)**: JavaScript is the main client-side scripting language used by many of Google's open-source projects. This style guide is a list of dos and don'ts for JavaScript programs.
41 | + **[Idiomatic.js](https://github.com/rwaldron/idiomatic.js/)**: The following list outlines the practices that Rick Waldron uses in all code that he is the original author of.
42 | + **[JavaScript Standard Style](http://standardjs.com/)**: A set of modules to check and improve the style of your code.
43 | + **[WordPress JavaScript Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/)**: JavaScript has become a critical component in developing WordPress-based applications (themes and plugins) as well as WordPress core. Standards are needed for formatting and styling JavaScript code.
44 | + **Objects**: An object is a software bundle of related state and behavior. Software objects are often used to model the real-world objects that you find in everyday life.
45 | + **[ECMA-262-3 in detail: OOP - The general theory](http://dmitrysoshnikov.com/ecmascript/chapter-7-1-oop-general-theory/)**: In this article we consider major aspects of object-oriented programming in ECMAScript. Much attention is given to theoretical aspects to see these processes from within.
46 | + **[Gentle explanation of this keyword in JavaScript](http://rainsoft.io/gentle-explanation-of-this-in-javascript/)**: This article is focused on the invocation explanation, how the function call influences this and demonstrates the common pitfalls of identifying the context.
47 | + **[OOP In JavaScript: What You NEED to Know](http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/)**: In this article, we are concerned with only Inheritance and Encapsulation since only these two concepts apply to OOP in JavaScript.
48 | + **[Object-Oriented Design in TypeScript / ES6](http://blog.wolksoftware.com/about-classes-inheritance-and-object-oriented-design-in-typescript-and-es6)**: The author dives into advanced OOP topics such as functional programming principles, inheritance and inversion of control.
49 | + **[Prototypal Inheritance in JavaScript](http://javascript.crockford.com/prototypal.html)**: An article by Douglas Crockford introducing the Object.create() method and describing the rational behind it.
50 | + **[Prototypal Object-Oriented Programming using JavaScript](http://alistapart.com/article/prototypal-object-oriented-programming-using-javascript)**: Mehdi Maujood describes the prototypical OO style and compares it to classes in JavaScript.
51 | + **[Prototypes and Inheritance in JavaScript](https://msdn.microsoft.com/en-us/magazine/ff852808.aspx)**: This article tries to demystify the concept of prototypes in JavaScript. It shows how prototypes allow objects to inherit functionality from other objects, an approach to building objects using the new operator and a constructor function.
52 | + **Overview**: General, high level guides and introductions to the JavaScript language.
53 | + **[Eloquent JavaScript (Book)](http://eloquentjavascript.net/)**: A comprehensive book about JavaScript, the language, the browser and Node.js.
54 | + **[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/)**: JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs.
55 | + **[JavaScript Guide by Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)**: The JavaScript Guide shows you how to use JavaScript and gives an overview of the language.
56 | + **[Simplified JavaScript Jargon](http://jargon.js.org/)**: A community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words.
57 | + **[Understanding ECMAScript 6](https://leanpub.com/understandinges6/read)**: Free (as in pay what you want) E-Book by Nicholas C. Zakas describing the new features in EcmaScript 6.
58 | + **[What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ)**: Philip Roberts, in this video, tries to create an intuitive understanding of what happens when JavaScript runs. He talks about the call stack, event loop, callback queue and other concepts.
59 | + **[You Dont Know JS](https://github.com/getify/You-Dont-Know-JS)**: These books each take on specific core parts of the language which are most commonly misunderstood or under-understood, and dive very deep and exhaustively into them.
60 | + **[Promises](https://www.promisejs.org/)**: A promise represents the result of an asynchronous operation.
61 | + **[Bluebird.js](http://bluebirdjs.com/)**: Bluebird is a full featured promise library with unmatched performance.
62 | + **[Difference between a Promise and a Task](https://glebbahmutov.com/blog/difference-between-promise-and-task/)**: Once you have a Promise instance the action has already started. Task instance does not run until someone calls .fork()
63 | + **[ECMAScript Promises Spec](https://tc39.github.io/ecma262/#sec-promise-objects)**: Standard ES specification for promises.
64 | + **[MDN page on Promises](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)**: The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future.
65 | + **[The Promises/A+ Spec](https://promisesaplus.com/)**: An open standard for sound, interoperable JavaScript promises—by implementers, for implementers.
66 | + **[Tracking Unhandled Rejected Promises](http://www.2ality.com/2016/04/unhandled-rejections.html)**: In Promise-based asynchronous code, rejections are used for error handling. One risk is that rejections may get lost, leading to silent failures.
67 | + **[What is Promise.try, and why does it matter?](http://cryto.net/~joepie91/blog/)**: In this brief article Sven Slootweg provides a better explanation of what Promise.try is, and why you should always use it, without exceptions.
68 | + **[What's The Point Of Promises?](http://www.telerik.com/blogs/what-is-the-point-of-promises)**: The point of promises is to represent the eventual resulting value from an operation, but the reason to use them is to better parallel synchronous operations and to solve the callback hell.
69 |
70 |
71 | ------------------
72 |
73 | # License
74 |
75 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
76 |
77 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/javascript-object-notation-json.md:
--------------------------------------------------------------------------------
1 | # JavaScript Object Notation (JSON)
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[JSON-LD](http://json-ld.org/)**: JSON-LD is a lightweight Linked Data format. It is based on the already successful JSON format and provides a way to help JSON data interoperate at Web-scale.
13 |
14 |
15 | ------------------
16 |
17 | # License
18 |
19 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
20 |
21 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/scalable-vector-graphics-svg.md:
--------------------------------------------------------------------------------
1 | # Scalable Vector Graphics (SVG)
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | An XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Tools And Resources For Editing, Converting And Optimizing SVGs](https://www.smashingmagazine.com/2016/04/tools-and-resources-for-editing-converting-and-optimizing-svgs/)**: This article will provide you with tools and resources to simplify editing, converting, optimizing, and delivering SVGs.
13 |
14 |
15 | ------------------
16 |
17 | # License
18 |
19 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
20 |
21 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/service-workers.md:
--------------------------------------------------------------------------------
1 | # Service Workers
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | A method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Instant Loading Web Apps With An Application Shell Architecture](https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73)**: Addy Osmani describes how to leverage the Service Worker API to drastically improve the loading speed of your web application.
13 | + **[Introduction to Service Worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/)**: Matt Gaunt introduces the main features of Service Worker API in this article.
14 | + **[Is ServiceWorker Ready?](https://jakearchibald.github.io/isserviceworkerready/)**: Tracks the implementation status across the main browsers.
15 |
16 |
17 | ------------------
18 |
19 | # License
20 |
21 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
22 |
23 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/templating-languages-and-engines.md:
--------------------------------------------------------------------------------
1 | # Templating Languages and Engines
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | Template engines are tools to separate program-logic and presentation into two independent parts. This makes the development of both logic and presentation easier, improves flexibility and eases modification and maintenance.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Dot.js](http://olado.github.io/doT/)**: The fastest + concise javascript template engine for Node.js and browsers.
13 | + **[Dust.js by LinkedIn](http://www.dustjs.com/)**: Dust is a Javascript templating engine. It inherits its look from the ctemplate family of languages, and is designed to run asynchronously on both the server and the browser.
14 | + **[Dōmo](http://jed.github.io/domo/)**: dōmo lets you write HTML markup and CSS styles in JavaScript syntax. It is a simpler and easier alternative to template engines and CSS pre-processors.
15 | + **[HyperScript](https://github.com/dominictarr/hyperscript)**: Create HyperText with JavaScript, on client or server.
16 | + **[Marko](https://github.com/marko-js/marko)**: Marko is a really fast and lightweight HTML-based templating engine from eBay. Marko runs on Node.js and in the browser and it supports streaming, async rendering and custom tags.
17 | + **[Mustache](http://mustache.github.io/)**: Mustache is a Logic-less template language. There are no if statements, else clauses, or for loops. Instead there are only tags.
18 | + **[Handlebars.js](https://github.com/wycats/handlebars.js/)**: Handlebars.js is an extension to the Mustache templating language. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.
19 | + **[Hogan.js](http://twitter.github.io/hogan.js/)**: Hogan.js is a 3.4k JS templating engine developed at Twitter. It was developed against the mustache test suite.
20 | + **[Mustache Specification](http://mustache.github.io/mustache.5.html)**: This document explains the different types of Mustache tags.
21 | + **[Walrus](http://documentup.com/jeremyruppel/walrus/)**: Walrus is a templating library inspired by mustache, handlebars, ejs and friends,
22 | but with a couple of important differences in philosophy and style.
23 | + **[mustache.js](https://github.com/janl/mustache.js)**: mustache.js is an implementation of the mustache template system in JavaScript.
24 | + **[templayed.js](http://archan937.github.io/templayed.js/)**: The fastest and smallest Mustache compliant Javascript templating library written in 1806 bytes.
25 | + **[Nunjucks](http://mozilla.github.io/nunjucks/)**: A rich and powerful templating language for JavaScript.
26 | + **[Pithy](https://github.com/caolan/pithy)**: An internal DSL for generating HTML in JavaScript.
27 | + **[T](https://github.com/gcao/T.js)**: T.js is a template engine that uses simple Javascript data structure to represent html/xml data.
28 | + **[Template7](http://idangero.us/template7/)**: Template7 is a mobile-first JavaScript template engine with Handlebars-like syntax. It is used as default template engine in Framework7.
29 | + **[Transparency](http://leonidas.github.io/transparency/)**: Transparency is a minimal template engine for jQuery. It maps JSON objects to DOM elements with zero configuration.
30 | + **[Weld](https://github.com/tmpvar/weld)**: Weld binds data to markup, and can generate markup based on your data. There's no special syntax or data reshaping required.
31 |
32 |
33 | ------------------
34 |
35 | # License
36 |
37 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
38 |
39 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/transpiled-languages.md:
--------------------------------------------------------------------------------
1 | # Transpiled Languages
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | Abstract languages converted to native, browser supported standards like JavaScript or CSS.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[ClojureScript](https://github.com/clojure/clojurescript)**: ClojureScript is a compiler for Clojure that targets JavaScript. It is designed to emit JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.
13 | + **[Dart](https://www.dartlang.org/)**: Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps compiled to JavaScript
14 | + **[Elm](http://elm-lang.org/)**: Elm is a functional programming language for declaratively creating web browser-based graphical user interfaces.
15 | + **[The Elm Architecture](http://guide.elm-lang.org/architecture/index.html)**: The Elm Architecture is a simple pattern for infinitely nestable components. It is great for modularity, code reuse, and testing.
16 | + **[Less](http://lesscss.org/)**: Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
17 | + **[PureScript](http://www.purescript.org/)**: PureScript is a strongly, statically typed language which compiles to JavaScript. It is written in and inspired by Haskell.
18 | + **[Sass](http://sass-lang.com/)**: Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
19 | + **[Scala.js](http://www.scala-js.org/)**: A Scala to JavaScript compiler.
20 | + **[Stylus](http://stylus-lang.com/)**: Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.
21 | + **[TypeScript](https://www.typescriptlang.org/)**: A typed superset of JavaScript that compiles to plain JavaScript. Popular in the Angular and Microsoft community.
22 | + **[Angular 2: Why TypeScript?](https://vsavkin.com/writing-angular-2-in-typescript-1fa77c78d8e8)**: Angular 2 is written in TypeScript. In this article Victor Savkin talks about why they made the decision.
23 | + **[InversifyJS](https://github.com/inversify/InversifyJS)**: A powerful and lightweight inversion of control container for JavaScript & Node.js apps powered by TypeScript.
24 | + **[Safety in the Absence of Types](https://vsavkin.com/typescript-how-to-be-safe-even-if-you-cannot-type-it-31eb08485fe6)**: Victor Savking talks about the limitation of TypeScript's static type checker and how to mitigate them.
25 |
26 |
27 | ------------------
28 |
29 | # License
30 |
31 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
32 |
33 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/uniform-resource-identifier-uri.md:
--------------------------------------------------------------------------------
1 | # Uniform Resource Identifier (URI)
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | URI is a string of characters used to identify a resource. The most common form of URI is the Uniform Resource Locator (URL).
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Architecture of the World Wide Web: Identification](https://www.w3.org/TR/webarch/#identification)**: This architecture document by W3C discusses the core design components of the Web. They are identification of resources, representation of resource state, and the protocols that support the interaction between agents and resources in the space.
13 | + **[SpeakingURL](https://github.com/pid/speakingurl)**: This module aims to transliterate the input string and create a so-called Semantic or Speaking URL.
14 | + **[URI.js](http://medialize.github.io/URI.js/)**: URI.js is a javascript library for working with URLs. It offers a "jQuery-style" API to read and write all regular components and a number of convenience methods.
15 |
16 |
17 | ------------------
18 |
19 | # License
20 |
21 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
22 |
23 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/languages-protocols-browser-apis/webassembly.md:
--------------------------------------------------------------------------------
1 | # WebAssembly
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Languages, Protocols, Browser APIs**
4 |
5 | WebAssembly is meant to fill a place that JavaScript has been forced to occupy up to now: a low-level code representation that can serve as a compiler target.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[7 Things You Should Know About WebAssembly](https://auth0.com/blog/2015/10/14/7-things-you-should-know-about-web-assembly/)**: In this post we will explore seven key facts about WebAssembly, one of the biggest changes the web will experience in the coming years.
13 |
14 |
15 | ------------------
16 |
17 | # License
18 |
19 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
20 |
21 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/user-interface-components/buttons.md:
--------------------------------------------------------------------------------
1 | # Buttons
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components**
4 |
5 | The term button refers to any graphical control element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes, like confirming an action.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Quantum Paper Buttons](https://github.com/nashvail/Quttons)**: With this plugin you can hide any div behind a Quantum Paper Button or Qutton. Qunatum Paper is a digital paper that can change its size, shape and color to accommodate new content. Quantum paper is part of Google's new Material Design language.
13 | + **[Sharingbuttons.io](http://sharingbuttons.io/)**: This generator outputs social media sharing buttons that do not use JavaScript, don't block your website from rendering, are accessible and don't track the user.
14 |
15 |
16 | ------------------
17 |
18 | # License
19 |
20 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
21 |
22 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/user-interface-components/code.md:
--------------------------------------------------------------------------------
1 | # Code
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components**
4 |
5 | Code viewers and editors designed for embedding inside a website.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Behave.js](http://jakiestfu.github.io/Behave.js/)**: Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in.
13 | + **[CodeMirror](http://codemirror.net/)**: CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.
14 | + **[Intelligist](http://srobbin.com/jquery-plugins/intelligist/)**: A jQuery plugin that makes it easy to share and demo code in-page, using GitHub gists.
15 | + **[Prism](http://prismjs.com/)**: Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
16 | + **[Rainbow](https://craig.is/making/rainbows)**: Rainbow is a code syntax highlighting library written in Javascript.
17 | It was designed to be lightweight, easy to use, and extendable.
18 | It is completely themable via CSS.
19 | + **[ansi_up](https://github.com/drudru/ansi_up)**: A javascript library that converts text with ANSI terminal codes into colorful HTML
20 | + **[tabIndent.js](http://julianlam.github.io/tabIndent.js/)**: tabIndent.js enhances a textarea, so that the tab key no longer takes you to the next input, but rather, acts like a text editor by inserting a tab character.
21 |
22 |
23 | ------------------
24 |
25 | # License
26 |
27 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
28 |
29 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/user-interface-components/forms.md:
--------------------------------------------------------------------------------
1 | # Forms
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components**
4 |
5 | A HTML form on a web page allows a user to enter data that is sent to a server for processing. Web users fill out the forms using checkboxes, radio buttons, or text fields.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[ALAJAX](https://github.com/alaabadran/ALAJAX)**: A jQuery plugin to convert normal HTML forms into AJAX forms simply. It Ajaxifys your HTML Form with this plugin. No change will be required on Server-Side.
13 | + **[Fields.js](http://schneiderik.github.io/fields/)**: An abstract way of interacting with fields. Fields.js creates collections of fields. Each field is constantly evaluated for validity, and is accessible through the collection.
14 | + **[Grid Forms](http://kumailht.com/gridforms/)**: A tiny Javascript/CSS framework that helps you make forms on grids with ease.
15 | + **[HTML5Forms.js](https://github.com/zoltan-dulac/html5Forms.js)**: HTML5Forms.js is a JavaScript polyfill that implements a subset of the HTML5 Forms module in all browsers. The script will only add support for the different parts of the module when there doesn't exist a native implementation.
16 | + **[Ladda](https://github.com/hakimel/Ladda)**: Buttons with built-in loading indicators.
17 | + **[Native form elements](http://nativeformelements.com/)**: This is what every HTML5 form element looks like on your current operating system and browser.
18 | + **[Redux Form](https://github.com/erikras/redux-form)**: A Higher Order Component using react-redux to keep form state in a Redux store.
19 | + **Serializers**: Libraries for collecting form data in JavaScript.
20 | + **[form2js](https://github.com/maxatwork/form2js)**: Convenient way to collect structured form data into JavaScript object.
21 | + **[jQuery.serializeObject](https://github.com/hongymagic/jQuery.serializeObject)**: Encode a set of form elements as a JSON object for manipulation/submission.
22 | + **[jquery-serialize-object](https://github.com/macek/jquery-serialize-object)**: Adds the method serializeObject to jQuery, to perform complex form serialization into JavaScript objects.
23 | + **[jquery.serializeJSON](https://github.com/danheberden/jquery-serializeForm)**: Make an object out of form elements.
24 | + **[serializeForm](https://github.com/danheberden/jquery-serializeForm)**: jQuery plugin to serialize form elements into an object.
25 | + **Validation**: A form validation behavior checks data against a set of criteria before passing it along to the server.
26 | + **[Form Validation UX in HTML and CSS](https://css-tricks.com/form-validation-ux-html-css/)**: Chris Coyier describes how to implement form validation with just HTML attributes and some CSS trickery.
27 | + **[Mailcheck.js](https://github.com/mailcheck/mailcheck)**: The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address.
28 | + **[One Validation](https://github.com/One-com/one-validation)**: This is a collection of regular expressions for general validation purposes. The basic design concept is to split up the regexes into semantic parts of the pattern to match.
29 | + **[Parsley](https://github.com/guillaumepotier/Parsley.js)**: JavaScript form validation, without actually writing a single line of JavaScript!
30 | + **[jQuery Super Labels Plugin](https://github.com/remybach/jQuery.superLabels)**: This plugin was born out of the need to use the label-over-field method for forms.
31 |
32 |
33 | ------------------
34 |
35 | # License
36 |
37 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
38 |
39 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/user-interface-components/galeries-and-image-sliders.md:
--------------------------------------------------------------------------------
1 | # Galeries & Image Sliders
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components**
4 |
5 | A sophisticated way to present a collection of images on your website.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Lightgallery.js](https://github.com/sachinchoolur/lightgallery.js/)**: Full featured JavaScript Lightbox gallery without any dependencies.
13 |
14 |
15 | ------------------
16 |
17 | # License
18 |
19 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
20 |
21 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/user-interface-components/grid.md:
--------------------------------------------------------------------------------
1 | # Grid
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components**
4 |
5 | CSS Grid Layout Systems.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Bourbon Neat](http://neat.bourbon.io/)**: A lightweight semantic grid framework for Sass and Bourbon.
13 | + **[Profound Grid](http://www.profoundgrid.com/)**: A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.
14 | + **[RWDGrid](http://rwdgrid.com/)**: 2kb, Mobile First Grid System, HTML5 Boilerplate Head, 960grid like naming convention. PSD Grid included.
15 | + **[Simple Grid](http://thisisdallas.github.io/Simple-Grid/)**: Simple Grid was created for developers who need a barebones grid. With fluid columns, Simple Grid is responsive down to mobile.
16 |
17 |
18 | ------------------
19 |
20 | # License
21 |
22 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
23 |
24 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/user-interface-components/rich-text-editors.md:
--------------------------------------------------------------------------------
1 | # Rich Text Editors
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components**
4 |
5 | A rich text editor is the interface for editing rich text within web browsers. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **Content Sanitizers**: Rich text editors often produce unclean input when you copy & paste some content into them. Content sanitizers help you clean up the text.
13 | + **[FilteredPaste.js](http://willemmulder.github.io/FilteredPaste.js/)**: A jQuery plugin that filters any pasted input so that your application gets clean input, without any tags or attributes that you don't want.
14 | + **[Sanitize.js](https://github.com/gbirke/sanitize.js)**: Sanitize.js is a whitelist-based HTML sanitizer. Given a list of acceptable elements and attributes, Sanitize.js will remove all unacceptable HTML from a DOM node.
15 | + **[html-janitor](https://github.com/guardian/html-janitor)**: Cleans up your markup and allows you to take control of your HTML. HTMLJanitor uses a defined whitelist to limit HTML it is given to a defined subset.
16 | + **[Create.js](http://createjs.org/)**: Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content
17 | + **[Demarcate](http://will-hart.github.io/demarcate.js/)**: demarcate.js lets you edit directly in a page and generate Markdown back from the HTML elements.
18 | + **[Hallo](http://hallojs.org/)**: Hallo is the simplest web editor imaginable. Instead of cluttered forms or toolbars, you edit your web content as it is. Just you, your web design, and your content.
19 | + **Inspired by Medium**: Medium.com has a great and simple rich text editor built in. This libraries try to clone its behavior.
20 | + **[Medium.js](https://github.com/jakiestfu/Medium.js)**: A tiny JavaScript library for making contenteditable beautiful (Like Medium's editor)
21 | + **[Pen](http://sofish.github.io/pen/)**: Rich text editor inspired by Medium and backed by Markdown.
22 | + **[grande.js](https://github.com/mduvall/grande.js)**: A small Javascript library that implements features from Medium's editing experience.
23 | + **[medium-editor](https://github.com/yabwe/medium-editor)**: Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
24 | + **[Kajero](https://github.com/JoelOtter/kajero)**: Interactive JavaScript notebooks with markdown support and clever graphing.
25 | + **[MarkItUp](http://markitup.jaysalvat.com/)**: markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor.
26 | + **[Mercury Editor](http://jejacks0n.github.io/mercury/)**: Mercury is a full featured HTML5 editor. It was built from the ground up to help your team get the most out of content editing in modern browsers.
27 | + **[Quill](https://github.com/quilljs/quill/)**: Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and open sourced by Salesforce.com.
28 | + **[Scribe](https://github.com/guardian/scribe)**: A rich text editor framework for the web platform, with patches for browser inconsistencies and sensible defaults. Developed by The Guardian.
29 | + **[Inside the Guardian’s CMS: meet Scribe, an extensible rich text editor](https://www.theguardian.com/info/developer-blog/2014/mar/20/inside-the-guardians-cms-meet-scribe-an-extensible-rich-text-editor)**: The team behind the Guardian’s digital content management system talk about how and why they built and open sourced Scribe.
30 | + **[Substance](http://substance.io/)**: Substance is a JavaScript library for web-based content editing. It provides building blocks for realizing custom text editors and web-based publishing systems.
31 | + **[Build your own editor with Substance](https://medium.com/@_mql/build-your-own-editor-with-substance-7790eb600109)**: This article describes the philosophy behind Substance and how to get started.
32 | + **[TextAngular](http://textangular.com/)**: A Lightweight, Two-Way-Bound Angular.js Text-Editor.
33 | + **[WYSIHTML5](http://xing.github.io/wysihtml5/)**: wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
34 | + **[Voog fork](https://github.com/Voog/wysihtml)**: wysihtml is an extended and less strict approach on xing/wysihtml5 open source rich text editor based on HTML5 technology. The code is completely library agnostic: No jQuery, Prototype or similar is required.
35 | + **[WYSIHTML5 Enhanced](https://github.com/zohararad/wysihtml5n)**: WYSIHTML5 Enhanced is a rich-text editor, based on the wonderful wysihtml5 editor, with a bit of help from Twitter Bootstrap, Font-Awesome, Jcrop and HTML5's Drag & Drop and File API.
36 | + **[bootstrap3-wysiwyg](https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg)**: Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.
37 | + **[X-editable](http://vitalets.github.io/x-editable/)**: This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes.
38 |
39 |
40 | ------------------
41 |
42 | # License
43 |
44 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
45 |
46 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/user-interface-components/table-of-contents.md:
--------------------------------------------------------------------------------
1 | # Table Of Contents
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components**
4 |
5 | Components for automatic table of contents generation.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Tocbot](http://tscanlin.github.io/tocbot/)**: Tocbot builds a table of contents (TOC) from headings in an HTML document.
13 |
14 |
15 | ------------------
16 |
17 | # License
18 |
19 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
20 |
21 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/user-interface-components/ui-kits.md:
--------------------------------------------------------------------------------
1 | # UI Kits
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components**
4 |
5 | Collections of ready to use components.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[CloudFlare Components](https://cloudflare.github.io/cf-ui/)**: A set of UI components built by CloudFlare and based on React.
13 | + **[Ink](http://ink.sapo.pt/)**: An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping.
14 | + **[PrimeNG](http://www.primefaces.org/primeng/)**: PrimeNG is a collection of rich UI components for AngularJS2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces.
15 | + **[Primer](http://primercss.io/)**: Primer is GitHub’s internal CSS framework. It includes basic global styling for typography, small components like buttons and tabs, and our general guidelines for writing HTML and CSS.
16 | + **[Pure.css](http://purecss.io/)**: A set of small, responsive CSS modules that you can use in every web project.
17 | + **[UIkit](http://getuikit.com/)**: A lightweight and modular front-end framework and a set of components for developing fast and powerful web interfaces.
18 | + **[Vital](http://doximity.github.io/vital/)**: A minimally invasive CSS framework for modern web applications.
19 |
20 |
21 | ------------------
22 |
23 | # License
24 |
25 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
26 |
27 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/user-interface-components/video-and-audio.md:
--------------------------------------------------------------------------------
1 | # Video & Audio
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / User Interface Components**
4 |
5 | Components for playing audio and video files on a website.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Audio.js](http://kolber.github.io/audiojs/)**: audio.js is a drop-in javascript library that allows HTML5’s audio tag to be used anywhere.
13 | + **[Howler.js](https://github.com/goldfire/howler.js)**: howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio.
14 | + **[JPlayer](http://jplayer.org/)**: jPlayer a media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages.
15 | + **[MediaElement.js](http://mediaelementjs.com/)**: HTML5 audio or video player with Flash and Silverlight shims that mimics the HTML5 MediaElement API, enabling a consistent UI in all browsers.
16 | + **[Stratus 2](https://stratus.soundcloud.com/)**: Stratus is a jQuery powered SoundCloud player that lives at the bottom (or top) of your website or blog.
17 | + **[Video.js](https://github.com/videojs/video.js)**: Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices.
18 |
19 |
20 | ------------------
21 |
22 | # License
23 |
24 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
25 |
26 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/automated-testing.md:
--------------------------------------------------------------------------------
1 | # Automated Testing
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Automated software testing is a process in which software tools execute pre-scripted tests on a software application before it is released into production.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[5 Common Misconceptions About TDD & Unit Tests](https://medium.com/javascript-scene/5-common-misconceptions-about-tdd-unit-tests-863d5beb3ce9)**: Eric Elliott breaks down some common misconceptions and explains how you can benefit the most from TDD & unit tests.
13 | + **[A Gentle Introduction to Javascript Test Driven Development](http://jrsinclair.com/articles/2016/gentle-introduction-to-javascript-tdd-intro/)**: Over the course of the series, James Sinclair works through developing a full application in JavaScript that involves making network requests and manipulating the DOM.
14 | + **[Anti-patterns and Their Fixes](https://shanetomlinson.com/2013/testing-javascript-frontend-part-1-anti-patterns-and-fixes/)**: Shane Tomlinson presents a sample application that contains several common anti-patterns and how these can be refactored to be more testable.
15 | + **[Chai](http://chaijs.com/)**: Chai is a BDD/TDD assertion library for node and the browser that can be paired with any JavaScript testing framework.
16 | + **[Cucumber](https://cucumber.io/)**: Cucumber is a software tool that computer programmers use for testing other software. It runs automated acceptance tests written in a behavior-driven development (BDD) style.
17 | + **[Cucumber.js](https://github.com/cucumber/cucumber-js)**: Cucumber.js is a Cucumber implementation written in pure JavaScript. It runs on Node.js, IO.js, browsers and any other JavaScript platform.
18 | + **[Gherkin](https://github.com/cucumber/cucumber/wiki/Gherkin)**: Gherkin is the language that Cucumber understands. It is a Business Readable, Domain Specific Language that lets you describe software’s behaviour without detailing how that behaviour is implemented.
19 | + **[FiveUI](http://galoisinc.github.io/FiveUI/)**: FiveUI is an extensible tool for evaluating HTML user interfaces
20 | against sets of codified UI Guidelines.
21 | + **[Introducing BDD](https://dannorth.net/introducing-bdd/)**: Dan North introduces behaviour-driven development (BDD). A software development process that emerged from test-driven development (TDD).
22 | + **[Jasmine](https://github.com/jasmine/jasmine)**: Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it's suited for websites, Node.js projects, or anywhere that JavaScript can run.
23 | + **[JavaScript Testing: Unit vs Functional vs Integration Tests](https://www.sitepoint.com/javascript-testing-unit-functional-integration/)**: Unit tests, integration tests, and functional tests are all types of automated tests which form essential cornerstones of continuous delivery, a development methodology that allows you to safely ship changes to production in days or hours rather than months or years.
24 | + **[Jest](https://github.com/facebook/jest)**: A JavaScript unit testing framework, used by Facebook to test services and React applications.
25 | + **[Kakapo.js](http://devlucky.github.io/kakapo-js)**: Kakapo its a full featured http mocking library, he allows you to entirely replicate your backend logic in simple and declaritive way directly in the browser.
26 | + **[Karma](http://karma-runner.github.io/)**: A simple tool that allows you to execute JavaScript code in multiple real browsers.
27 | + **[Leche](https://github.com/box/leche)**: A JavaScript testing utility designed to work with Mocha and Sinon. This is intended for use both by Node.js and in browsers, so any changes must work in both locations.
28 | + **[My Node Test Strategy](https://remysharp.com/2015/12/14/my-node-test-strategy)**: Remy Sharp shates his automated testing process with tape, proxyquire, sinon and browserify.
29 | + **[PhantomCSS](https://github.com/Huddle/PhantomCSS)**: PhantomCSS takes screenshots and compares them to baseline images to test for RGB pixel differences. PhantomCSS then generates image diffs to help you find the cause.
30 | + **[QUnit](http://qunitjs.com/)**: QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code.
31 | + **[Refactor Away Anti-Patterns](https://shanetomlinson.com/2013/writing-testable-javascript-part-2-refactor-away-anti-patterns/)**: Shane Tomlinson continues by refactoring the original application, including testing anti patterns, to be easier to read, easier to reuse, and easier to test.
32 | + **[Sinon.JS Assertions for Chai](https://github.com/domenic/sinon-chai)**: Sinon–Chai provides a set of custom assertions for using the Sinon.JS spy, stub, and mocking framework with the Chai assertion library. You get all the benefits of Chai with all the powerful tools of Sinon.JS.
33 | + **[Sinon.js](http://sinonjs.org/)**: Standalone test spies, stubs and mocks for JavaScript. No dependencies, works with any unit testing framework.
34 | + **[How to Stub/Mock Complex Objects](http://codeutopia.net/blog/2016/05/23/sinon-js-quick-tip-how-to-stubmock-complex-objects-such-as-dom-objects/)**: In this article, we’ll look at how to stub objects which are deeply nested, and when functions have more complex return values and they interact with other objects.
35 | + **[Tape](https://github.com/substack/tape)**: Tap-producing test harness for node and browsers.
36 | + **[Testing JavaScript Modules with Tape](https://ponyfoo.com/articles/testing-javascript-modules-with-tape)**: In this article we will get an in-depth look at three modules: tape, proxyquire, and sinon.
37 | + **[Why I use Tape Instead of Mocha & So Should You](https://medium.com/javascript-scene/why-i-use-tape-instead-of-mocha-so-should-you-6aa105d8eaf4#.fjpja613n)**: Eric Elliott describes the advantages of Tape and compares it to more popular testing frameworks.
38 | + **[TestCheck](https://github.com/leebyron/testcheck-js)**: TestCheck is a library for generative testing of program properties, ala QuickCheck.
39 | + **[Testing a React & Redux Codebase](http://silvenon.com/testing-react-and-redux/)**: This series aims to be a very comprehensive guide through testing a React and Redux codebase, where you can really cover a lot with just unit tests because the code is mostly universal.
40 | + **Writing Testable JavaScript**: Rebecca Murphey discusses how to organize code to make JavaScript more testable in unit tests.
41 |
42 |
43 | ------------------
44 |
45 | # License
46 |
47 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
48 |
49 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/build-tools.md:
--------------------------------------------------------------------------------
1 | # Build Tools
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Toolkits and their ecosystems, that help you automate painful and repeated tasks.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Automaton](http://indigounited.com/automaton/)**: Task automation tool built in JavaScript.
13 | + **[Grunt](http://gruntjs.com/)**: Grunt is a task-based command line build tool for JavaScript projects.
14 | + **[A beginner’s guide to Grunt: Redux](http://mattbailey.io/a-beginners-guide-to-grunt-redux.html)**: Simple Grunt boilerplate for frontend workflow with detailed instructions.
15 | + **[GruntStart](https://github.com/tsvensen/gruntstart)**: A Grunt-enabled head-start with the H5BP, jQuery, Modernizr, and Respond. The building blocks to quickly get started with Grunt to create an optimized website.
16 | + **[Synchronised Testing Between Browsers/Devices](http://mattbailey.io/grunt-synchronised-testing-between-browsers-devices)**: The article describes an easy way to test your projects on your devices.
17 | + **[Web development is getting complex. Let's go shopping.](http://ruudud.github.io/2012/12/22/grunt/)**: A step by step tutorial for building a new project with grunt.
18 | + **[Gulp](http://gulpjs.com/)**: Gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow. It's very fast, platform-agnostic and simple.
19 | + **Articles & Tutorials**: Publications about gulp or step by step guides for setting up and using gulp in a project.
20 | + **Building with Gulp 3 and 4 (Series)**: Great series of articles about single components and gulp as a whole.
21 | + **[Part 1: Examples](http://blog.reactandbethankful.com/posts/2015/04/23/building-with-gulp-3-and-4-part-1-examples/)**: Introduction to gulp and gulpfile.js.
22 | + **[Part 2: Gulp's anatomy](http://blog.reactandbethankful.com/posts/2015/04/23/building-with-gulp-3-and-4-part-2-gulp-anatomy/)**: Orchestrator, Undertaker, Vinyl and Vinyl FS, Gulp Plugins.
23 | + **[Part 3: Writing transformers](http://blog.reactandbethankful.com/posts/2015/04/28/building-with-gulp-3-and-4-part-3-writing-transformers/)**: Using map-stream, though2 and event-stream.
24 | + **[Part 4: Incremental builds](http://blog.reactandbethankful.com/posts/2015/05/01/building-with-gulp-4-part-4-incremental-builds/)**: Building files which changed since last run and caching.
25 | + **[Part 5: Caveats](http://blog.reactandbethankful.com/posts/2015/05/05/building-with-gulp-part-5-caveats/)**: Error management in Gulp 3 and "MANY:1 disguised as a 1:1" problem.
26 | + **[The vision, history, and future of the project (Apr. 2014)](https://medium.com/@contrahacks/gulp-3828e8126466)**: The article talks about Streams, Vinyl, Vinyl Adapters, Orchestrator and Error Management in Gulp 4.
27 | + **[Why Gulp might not be the Answer](http://scm.io/blog/hack/2014/07/why-gulp-might-not-be-the-answer/)**: ... there is still a conceptual problem that Gulp has yet to address. Many build steps are not 1:1 (one file in, one file out) but rather n:1 or 1:n.
28 | + **CSS**: Gulp plugins for working with CSS files.
29 | + **[gulp-clean-css](https://github.com/scniro/gulp-clean-css)**: gulp plugin to minify CSS, using clean-css.
30 | + **[gulp-cssnano](https://www.npmjs.com/package/gulp-cssnano)**: Minify CSS with cssnano.
31 | + **Concatenation**: Plugins for file concatenation. For example bundling CSS or JavaScript files.
32 | + **[gulp-concat](https://www.npmjs.com/package/gulp-concat)**: This plugin will concat files by your operating systems newLine. It will take the base directory from the first file that passes through it.
33 | + **[gulp-group-concat](https://www.npmjs.com/package/gulp-group-concat)**: Concats groups of files into a smaller number of files
34 | + **Deployment**: Plugins for pushing built files into production.
35 | + **[gulp-tar](https://github.com/sindresorhus/gulp-tar)**: Create tarball from files.
36 | + **[vinyl-ftp](https://github.com/morris/vinyl-ftp)**: Blazing fast vinyl adapter for FTP.
37 | + **[vinyl-s3](https://github.com/izaakschroeder/vinyl-s3)**: Use S3 as a source or destination of vinyl files.
38 | + **Ecosystem**: The network of developers and plugins around gulp.
39 | + **[@sindresorhus plugins](https://github.com/search?q=%40sindresorhus+gulp-)**: A collection of plugins by Sindre Sorhus.
40 | + **[Gulp Friendly NPM Packages](https://www.npmjs.com/browse/keyword/gulpfriendly)**: Normal node packages that work with gulp.
41 | + **Filters**: Plugins for filtering files in a vinyl stream.
42 | + **[gulp-cache](https://www.npmjs.com/package/gulp-cache)**: A temp file based caching proxy task for gulp.
43 | + **[gulp-cached](https://www.npmjs.com/package/gulp-cached)**: A simple in-memory file cache for gulp.
44 | + **[gulp-changed](https://github.com/sindresorhus/gulp-changed)**: Only pass through changed files.
45 | + **[gulp-filter](https://www.npmjs.com/package/gulp-filter)**: Filter files in a vinyl stream.
46 | + **[gulp-newer](https://github.com/tschaub/gulp-newer)**: Pass through newer source files only.
47 | + **[gulp-remember](https://github.com/ahaurw01/gulp-remember)**: A plugin for gulp that remembers and recalls files passed through it.
48 | + **[vinyl-diff](https://www.npmjs.com/package/vinyl-diff)**: This library allows you to perform diffs between streams of vinyl.
49 | + **Images**: Plugins for working with images.
50 | + **[gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin)**: Minify PNG, JPEG, GIF and SVG images.
51 | + **[gulp-webp](https://github.com/sindresorhus/gulp-webp)**: Convert PNG, JPEG, TIFF images to WebP.
52 | + **JavaScript**: Module loaders, minifiers and other tools for working with JavaScript files.
53 | + **[gulp-pure-cjs](https://www.npmjs.com/package/gulp-pure-cjs)**: Gulp plugin for Pure CommonJS builder.
54 | + **[gulp-uglify](https://www.npmjs.com/package/gulp-uglify)**: Minify files with UglifyJS.
55 | + **[yoloader](https://www.npmjs.com/package/yoloader)**: A CommonJS module loader implementation. It provides tools to bundle a CommonJS based project and to load such bundles.
56 | + **SourceMaps**: A source map provides a way of mapping code within a compressed file back to it’s original position in a source file.
57 | + **[Plugins with gulp sourcemaps support](https://github.com/floridoo/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support)**: A list of plugins which support gulp-sourcemaps.
58 | + **[gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps)**: Source map support for Gulp.js
59 | + **[vinyl-sourcemaps-apply](https://www.npmjs.com/package/vinyl-sourcemaps-apply)**: Apply a source map to a vinyl file, merging it with preexisting source maps.
60 | + **Utility**: Tools and parts for building gulp plugins.
61 | + **[gulp-count](https://www.npmjs.com/package/gulp-count)**: Count files in a vinyl stream.
62 | + **[gulp-debug](https://www.npmjs.com/package/gulp-debug)**: Debug vinyl file streams to see what files are run through your gulp pipeline.
63 | + **[gulp-size](https://github.com/sindresorhus/gulp-size)**: Logs out the total size of files in the stream and optionally the individual file-sizes.
64 | + **[lazypipe](https://www.npmjs.com/package/lazypipe)**: Lazypipe allows you to create an immutable, lazily-initialized pipeline. It's designed to be used in an environment where you want to reuse partial pipelines, such as with gulp.
65 | + **[map-stream](https://github.com/dominictarr/map-stream)**: Create a through stream from an asyncronous function.
66 | + **[Vinyl](https://github.com/gulpjs/vinyl)**: Vinyl is a very simple metadata object that describes a file.
67 | + **[gulp-chmod](https://github.com/sindresorhus/gulp-chmod)**: Change permissions of Vinyl files.
68 | + **[gulp-rename](https://github.com/hparra/gulp-rename)**: A plugin to rename files easily.
69 | + **[mem-fs](https://www.npmjs.com/package/mem-fs)**: Simple in-memory vinyl file store.
70 | + **[vinyl-ast](https://www.npmjs.com/package/vinyl-ast)**: Parse-once and generate-once AST tool bridge for Gulp plugins.
71 | + **[vinyl-buffer](https://www.npmjs.com/package/vinyl-buffer)**: Creates a transform stream that takes vinyl files as input, and outputs buffered (isStream() === false) vinyl files as output.
72 | + **[vinyl-file](https://www.npmjs.com/package/vinyl-file)**: Create a vinyl file from an actual file.
73 | + **[vinyl-fs](https://github.com/wearefractal/vinyl-fs)**: Vinyl adapter for the file system.
74 | + **[vinyl-fs-fake](https://www.npmjs.com/package/vinyl-fs-fake)**: A vinyl adapter that extends vinyl-fs to allow for easy debugging by passing in virtual files instead of globs, and calling a function instead of writing.
75 | + **[vinyl-git](https://www.npmjs.com/package/vinyl-git)**: Vinyl adapter for git.
76 | + **[vinyl-map](https://github.com/hughsk/vinyl-map)**: Map vinyl files' contents as strings, so you can easily use existing code without needing yet another gulp plugin!
77 | + **[vinyl-paths](https://www.npmjs.com/package/vinyl-paths)**: Get the file paths in a vinyl stream.
78 | + **[vinyl-source-buffer](https://www.npmjs.com/package/vinyl-source-buffer)**: Convert a text stream into a vinyl pipeline whose content is a buffer.
79 | + **[vinyl-source-stream](https://www.npmjs.com/package/vinyl-source-stream)**: Use conventional text streams at the start of your gulp or vinyl pipelines, making for nicer interoperability with the existing npm stream.
80 | + **[vinyl-to-stream](https://www.npmjs.com/package/vinyl-to-stream)**: Convert a vinyl stream to a text stream.
81 | + **[vinyl-transform](https://www.npmjs.com/package/vinyl-transform)**: Wraps standard text transform streams so you can write fewer gulp plugins. Fulfills a similar use case to vinyl-map and vinyl-source-stream.
82 | + **[Mimosa](http://mimosajs.com)**: Mimosa is a batteries included web development workflow tool that will get you coding in seconds rather than hunting down plugins and wrangling config for hours.
83 | + **[Plop](https://github.com/amwmedia/plop)**: Micro-generator framework that makes it easy for an entire team to create files with a level or uniformity.
84 | + **[Automating Workflow with plop](http://newbranch.cn/ui-development-with-es6-javascript-part-x-automating-workflow-with-plop/)**: Automating UI Development with Riot.js and ES6 Javascript.
85 | + **[Webpack](http://webpack.github.io/)**: Webpack is a module bundler. It takes modules with dependencies and generates static assets representing those modules.
86 | + **[Block, Element, Modifying Your JavaScript Components](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b)**: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack.
87 | + **[Developing with Docker and Webpack](http://dapperdeveloper.com/2016/05/18/developing-with-docker-and-webpack/)**: Chris Harrington explains how to create a development environment with Webpack and Docker to match the production as much as possible.
88 | + **[Full-Stack Redux Tutorial](http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html)**: We will go through all the steps of constructing a Node+Redux backend and a React+Redux frontend for a real-world application, using test-first development.
89 | + **[How to Set Up Webpack Image Loader](http://www.davidmeents.com/how-to-set-up-webpack-image-loader/)**: This brief tutorial will help you set up an image loader in Webpack.
90 | + **[The SoundCloud Client in React + Redux](http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/)**: After finishing this step by step tutorial you will be able to author your own React + Redux project with Webpack and Babel.
91 | + **[Webpack from Apprentice to Master](http://survivejs.com/webpack/)**: The purpose of this guide is to help you get started with Webpack and then go beyond basics.
92 | + **[WebpackBin](http://www.webpackbin.com/)**: A webpack code sandbox.
93 | + **[Why I think Webpack is the Right Approach To Build Pipelines](http://devlog.disco.zone/2016/06/01/webpack/)**: Thomas Boyt compares how Grunt, Gulp, Broccoli and Webpack discover dependencies.
94 | + **[Yeoman](http://yeoman.io/)**: Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. It provides a generator ecosystem.
95 |
96 |
97 | ------------------
98 |
99 | # License
100 |
101 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
102 |
103 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/code-editors.md:
--------------------------------------------------------------------------------
1 | # Code Editors
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Text editor programs designed specifically for editing source code of a website.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Atom](https://atom.io/)**: Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.
13 | + **[Brackets](http://brackets.io/)**: An open source code editor for the web, written in JavaScript, HTML and CSS.
14 | + **[Notepad++](https://notepad-plus-plus.org/)**: Notepad++ is a free (as in "free speech" and also as in "free beer") source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License
15 | + **[Visual Studio Code](https://code.visualstudio.com/)**: Build and debug modern web and cloud applications. VS Code is free and available on your favorite platform - Linux, Mac OSX, and Windows.
16 |
17 |
18 | ------------------
19 |
20 | # License
21 |
22 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
23 |
24 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/css-tools.md:
--------------------------------------------------------------------------------
1 | # CSS Tools
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Tools for analysis, pre and post processing of CSS files.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[CSS Pack](https://www.npmjs.com/package/css-pack)**: Packs CSS dependency graphs produced from dgraph or module-deps into a single CSS bundle, assuming every node in the graph contains CSS source and the graph itself is sorted with deps-sort
13 | + **[CSS Stringify](https://github.com/reworkcss/css-stringify)**: CSS stringifier using the AST from 'css.parse'
14 | + **[CSSCSS](http://zmoazeni.github.io/csscss/)**: A CSS redundancy analyzer that analyzes redundancy.
15 | + **[Clean CSS](https://www.npmjs.com/package/clean-css)**: Clean-css is a fast and efficient Node.js library for minifying CSS files.
16 | + **[Helium CSS](https://github.com/geuis/helium-css)**: Helium is a tool for discovering unused CSS across many pages on a web site.
17 | + **[PostCSS](http://postcss.org/)**: PostCSS parses CSS into an abstract syntax tree (AST), passes it through a series of plugins, and then concatenates back into a string.
18 | + **[An Introduction to PostCSS](https://www.sitepoint.com/an-introduction-to-postcss/)**: This article describes what PostCSS is and how to get started.
19 | + **[ES CSS Modules](https://github.com/jacobp100/es-css-modules)**: PostCSS plugin that combines CSS Modules and ES Imports.
20 | + **[Improving the Quality of Your CSS with PostCSS](https://www.sitepoint.com/improving-the-quality-of-your-css-with-postcss/)**: In this article, we will explore how we can utilise PostCSS to help us maintain a higher quality in our CSS code.
21 | + **[React Starter Kit](https://www.reactstarterkit.com/)**: Isomorphic web app boilerplate including Node.js, Express, GraphQL, React.js, Babel 6, PostCSS, Webpack, Browsersync.
22 | + **[Working with Images in Stylesheets](https://css-tricks.com/images-in-postcss/)**: Aleks Hudochenkov does a great job of showcasing what PostCSS is good at and the role it has grown into in the front end stack.
23 | + **[Stylelint](http://stylelint.io/)**: Stylelint's ambitious goal is to supplement our discipline with automatic enforcement — to provide a core set of rules and a pluggable framework that CSS authors can use to enforce their own strategies.
24 | + **[Lint your CSS with Stylelint](https://css-tricks.com/stylelint/)**: David Clark writes about reasons for using a CSS linter and advantages of Stylelint.
25 |
26 |
27 | ------------------
28 |
29 | # License
30 |
31 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
32 |
33 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/documentation.md:
--------------------------------------------------------------------------------
1 | # Documentation
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Writing, generating, publishing and consuming documentation for web deliverables.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Atomic Docs](http://atomicdocs.io/)**: Atomic Docs is a styleguide generator and component manager. Atomic Docs is built in PHP. Inspired by Brad Frost's Atomic Design principles.
13 | + **[Daux](http://daux.io/)**: Daux.io is a documentation generator that uses a simple folder structure and Markdown files to create custom documentation on the fly.
14 | + **[Dexy](http://www.dexy.it/)**: Dexy makes it easier to create technical documents by doing the repetitive parts for you. Dexy provides a consistent interface to tools and scripts so you don't have to run them manually.
15 | + **[Docco](http://jashkenas.github.io/docco/)**: Docco is a quick-and-dirty documentation generator. It produces an HTML document that displays your comments intermingled with your code.
16 | + **[JSDoc Documentation](http://usejsdoc.org/)**: Comprehensive guide for JSDoc.
17 | + **[Ronn](https://github.com/rtomayko/ronn)**: Ronn builds manuals. It converts simple, human readable textfiles to roff for terminal display, and also to HTML for the web.
18 | + **[Transcribe](https://github.com/plaid/transcribe)**: Transcribe is a simple program which generates Markdown documentation from code comments.
19 | + **[YUIDoc](http://yui.github.io/yuidoc/)**: YUIDoc is a Node.js application that generates API documentation from comments in source, using a syntax similar to tools like Javadoc and Doxygen.
20 | + **[coddoc](http://doug-martin.github.io/coddoc/)**: coddoc is a jsdoc parsing library. Coddoc is different in that it is easily extensible by allowing users to add tag and code parsers. It also parses source code to be used in APIs.
21 | + **[devdocs.io](http://devdocs.io/)**: Devdocs is an all-in-one API documentation reader with a fast, organized, and consistent interface.
22 | + **[dox](https://github.com/visionmedia/dox)**: JavaScript documentation generator for node using markdown and jsdoc.
23 | + **[styledocco](http://jacobrask.github.io/styledocco/)**: StyleDocco generates documentation and style guide documents from your stylesheets.
24 |
25 |
26 | ------------------
27 |
28 | # License
29 |
30 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
31 |
32 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/fonts-for-programmers.md:
--------------------------------------------------------------------------------
1 | # Fonts for Programmers
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Programmers need special fonts, which help align the code and distinguish between characters, that look alike.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Droid Sans Mono](https://www.google.com/fonts/specimen/Droid+Sans+Mono)**: Droid Sans Mono makes for a great programming font. Its only real flaw is the lack of a slashed zero.
13 | + **[Free Programming Fonts](http://cdn.sixrevisions.com/0441-01_programming-fonts/demo/programming-fonts.html)**: A demonstration of beautiful fonts for people who love to code.
14 | + **[Mononoki](https://github.com/madmalik/mononoki)**: Mononoki is a typeface by Matthias Tellen, created to enhance code formatting.
15 | + **[Profont](http://tobiasjung.name/profont/)**: Profont is a monospaced font created to be a most readable font for programming. It is designed to look good a really small sizes
16 | + **[Source Code Pro](https://github.com/adobe-fonts/source-code-pro)**: Source Code Pro is a set of OpenType fonts that have been designed to work well in user interface (UI) environments.
17 | + **[Space Mono](https://fonts.google.com/specimen/Space%20Mono)**: Space Mono is an original fixed-width type family designed by Colophon Foundry for Google Design.
18 |
19 |
20 | ------------------
21 |
22 | # License
23 |
24 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
25 |
26 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/getting-started.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Step by step guides for setting up a frontend development workflow.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Front-end Process - Flat Builds and Automation (series)](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-1-introduction/)**: A flat build is basically the process of coding a static page (or pages) in HTML and CSS. The idea is to supply our developers with design assets such as style guides, pattern libraries or prototypes, including assets such as images, fonts, css, and javascript, as flat builds.
13 | + **[CSS Framework (Inuit)](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-4-css-framework/)**: In this part the author introduces the inuit CSS framework and describes how to integrate the framework into the development process.
14 | + **[Environment Setup & Yeoman](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-2-environment-setup-and-yeoman/)**: In this part the author outlines how to set up your dev environment, and how to scaffold a project using Yeoman.
15 | + **[Grunt Tasks](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-3-grunt-tasks/)**: The author outlined how to set up your dev environment, and how to scaffold a project using Yeoman. In this third part we will look at how to install and configure some grunt tasks.
16 |
17 |
18 | ------------------
19 |
20 | # License
21 |
22 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
23 |
24 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/html-tools.md:
--------------------------------------------------------------------------------
1 | # HTML Tools
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Tools for pre and post processing of the HTML source code.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[html-inspector](https://www.npmjs.org/package/html-inspector)**: HTML Inspector is a code quality tool to help you and your team write better markup. It's written in JavaScript and runs in the browser, so testing your HTML has never been easier.
13 | + **[html-minifier](https://www.npmjs.com/package/html-minifier)**: HTMLMinifier is a highly configurable, well-tested, Javascript-based HTML minifier, with lint-like capabilities.
14 |
15 |
16 | ------------------
17 |
18 | # License
19 |
20 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
21 |
22 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/image-post-processing.md:
--------------------------------------------------------------------------------
1 | # Image Post Processing
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Tools for image conversion and optimization.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[ImageOptim-CLI](https://github.com/JamieMason/ImageOptim-CLI)**: Make lossless optimisation of images part of your automated build process.
13 | + **[Jpegoptim](https://github.com/tjko/jpegoptim)**: Utility to optimize/compress JPEG files.
14 | + **[Optimize Images for Web – Ultimate Guide](https://www.keycdn.com/blog/optimize-images-for-web/)**: We will discuss the three areas in which you can better optimize images for web: better web performance, rank and index better in search engines, better social media engagement and CTR.
15 | + **[Pngcrush](http://pmt.sourceforge.net/pngcrush/)**: Pngcrush is an optimizer for PNG (Portable Network Graphics) files.
16 | + **[SMLR](https://github.com/jasonmoo/smlr)**: Re-encode jpeg images with no perceivable quality loss. Uses the butteraugli psychovisual comparison and k-ary search to determine the best jpeg quality setting.
17 |
18 |
19 | ------------------
20 |
21 | # License
22 |
23 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
24 |
25 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/javascript-tools.md:
--------------------------------------------------------------------------------
1 | # JavaScript Tools
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Tools for static analysis, pre and post processing of JavaScript files.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Babel](https://babeljs.io/)**: Babel is a generic multi-purpose compiler for JavaScript. Using Babel you can use (and create) the next generation of JavaScript, as well as the next generation of JavaScript tooling.
13 | + **[Full-Stack Redux Tutorial](http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html)**: We will go through all the steps of constructing a Node+Redux backend and a React+Redux frontend for a real-world application, using test-first development.
14 | + **[JavaScript Transpilers: What They Are & Why We Need Them](https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them)**: Learn how to use Babel, and what has to do with the future of JavaScript.
15 | + **[Closure Compiler](https://developers.google.com/closure/compiler/)**: The Closure Compiler parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.
16 | + **[Flow](https://flowtype.org/)**: Flow is a static type checker for JavaScript. It can be used to catch common bugs in JavaScript programs before they run.
17 | + **[JSCodeshift](https://github.com/facebook/jscodeshift)**: Codemods are tools that assist large-scale, partially automatable codebase refactoring. JSCodeshift is a toolkit for running codemods over multiple JS files.
18 | + **[Turbocharged JavaScript Refactoring with Codemods](https://medium.com/airbnb-engineering/turbocharged-javascript-refactoring-with-codemods-b0cae8b326b9)**: Joe Lencioni describes how they used codemods to transform a large JavaScript code base at AirBnB
19 | + **JavaScript Code Linting**: Linting is the process of running a program that will analyse code for potential errors.
20 | + **[ESLint](http://eslint.org/)**: The pluggable linting utility for JavaScript and JSX.
21 | + **[JSHint](http://jshint.com/)**: JSHint is a tool for more flexible static analysis of JavaScript programs.
22 | + **[JSLint](http://jslint.com/)**: JSLint is a tool for detecting errors or problems by static analysis of JavaScript programs.
23 | + **[JSLint, JSHint and ESLint Error Explanations](http://jslinterrors.com)**: JSLint Error Explanations is designed to help you improve your JavaScript by understanding the sometimes cryptic error messages produced by JSLint, JSHint and ESLint, and teaching you how to avoid such errors.
24 | + **Module Bundlers and Loaders**: Libraries for bundling JavaScript Modules into one or several files.
25 | + **[Browserify](http://browserify.org/)**: Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
26 | + **[Budo](https://github.com/mattdesl/budo)**: A browserify development server, focused on incremental reloading, LiveReload integration (including CSS injection), and other high-level features.
27 | + **[Watchify](https://www.npmjs.org/package/watchify)**: Watch mode for browserify builds.
28 | + **[CrapLoader](https://github.com/gregersrygg/crapLoader)**: The goal of crapLoader is to load ads, widgets or any JavaScript code with document.write in it. This library hijacks document.write and delegates the content loaded from each script into the correct position.
29 | + **[Modules Webmake](https://github.com/medikoo/modules-webmake)**: A CommonJS module bundler similar to Browserify but much faster due to different requirements finder.
30 | + **[Require.js](http://requirejs.org/)**: RequireJS is a JavaScript file and AMD module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments.
31 | + **[Require1k](http://stuk.github.io/require1k/)**: CommonJS require for the browser in 1KB, with no build needed.
32 | + **[Rollup.js](http://rollupjs.org/)**: Rollup is a next-generation JavaScript module bundler. Author your app or library using ES2015 modules, then efficiently bundle them up into a single file for use in browsers and Node.js.
33 | + **[SystemJS](https://github.com/systemjs/systemjs)**: Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.
34 | + **[Modular JavaScript: A Beginners Guide to SystemJS & JSPM](http://www.sitepoint.com/modular-javascript-systemjs-jspm/)**: The combination of jspm and SystemJS provides a unified way of installing and loading dependencies.
35 | + **[URequire](https://github.com/anodynos/urequire)**: The Ultimate JavaScript Module Builder & Automagical Task Runner.
36 | + **[Webpack](http://webpack.github.io/)**: Webpack is a module bundler. It takes modules with dependencies and generates static assets representing those modules.
37 | + **[Block, Element, Modifying Your JavaScript Components](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b)**: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack.
38 | + **[Developing with Docker and Webpack](http://dapperdeveloper.com/2016/05/18/developing-with-docker-and-webpack/)**: Chris Harrington explains how to create a development environment with Webpack and Docker to match the production as much as possible.
39 | + **[Full-Stack Redux Tutorial](http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html)**: We will go through all the steps of constructing a Node+Redux backend and a React+Redux frontend for a real-world application, using test-first development.
40 | + **[How to Set Up Webpack Image Loader](http://www.davidmeents.com/how-to-set-up-webpack-image-loader/)**: This brief tutorial will help you set up an image loader in Webpack.
41 | + **[The SoundCloud Client in React + Redux](http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/)**: After finishing this step by step tutorial you will be able to author your own React + Redux project with Webpack and Babel.
42 | + **[Webpack from Apprentice to Master](http://survivejs.com/webpack/)**: The purpose of this guide is to help you get started with Webpack and then go beyond basics.
43 | + **[WebpackBin](http://www.webpackbin.com/)**: A webpack code sandbox.
44 | + **[Why I think Webpack is the Right Approach To Build Pipelines](http://devlog.disco.zone/2016/06/01/webpack/)**: Thomas Boyt compares how Grunt, Gulp, Broccoli and Webpack discover dependencies.
45 | + **[Regenerator](https://github.com/facebook/regenerator)**: This package implements a source transformation that takes the proposed syntax for generators/yield from future versions of JS and spits out efficient JS-of-today (ES5) that behaves the same way.
46 |
47 |
48 | ------------------
49 |
50 | # License
51 |
52 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
53 |
54 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/package-management.md:
--------------------------------------------------------------------------------
1 | # Package Management
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing reusable libraries and components in a consistent manner.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Bower](https://github.com/bower/bower)**: Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack.
13 | + **[Lerna](https://github.com/lerna/lerna)**: Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.
14 | + **[NPM](https://www.npmjs.com/)**: NPM makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you're sharing.
15 |
16 |
17 | ------------------
18 |
19 | # License
20 |
21 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
22 |
23 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/sourcemaps.md:
--------------------------------------------------------------------------------
1 | # Sourcemaps
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Sourcemap is a way to map a combined/minified file back to an unbuilt state.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[combine-source-map](https://www.npmjs.org/package/combine-source-map)**: Add source maps of multiple files, offset them and then combine them into one source map.
13 | + **[convert-source-map](https://www.npmjs.org/package/convert-source-map)**: Converts a source-map from/to different formats and allows adding/changing properties.
14 | + **[exorcist](https://github.com/thlorenz/exorcist)**: Externalizes the source map found inside a stream to an external .js.map file
15 | + **[generate-sourcemap](https://www.npmjs.org/package/generate-sourcemap)**: Generates a source map for files that were packed into a bundle.
16 | + **[inline-source-map](https://www.npmjs.org/package/inline-source-map)**: Adds source mappings and base64 encodes them, so they can be inlined in your generated file.
17 | + **[mold-source-map](https://www.npmjs.org/package/mold-source-map)**: Mold a source map that is almost perfect for you into one that is.
18 | + **[source-map-cjs](https://www.npmjs.org/package/source-map-cjs)**: Generates and consumes source maps. Adapted to be commonjs only and work in older browsers.
19 |
20 |
21 | ------------------
22 |
23 | # License
24 |
25 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
26 |
27 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/tutorials.md:
--------------------------------------------------------------------------------
1 | # Tutorials
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Step by step guides for setting up a frontend development workflow.
6 |
7 | [](http://frontend.directory/)
8 | [](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=4FAGPMANWRVJJ)
9 | [](https://beerpay.io/dypsilon/frontend-dev-bookmarks)
10 | [](https://flattr.com/submit/auto?fid=3nlo5p&url=https%3A%2F%2Fgithub.com%2Fdypsilon%2Ffrontend-dev-bookmarks)
11 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
12 | [](https://twitter.com/FrontendDir)
13 |
14 | -----------------------------------------
15 |
16 | + **[Front-end Process - Flat Builds and Automation (series)](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-1-introduction/)**: A flat build is basically the process of coding a static page (or pages) in HTML and CSS. The idea is to supply our developers with design assets such as style guides, pattern libraries or prototypes, including assets such as images, fonts, css, and javascript, as flat builds.
17 | + **[CSS Framework (Inuit)](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-4-css-framework/)**: In this part the author introduces the inuit CSS framework and describes how to integrate the framework into the development process.
18 | + **[Environment Setup & Yeoman](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-2-environment-setup-and-yeoman/)**: In this part the author outlines how to set up your dev environment, and how to scaffold a project using Yeoman.
19 | + **[Grunt Tasks](http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-3-grunt-tasks/)**: The author outlined how to set up your dev environment, and how to scaffold a project using Yeoman. In this third part we will look at how to install and configure some grunt tasks.
20 |
21 |
22 | ------------------
23 |
24 | # License
25 |
26 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
27 |
28 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------
/workflow/version-control.md:
--------------------------------------------------------------------------------
1 | # Version Control
2 |
3 | **Context: [frontend-dev-bookmarks](../README.md) / Workflow**
4 |
5 | Version control or source control is a system that records changes to a file or set of files over time so that you can recall specific versions later.
6 |
7 | [](http://frontend.directory/)
8 | [](https://gitter.im/dypsilon/frontend-dev-bookmarks)
9 | [](https://twitter.com/FrontendDir)
10 |
11 | -----------------------------------------
12 | + **[Git](https://git-scm.com/)**: Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
13 | + **[Become a Git Guru](https://www.atlassian.com/git/tutorials)**: A series of Git tutorials by Atlassian.
14 | + **[OctoLinker](https://github.com/OctoLinker/browser-extension)**: The OctoLinker is a browser extensions which makes references to other files in GitHub clickable.
15 |
16 |
17 | ------------------
18 |
19 | # License
20 |
21 |
This work is licensed under a Creative Commons Attribution 4.0 International License.
22 |
23 | Please provide a link back to this repository. This is not necessary for GitHub forks.
--------------------------------------------------------------------------------