Is there always a way to implement an algorithm without mutable state?

It’s tempting to use mutable state in your algorithm. It’s so convenient! And we’re so used to it, if we come from an imperative paradigm. But we must remember that there is always a way, even if it’s not immediately obvious. I go over two ways to implement an algorithm without mutable state.

Transcript

Eric Normand: Is there always a way to design and implement an algorithm without mutation? Hi, my name is Eric Normand. These are my thoughts on functional programming.

I’ve seen this before where there’s some algorithm that seems like, “No, this one just needs mutation.” That’s the whole point of it is that things change over time. We need to have mutation.

I always challenge that because once you let in mutation, it’s really hard to get rid of it. It’s really hard to make it functional on top of that. Unimpossible, but if you’ve got mutation in the core of your abstraction, it’s really hard.

You get all the problems of mutation, and then you’re not using functional programming anymore. You’re just all doing actions. Reading and writing from a mutable thing. The thing is it is always possible.

We know this theoretically, mathematically proven that it is possible to convert any Turing machine into a lambda calculus representation. You could consider the Turing machine the immutable version of algorithm.

If you’re using mutation, you’re in that side, you’re in that camp. Then the immutable more functional version is the lambda calculus. We know that they’re equivalent. Anything you can calculate with the Turing machine, you can calculate with lambda calculus.

The question then is about how to do it. I do think the first step is believing it can be done. If you’ve already made the decision that it has to [inaudible 2:28] be with mutation, you’ve lost the battle. Your mind is not going to go there and even look for the solution without mutation.

I think that is always the first step, it’s just trust that there is a way to do it and that you can find it. That’s the mental part of it. When we’re making transitions from one paradigm to another, that’s the kind of leap of faith you have to make.

You’ll eventually get used to thinking in the functional paradigm, and it won’t be a leap anymore. You’ll know that it will be possible. The second thing is you need to think of two…There’s two different approaches when you’ve got a problem like this, where you think, “I need mutation.” The first is, can you pass this state around? Meaning, it’s not mutable values.

The current state is passed in as an argument, and the next state is returned as the return value. Then you just thread it through. There’s always a possibility. You’re not mutating anything. You’re threading stuff through.

Then you can take a step back and you say, “Well, I actually am not threading any functions through. I have something else that’s threading that value through different functions, so I could have it in a loop,” for instance.

The current state is stored in the local variable in the loop, and then you recur. You do a loop recur. The recursion, if you’re not using Clojure, if it’s just standard recursion, you change the value of that as you recurse.

You’re not changing anything. That function is calling itself with the next value. That’s the same thing as threading. It’s just happening on the outside.

The other thing is often what people use mutable state for or shared mutable state is, a decision in this part of the code is going to affect this part of the code. I could say something like, “I’m gonna set an option here in this part of the code, and that’s going to make this thing, which isn’t running yet, do something else.”

A simple example is if you’ve got a wizard, a step-by-step process, and the first step gets presented to the user. They make some options. They say, “I want to file my taxes jointly with my spouse.” You click that.

Then the next step is going to change based on what you chose in that step. We’re going to give you this workflow, because you said you want to file jointly. It seems like I’m making a decision here. I’m setting an option. It’s mutable. Now, that is going to change what happens next.

That other screen is going to have to read that value, which just got set, and change the UI for that. Here’s the thing, you could potentially solve that with threading the value through, but you could also do it where…Let me back up.

Because you’re threading, the challenge though is that the decision has to be reified. This is that second technique that I’m trying to get at. If you have an if statement, when I click this button that says, “I wanna file jointly,” I could think of it as, “OK. Now, that means the next step needs to be…”

I have an if statement that says, if it’s jointly, set the next step to the jointly workflow. If it’s single, the [inaudible 7:35] branch set it to the single workflow. It seems mutable. You’re making a decision here. The if statement, you’re making it here, and it’s going to affect something over here.

If you reify that decision, that if statement, into a function so the function takes the value that you’re threading through, that function can return the next step. This is a pure function. It’s a calculation.

It takes the current state which contains the option that you set that got threaded through, so no mutation. It makes a decision. What is the next step to show? It’s that same if statement, but you’ve wrapped it in a function. Now it’s a thing that you can put for the next step.

You could have a kind of step in your workflow that is a decision step that has this function that determines the actual next step. You have regular steps and then these decision steps. That’s two cases.

If you do that, you’re still functional. You have not had any mutation in there. You’re still doing all calculations but you’ve still solved the problem of having this piece of the code or some decision on this side affecting decision. You just moved the decision, reified it up, and you’re good.

These are two techniques that happen. Here’s the thing about threading state. If you’re into this, threading state is a pattern. In a language like Haskell, they would call that the state monad.

That state gets threaded through for you as part of the binding rules for the monad. If you bind two state monad values together, this one can change the state, and then this one can read it. It can read that change.

Any monad or any other values that come after it can read the state, because it’s basically just threading. You could do it by hand. You don’t have to have a type class system to do that. You could do it by hand, and I’ve done that before. Just think of threading a state through.

This decision thing is just normal for first class. You don’t have an if statement in a first class if statement. Many languages don’t. JavaScript doesn’t. Clojure doesn’t. Does Haskell? Maybe it does. I don’t know. I don’t think it does. If it does, great, use it. If not, you can make it. It’s really easy.

It’s a function that takes a Boolean and it returns either the second argument or the third argument. You can make one that’s more tailored just for this decision that you’re making, which is to take the current state.

Have an if statement in there that determines which one to do, and it just does whatever you’re supposed to do to make a step happen. There you go. You’ve reified it.

That was this thought. I’ve encountered that before where people give up and say, “This has to be mutable. We’re changing things. The workflow changes as you make decisions.” It does not have to be that way.

My name is Eric Normand. This has been my thought on functional programming. If you’ve had an algorithm that you’ve had trouble making functional, please get in touch with me. I’d love to see it. I’d love to help you out with it. Maybe there’s something else to glean from it.

I’ve broke this down into two little microskills you need to use to try out how to do this. There could be more skills to use that you would need. I’d love to see some examples to expand this out.

When I have these thoughts, they’re really just all about finding other people who could use these thoughts, helping others, getting in touch with people who are also doing the same thing, trying to make functional programming more practical, more accessible to people.

If you’re one of those people, if you got a question, if you want to just get in touch, you can find me on LinkedIn, just search for Eric Normand and Clojure. I’m the first one. I should be. You can also get in touch with me on Twitter, I’m @ericnormand, and via email at eric@lispcast.com.

See you later.

The post Is there always a way to implement an algorithm without mutable state? appeared first on LispCast.

Permalink

Large numbers

Sometime last night I clicked over 10k views across the articles I've posted here. Thanks, post analytics! While an arbitrary milestone, it was still pretty jarring to see, and on my drive into work I started trying to unpack why that is. I'm not sure what I expected - I'm writing specifically so that other people would see it. I never excepted to garner that much attention so quickly, though - Dev.to has completely caught me by surprise.

For one, thanks. It's been validating as heck - one tricky thing about self-learning on your own is coming to any sort of understanding about how much you know or don't know. I've been operating under the assumption that I know nothing - and I think that's still more or less true, but it's nice to know I've got something to show for the work I've put in thus far.

Second, I guess I've got to start taking this more seriously. What if I am dead wrong about something? If it's gone uncorrected, I likely don't realize the error myself and I'd hate to lead anyone down a wrong path.

Until I became active on this website nobody except a few bored GitHub explorers had ever seen any code I'd written or heard any thoughts I'd had about the matter. My poor girlfriend has been subjected to a couple of rants here and there (okay, more than a couple - she could probably write her own Clojure at this point if coerced) but beyond that it's been a quiet, solitary hobby.

The simple act of publishing this writing here as opposed to anywhere else means that all of a sudden I'm accountable for it. It will get seen. That's super weird. When writing was done for primarily my own benefit it was a very different game. I wrote to gain a deeper understanding of tools I was using - I figured if I could explain something in English, I pretty much understood it. In certain cases this has uncovered gaps in my understanding of concepts I thought I had a good grasp on, so the act of writing has been reward enough. It's a pretty big mental shift to write for a platform with an audience built-in.

Every time I post something, I do so with the assumption that this community knows more about the subject matter than I do. I expect to be corrected when wrong, it's part of my learning process. And I have been, occasionally, which has been really cool. But mostly I've just thrown this stuff out there and thousands of you have just accepted it at face value, sometimes within just a day or two, as opposed to the dozens I was expecting to come through and tear everything apart. Part of the quick uptick in attention is that I have specifically opted to write about things for which I found little to no material on when I was learning it the first time. Like many of us, I wrote posts I wish I'd had to read and learn from myself. This means, though, that I don't have a huge body of examples to compare to - the responsibility of authority is now mine, and I'm still grappling with how to handle that responsibility...responsibly, while still feeling I have no such actual authority to back it up.

I don't have much in the way of a thrilling conclusion, but seeing that fifth digit definitely gave me cause to step back and think a little about what it means. My takeaway will be that the "Write a Post" button is not at all unlike getting up on a soapbox in front of 10,000 incredibly smart people, perhaps in a way that's more direct than other social blogging platforms - an interesting and intimidating opportunity, and potentially a fantastic way to learn.

I can't wait to see what else you lot have to teach me.

Permalink

Useful JavaScript resources for programmers.

A collection of browser-side JavaScript libraries and resources.

JavaScript

Package Managers

Host the javascript libraries and provide tools for fetching and packaging them.

  • npm - npm is the package manager for javascript.
  • Bower - A package manager for the web.
  • component - Client package management for building better web applications.
  • spm - Brand new static package manager.
  • jam - A package manager using a browser-focused and RequireJS compatible repository.
  • jspm - Frictionless browser package management.
  • Ender - The no-library library.
  • volo - Create front end projects from templates, add dependencies, and automate the resulting projects.
  • Duo - Next-generation package manager that blends the best ideas from Component, Browserify and Go to make organizing and writing front-end code quick and painless.
  • yarn - Fast, reliable, and secure dependency management.

Loaders

Module or loading system for JavaScript.

  • RequireJS - A file and module loader for JavaScript.
  • browserify - Browser-side require() the node.js way.
  • SeaJS - A Module Loader for the Web.
  • HeadJS - The only script in your HEAD.
  • curl - A small, fast, extensible module loader that handles AMD, CommonJS Modules/1.1, CSS, HTML/text, and legacy scripts.
  • lazyload - Tiny, dependency-free async JavaScript and CSS loader.
  • script.js - Asyncronous JavaScript loader and dependency manager.
  • systemjs - AMD, CJS & ES6 spec-compliant module loader.
  • LodJS - Module loader based on AMD
  • ESL - Module loader browser first, support lazy define and AMD.
  • modulejs - Lightweight JavaScript module system.

Bundlers

  • browserify - Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
  • webpack - Packs CommonJs/AMD modules for the browser.
  • Rollup - Next-generation ES6 module bundler.
  • Brunch - Fast front-end web app build tool with simple declarative config.
  • Parcel - Blazing fast, zero configuration web application bundler.

Testing Frameworks

Frameworks

  • mocha - Simple, flexible, fun javascript test framework for node.js & the browser.
  • jasmine - DOM-less simple JavaScript testing framework.
  • qunit - An easy-to-use JavaScript Unit Testing framework.
  • jest - Painless Javascript Unit Testing.
  • prova - Node & Browser test runner based on Tape and Browserify
  • DalekJS - Automated cross browser functional testing with JavaScript
  • Protractor - Protractor is an end-to-end test framework for AngularJS applications.
  • tape - Tap-producing test harness for node and browsers.
  • TestCafe - Automated browser testing for the modern web development stack.
  • ava - 🚀 Futuristic JavaScript test runner

Assertion

  • chai - BDD / TDD assertion framework for node.js and the browser that can be paired with any testing framework.
  • Enzyme - Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
  • react testing library - Simple and complete React DOM testing utilities that encourage good testing practices.
  • Sinon.JS - Test spies, stubs, and mocks for JavaScript.
  • expect.js - Minimalistic BDD-style assertions for Node.JS and the browser.

Coverage

  • istanbul - Yet another JS code coverage tool.
  • blanket - A simple code coverage library for javascript. Designed to be easy to install and use, for both browser and nodejs.
  • JSCover - JSCover is a tool that measures code coverage for JavaScript programs.

Runner

  • phantomjs - Scriptable Headless WebKit.
  • slimerjs - A PhantomJS-like tool running Gecko.
  • casperjs - Navigation scripting & testing utility for PhantomJS and SlimerJS.
  • zombie - Insanely fast, full-stack, headless browser testing using node.js.
  • totoro - A simple and stable cross-browser testing tool.
  • karma - Spectacular Test Runner for JavaScript.
  • nightwatch - UI automated testing framework based on node.js and selenium webdriver.
  • intern - A next-generation code testing stack for JavaScript.
  • yolpo - A statement-by-statement javascript interpreter in the browser.

QA Tools

  • prettier - Prettier is an opinionated code formatter.
  • JSHint - JSHint is a tool that helps to detect errors and potential problems in your JavaScript code.
  • jscs - JavaScript Code Style checker.
  • jsfmt - For formatting, searching, and rewriting JavaScript.
  • jsinspect - Detect copy-pasted and structurally similar code.
  • buddy.js - Magic number detection for JavaScript.
  • ESLint - A fully pluggable tool for identifying and reporting on patterns in JavaScript.
  • JSLint - High-standards, strict & opinionated code quality tool, aiming to keep only good parts of the language.
  • JavaScript Standard Style - Opinionated, no-configuration style guide, style checker, and formatter

MVC Frameworks and Libraries

  • angular.js - HTML enhanced for web apps.
  • aurelia - A Javascript client framework for mobile, desktop and web.
  • backbone - Give your JS App some Backbone with Models, Views, Collections, and Events.
  • ember.js - A JavaScript framework for creating ambitious web applications.
  • meteor - An ultra-simple, database-everywhere, data-on-the-wire, pure-Javascript web framework.
  • ractive - Next-generation DOM manipulation.
  • vue - Intuitive, fast & composable MVVM for building interactive interfaces.
  • knockout - Knockout makes it easier to create rich, responsive UIs with JavaScript.
  • spine - Lightweight MVC library for building JavaScript applications.
  • espresso.js - A minimal javascript library for crafting user interfaces.
  • canjs - Can do JS, better, faster, easier.
  • react - A library for building user interfaces. It's declarative, efficient, and extremely flexible. Works with a Virtual DOM.
  • hyperapp - 1kb JavaScript library for building frontend applications.
  • preact - Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
  • nativescript - Build truly native cross-platform iOS and Android apps with JavaScript
  • react-native - A framework for building native apps with React.
  • riot - React-like library, but with very small size.
  • thorax - Strengthening your Backbone.
  • chaplin - An architecture for JavaScript applications using the Backbone.js library.
  • marionette - A composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.
  • ripple - A tiny foundation for building reactive views.
  • rivets - Lightweight and powerful data binding + templating solution.
  • derby - MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.
  • way.js - Simple, lightweight, persistent two-way databinding.
  • mithril.js - Mithril is a client-side MVC framework (Light-weight, Robust, Fast).
  • jsblocks - jsblocks is better MV-ish framework.
  • LiquidLava - Transparent MVC framework for building user interfaces.
  • feathers - A minimalist real-time JavaScript framework for tomorrow's apps.
  • Keo - Functional stateless React components with Shadow DOM support.
  • atvjs - Blazing fast Apple TV application development using pure JavaScript.

Node-Powered CMS Frameworks

  • KeystoneJS - powerful CMS and web app framework
  • Reaction Commerce - reactive CMS, real-time architecture and design
  • Ghost - simple, powerful publishing platform
  • Apostrophe - CMS with content editing and essential services
  • We.js - framework for real time apps, sites or blogs
  • Hatch.js - CMS platform with social features.
  • TaracotJS - fast and minimalist CMS based on Node.js.
  • Nodizecms - CMS for CoffeeScript lovers
  • Cody - CMS with WSYWYG editor
  • PencilBlue - CMS and blogging platform

Templating Engines

Templating engines allow you to perform string interpolation.

  • mustache.js - Minimal templating with {mustaches} in JavaScript.
  • handlebars.js - An extension to the Mustache templating language.
  • hogan.js - A compiler for the Mustache templating language.
  • doT - The fastest + concise javascript template engine for nodejs and browsers.
  • dustjs - Asynchronous templates for the browser and node.js.
  • eco - Embedded CoffeeScript templates.
  • JavaScript-Templates - < 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies.
  • t.js - A tiny javascript templating framework in ~400 bytes gzipped.
  • Pug - Robust, elegant, feature rich template engine for nodejs. (formerly known as Jade)
  • EJS - Effective JavaScript templating.
  • xtemplate - eXtensible Template Engine lib for node and the browser
  • marko - A fast, lightweight, HTML-based templating engine for Node.js and the browser with async, streaming, custom tags and CommonJS modules as compiled output.
  • swig - A simple, powerful, and extendable Node.js and browser-based JavaScript template engine.

Articles and Posts

Data Visualization

Data visualization tools for the web.

  • d3 - A JavaScript visualization library for HTML and SVG.
    • metrics-graphics - A library optimized for concise, principled data graphics and layouts.
  • pykcharts.js - Well designed d3.js charting without the complexity of d3.js.
  • three.js - JavaScript 3D library.
  • Chart.js - Simple HTML5 Charts using the tag.
  • paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
  • fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser.
  • peity - Progressive bar, line and pie charts.
  • raphael - JavaScript Vector Library.
  • echarts - Enterprise Charts.
  • vis - Dynamic, browser-based visualization library.
  • two.js - A renderer agnostic two-dimensional drawing api for the web.
  • g.raphael - Charts for Raphaël.
  • sigma.js - A JavaScript library dedicated to graph drawing.
  • arbor - A graph visualization library using web workers and jQuery.
  • cubism - A D3 plugin for visualizing time series.
  • dc.js - Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js
  • vega - A visualization grammar.
  • processing.js - Processing.js makes your data visualizations work using web standards and without any plug-ins
  • envisionjs - Dynamic HTML5 visualization.
  • rickshaw - JavaScript toolkit for creating interactive real-time graphs.
  • flot - Attractive JavaScript charts for jQuery.
  • morris.js - Pretty time-series line graphs.
  • nvd3 - Build re-usable charts and chart components for d3.js
  • svg.js - A lightweight library for manipulating and animating SVG.
  • heatmap.js - JavaScript Library for HTML5 canvas based heatmaps.
  • jquery.sparkline - A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser.
  • xCharts - A D3-based library for building custom charts and graphs.
  • trianglify - Low poly style background generator with d3.js
  • d3-cloud - Create word clouds in JavaScript.
  • d4 - A friendly reusable charts DSL for D3.
  • dimple.js - Easy charts for business analytics powered by d3
  • chartist-js - Simple responsive charts.
  • epoch - A general purpose real-time charting library.
  • c3 - D3-based reusable chart library.
  • BabylonJS - A framework for building 3D games with HTML 5 and WebGL.
  • recharts - Redefined chart library built with React and D3
  • GraphicsJS - A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

There're also some great commercial libraries, like amchart, anychart, plotly, and highchart.

Timeline

  • TimelineJS v3 - A Storytelling Timeline built in JavaScript.
  • timesheet.js - JavaScript library for simple HTML5 & CSS3 time sheets.

Spreadsheet

  • HANDSONTABLE - Handsontable is a JavaScript/HTML5 Spreadsheet Library for Developers

Editors

  • ace - Ace (Ajax.org Cloud9 Editor).
  • CodeMirror - In-browser code editor.
  • esprima - ECMAScript parsing infrastructure for multipurpose analysis.
  • quill - A cross browser rich text editor with an API.
  • medium-editor - Medium.com WYSIWYG editor clone.
  • pen - enjoy live editing (+markdown).
  • jquery-notebook - A simple, clean and elegant text editor. Inspired by the awesomeness of Medium.
  • bootstrap-wysiwyg - Tiny bootstrap-compatible WYSIWYG rich text editor.
  • ckeditor-releases - The best web text editor for everyone.
  • editor - A markdown editor. still on development.
  • EpicEditor - An embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.
  • jsoneditor - A web-based tool to view, edit and format JSON.
  • vim.js - JavaScript port of Vim with a persistent ~/.vimrc
  • Squire - HTML5 rich text editor.
  • TinyMCE - The JavaScript Rich Text editor.
  • trix - A rich text editor for everyday writing. By Basecamp.
  • Trumbowyg - A lightweight and amazing WYSIWYG JavaScript editor.
  • Draft.js - A React framework for building text editors.
  • bootstrap-wysihtml5 - Simple, beautiful wysiwyg editor
  • wysihtml5 - Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
  • raptor-editor - Raptor, an HTML5 WYSIWYG content editor!
  • popline - Popline is an HTML5 Rich-Text-Editor Toolbar

Documentation

  • DevDocs is an all-in-one API documentation reader with a fast, organized, and consistent interface.
  • dexy is a free-form literate documentation tool for writing any kind of technical document incorporating code.
  • docco is a quick-and-dirty, hundred-line-long, literate-programming-style documentation generator.
  • styledocco generates documentation and style guide documents from your stylesheets.
  • Ronn builds manuals. It converts simple, human readable textfiles to roff for terminal display, and also to HTML for the web.
  • dox is a JavaScript documentation generator written with node. Dox no longer generates an opinionated structure or style for your docs, it simply gives you a JSON representation, allowing you to use markdown and JSDoc-style tags.
  • jsdox is a JSDoc3 to Markdown documentation generator.
  • ESDoc is a good documentation generator for JavaScript.
  • YUIDoc is a Node.js application that generates API documentation from comments in source, using a syntax similar to tools like Javadoc and Doxygen.
  • coddoc is a jsdoc parsing library. Coddoc is different in that it is easily extensible by allowing users to add tag and code parsers through the use of coddoc.addTagHandler and coddoc.addCodeHandler. coddoc also parses source code to be used in APIs.
  • sphinx a tool that makes it easy to create intelligent and beautiful documentation
  • Using JSDoc
  • Beautiful docs is a documentation viewer based on markdown files.
  • documentation.js - API documentation generator with support for ES2015+ and flow annotation.
  • jsduck - API documentation generator made for Sencha JavaScript frameworks, but can be used for other frameworks too.

Files

Libraries for working with files.

  • Papa Parse - A powerful CSV library that supports parsing CSV files/strings and also exporting to CSV.
  • jBinary - High-level I/O (loading, parsing, manipulating, serializing, saving) for binary files with declarative syntax for describing file types and data structures.
  • diff2html - Git diff output parser and pretty HTML generator.
  • jsPDF - JavaScript PDF generation.

Functional Programming

Functional programming libraries to extend JavaScript’s capabilities.

  • underscore - JavaScript's utility _ belt.
  • lodash - A utility library delivering consistency, customization, performance, & extras.
  • Sugar - A Javascript library for working with native objects.
  • lazy.js - Like Underscore, but lazier.
  • ramda - A practical functional library for Javascript programmers.
  • mout - Modular JavaScript Utilities.
  • mesh - Streamable data synchronization utility.
  • preludejs - Hardcore Functional Programming for JavaScript.

Reactive Programming

Reactive programming libraries to extend JavaScript’s capabilities.

  • RxJs - The Reactive Extensions for JavaScript.
  • Bacon - FRP (functional reactive programming) library for Javascript.
  • Kefir - FRP library for JavaScript inspired by Bacon.js and RxJS with focus on high performance and low memory consumption.
  • Highland - Re-thinking the JavaScript utility belt, Highland manages synchronous and asynchronous code easily, using nothing more than standard JavaScript and Node-like Streams.
  • Most.js - high performance FRP library.
  • MobX - TFRP library for simple, scalable state management.
  • Cycle.js - A functional and reactive JavaScript library for cleaner code.

Data Structure

Data structure libraries to build a more sophisticated application.

  • immutable-js - Immutable Data Collections including Sequence, Range, Repeat, Map, OrderedMap, Set and a sparse Vector.
  • mori - A library for using ClojureScript's persistent data structures and supporting API from the comfort of vanilla JavaScript.
  • buckets - A complete, fully tested and documented data structure library written in JavaScript.
  • hashmap - Simple hashmap implementation that supports any kind of keys.

Date

Date Libraries.

  • moment - Parse, validate, manipulate, and display dates in javascript.
  • moment-timezone - Timezone support for moment.js.
  • jquery-timeago - A jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago").
  • timezone-js - Timezone-enabled JavaScript Date object. Uses Olson zoneinfo files for timezone data.
  • date - Date() for humans.
  • ms.js - Tiny millisecond conversion utility.
  • countdown.js - Super simple countdowns.
  • timeago.js - Simple library (less then 2kb) used to format date with *** time ago statement.
  • fecha - Lightweight date formatting and parsing (~2KB). Meant to replace parsing and formatting functionality of moment.js.
  • date-fns - Modern JavaScript date utility library.

String

String Libraries.

  • voca - The ultimate JavaScript string library
  • selecting - A library that allows you to access the text selected by the user
  • underscore.string - String manipulation extensions for Underscore.js javascript library.
  • string.js - Extra JavaScript string methods.
  • he - A robust HTML entity encoder/decoder written in JavaScript.
  • multiline - Multiline strings in JavaScript.
  • query-string - Parse and stringify URL query strings.
  • URI.js - Javascript URL mutation library.
  • jsurl - Lightweight URL manipulation with JavaScript.
  • sprintf.js - A sprintf implementation.
  • url-pattern - Easier than regex string matching patterns for urls and other strings. Turn strings into data or data into strings

Number

  • Numeral-js - A javascript library for formatting and manipulating numbers.
  • chance.js - Random generator helper in Javascript. Can generate numbers, strings etc.
  • odometer - Smoothly transitions numbers with ease.
  • accounting.js - A lightweight JavaScript library for number, money and currency formatting - fully localisable, zero dependencies.
  • money.js - A tiny (1kb) javascript currency conversion library, for web & nodeJS.
  • Fraction.js - A rational number library for JavaScript
  • Complex.js - A complex number library for JavaScript
  • Polynomial.js - A polynomials library for JavaScript

Storage

  • store.js - LocalStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage, and userData behavior under the hood.
  • localForage - Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
  • jStorage - jStorage is a simple key/value database to store data on browser side.
  • cross-storage - Cross domain local storage, with permissions.
  • basket.js - A script and resource loader for caching & loading scripts with localStorage.
  • bag.js - A caching script and resource loader, similar to basket.js, but with additional k/v interface and localStorage / websql / indexedDB support.
  • basil.js - The missing Javascript smart persistent layer.
  • jquery-cookie - A simple, lightweight jQuery plugin for reading, writing and deleting cookies.
  • js-cookie - A simple, lightweight JavaScript API for handling browser cookies
  • Cookies - JavaScript Client-Side Cookie Manipulation Library.
  • DB.js - Promise based IndexDB Wrapper library
  • lawnchair.js - Simple client-side JSON storage.
  • sql.js - SQLite compiled to JavaScript through Emscripten.

Color

  • randomColor - A color generator for JavaScript.
  • chroma.js - JavaScript library for all kinds of color manipulations.
  • color - JavaScript color conversion and manipulation library.
  • colors - Smarter defaults for colors on the web.
  • PleaseJS - JavaScript Library for creating random pleasing colors and color schemes.
  • TinyColor - Fast, small color manipulation and conversion for JavaScript.
  • Vibrant.js - Extract prominent colors from an image.

I18n And L10n

Localization (l10n) and internationalization (i18n) JavaScript libraries.

  • i18next - internationalisation (i18n) with javascript the easy way.
  • polyglot - tiny i18n helper library.
  • babelfish - i18n with human friendly API and built in plurals support.

Control Flow

  • async - Async utilities for node and the browser.
  • q - A tool for making and composing asynchronous promises in JavaScript.
  • step - An async control-flow library that makes stepping through logic easy.
  • contra - Asynchronous flow control with a functional taste to it.
  • Bluebird - fully featured promise library with focus on innovative features and performance.
  • when - A solid, fast Promises/A+ and when() implementation, plus other async goodies.
  • ObjectEventTarget - Provide a prototype that add support to event listeners (with same behavior of EventTarget from DOMElements available on browsers).

Routing

  • director - A tiny and isomorphic URL router for JavaScript.
  • page.js - Micro client-side router inspired by the Express router (~1200 bytes).
  • pathjs - Simple, lightweight routing for web browsers.
  • crossroads - JavaScript Routes.
  • davis.js - RESTful degradable JavaScript routing using pushState.

Security

  • DOMPurify - A DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.
  • js-xss - Sanitize untrusted HTML (to prevent XSS) with a configuration specified by a Whitelist.
  • xss-filters - Secure XSS Filters by Yahoo

Log

  • log - Console.log with style.
  • Conzole - A debug panel built in javascript that wraps javascript native console object methods and functionality in a panel displayed inside the page.
  • console.log-wrapper - Log to the console in any browser with clarity.
  • loglevel - Minimal lightweight logging for JavaScript, adding reliable log level methods to wrap any available console.log methods.
  • minilog – Lightweight client & server-side logging with Stream-API backends
  • storyboard - Universal logging library + Chrome extension; it lets you see all client and server tasks triggered by a user action in a single place.

RegExp

  • RegEx101 - Online regex tester and debugger for JavaScript. Also supports Python, PHP and PCRE.
  • RegExr - HTML/JS based tool for creating, testing, and learning about Regular Expressions.
  • RegExpBuilder - Create regular expressions using chained methods.

Voice Command

  • annyang - A JavaScript library for adding voice commands to your site, using speech recognition.
  • voix.js - A JavaScript library to add voice commands to your sites, apps or games.

API

  • fakeJSON - Mock backend API for lightspeed development.You can use the API for you frontend development, end to end testing, regression testing, rapid prototyping, data generation, and more. Use the API to iterate, update, and refresh your application for consistent and dependable mock data.

  • axios - Promise based HTTP client for the browser and node.js.

  • bottleneck - A powerful rate limiter that makes throttling easy.

  • oauth-signature-js - JavaScript OAuth 1.0a signature generator for node and the browser.

  • amygdala - RESTful HTTP client for JavaScript powered web applications.

  • jquery.rest - A jQuery plugin for easy consumption of RESTful APIs.

  • Rails Ranger - An opinionated REST client for Ruby on Rails APIs.

Streaming

  • Tailor - Streaming layout service for front-end microservices, inspired by Facebook's BigPipe.

Vision Detection

  • tracking.js - A modern approach for Computer Vision on the web.
  • ocrad.js - OCR in Javascript via Emscripten.

Machine Learning

  • ConvNetJS - Deep Learning in Javascript. Train Convolutional Neural Networks (or ordinary ones) in your browser.
  • DN2A - Digital Neural Networks Architecture.
  • Brain.js - Neural networks in JavaScript.
  • Mind.js - A flexible neural network library.
  • Synaptic.js - Architecture-free neural network library for node.js and the browser.
  • TensorFlow.js - A JavaScript library for training and deploying ML models in the browser and on Node.js.
  • ml5.js - Friendly Machine Learning for the Web.

Browser Detection

Benchmark

  • benchmark.js - A benchmarking library. As used on jsPerf.com.
  • matcha - A caffeine driven, simplistic approach to benchmarking.

Code highlighting

  • Highlight.js - Javascript syntax highlighter.
  • PrismJS - Lightweight, robust, elegant syntax highlighting.

Loading Status

Libraries for indicate load status.

  • Mprogress.js - Create Google Material Design progress linear bars.
  • NProgress - Slim progress bars for Ajax'y applications.
  • Spin.js - A spinning activity indicator.
  • progress.js - Create and manage progress bar for every objects on the page.
  • progressbar.js - Beautiful and responsive progress bars with animated SVG paths.
  • pace - Automatically add a progress bar to your site.
  • topbar - Tiny & beautiful site-wide progress indicator.
  • nanobar - Very lightweight progress bars. No jQuery.
  • PageLoadingEffects - Modern ways of revealing new content using SVG animations.
  • SpinKit - A collection of loading indicators animated with CSS.
  • Ladda - Buttons with built-in loading indicators.
  • css-loaders - A collection of loading spinners animated with CSS

Besides libraries, there're Collection on Codepen, and generators like Ajaxload, Preloaders and CSSLoad.

Validation

  • Parsley.js - Validate your forms, frontend, without writing a single line of javascript.
  • jquery-validation - jQuery Validation Plugin.
  • validator.js - String validation and sanitization.
  • validate.js - Lightweight JavaScript form validation library inspired by CodeIgniter.
  • validatr - Cross Browser HTML5 Form Validation.
  • FormValidation - The best jQuery plugin to validate form fields. Formerly BootstrapValidator.
  • is.js - Check types, regexps, presence, time and more.
  • FieldVal - multipurpose validation library. Supports both sync and async validation.

Keyboard Wrappers

  • mousetrap - Simple library for handling keyboard shortcuts in Javascript.
  • keymaster - A simple micro-library for defining and dispatching keyboard shortcuts.
  • Keypress - A keyboard input capturing utility in which any key can be a modifier key.
  • KeyboardJS - A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.
  • jquery.hotkeys - jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination.
  • jwerty - Awesome handling of keyboard events.

Tours And Guides

  • intro.js - A better way for new feature introduction and step-by-step users guide for your website and project.
  • shepherd - Guide your users through a tour of your app.
  • bootstrap-tour - Quick and easy product tours with Twitter Bootstrap Popovers.
  • tourist - Simple, flexible tours for your app.
  • chardin.js - Simple overlay instructions for your apps.
  • pageguide - An interactive guide for web page elements using jQuery and CSS3.
  • hopscotch - A framework to make it easy for developers to add product tours to their pages.
  • joyride - jQuery feature tour plugin.
  • focusable - Set a spotlight focus on DOM element adding a overlay layer to the rest of the page.

Notifications

  • iziToast - Elegant, responsive, flexible and lightweight notification plugin with no dependencies.
  • messenger - Growl-style alerts and messages for your app.
  • noty - jQuery notification plugin.
  • pnotify - JavaScript notifications for Bootstrap, jQuery UI, and the Web Notifications Draft.
  • toastr - Simple javascript toast notifications.
  • humane-js - A simple, modern, browser notification system.
  • smoke.js - Framework-agnostic styled alert system for javascript.
  • notie - Simple notifications and inputs with no dependencies.

Sliders

  • Swiper - Mobile touch slider and framework with hardware accelerated transitions.
  • slick - The last carousel you'll ever need.
  • slidesJs - Is a ressponsive slideshow plug-in for JQuery(1.7.1+) with features like touch and CSS3 transitions
  • FlexSlider - An awesome, fully responsive jQuery slider plugin.
  • unslider - The simplest jQuery slider there is.
  • sly - JavaScript library for one-directional scrolling with item based navigation support.
  • vegas - A jQuery plugin to add beautiful fullscreen backgrounds to your webpages. It even allows Slideshows.
  • Sequence - CSS animation framework for creating responsive sliders, presentations, banners, and other step-based applications.
  • reveal.js - A framework for easily creating beautiful presentations using HTML.
  • impress.js - It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
  • bespoke.js - DIY Presentation Micro-Framework
  • Strut - Strut - An Impress.js and Bespoke.js Presentation Editor
  • PhotoSwipe - JavaScript image gallery for mobile and desktop, modular, framework independent.
  • jcSlider - A responsive slider jQuery plugin with CSS animations.
  • basic-jquery-slider - Simple to use, simple to theme, simple to customise.
  • jQuery.adaptive-slider - A jQuery plugin for a slider with adaptive colored figcaption and navigation.
  • slidr - add some slide effects.
  • Flickity - Touch, responsive, flickable galleries.
  • Glide.js - Responsive and touch-friendly jQuery slider. It's simple, lightweight and fast.
  • jQuery.adaptive-slider - A jQuery plugin for a slider with adaptive colored figcaption and navigation.

Range Sliders

  • Ion.RangeSlider - Powerful and easily customizable range slider with many options and skin support.
  • jQRangeSlider - A javascript slider selector that supports dates.
  • noUiSlider - A lightweight, highly customizable range slider without bloat.
  • rangeslider.js - HTML5 input range slider element polyfill.

Form Widgets

Input

  • typeahead.js - A fast and fully-featured autocomplete library.
  • tag-it - A jQuery UI plugin to handle multi-tag fields as well as tag suggestions/autocomplete.
  • At.js - Add Github like mentions autocomplete to your application.
  • Placeholders.js - A JavaScript polyfill for the HTML5 placeholder attribute.
  • fancyInput - Makes typing in input fields fun with CSS3 effects.
  • jQuery-Tags-Input - Magically convert a simple text input into a cool tag list with this jQuery plugin.
  • vanilla-masker - A pure javascript mask input.
  • Ion.CheckRadio - jQuery plugin for styling checkboxes and radio-buttons. With skin support.
  • awesomplete - Ultra lightweight, usable, beautiful autocomplete with zero dependencies. - http://leaverou.github.io/awesomplete/

Calendar

  • pickadate.js - The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
  • bootstrap-datepicker - A datepicker for @twitter bootstrap forked from Stefan Petre's (of eyecon.ro), improvements by @eternicode.
  • Pikaday - A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.
  • fullcalendar - Full-sized drag & drop event calendar (jQuery plugin).
  • rome - A customizable date (and time) picker. Dependency free, opt-in UI.
  • datedropper - datedropper is a jQuery plugin that provides a quick and easy way to manage dates for input fields.

Select

  • selectize.js - Selectize is the hybrid of a textbox and select box. It's jQuery based and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
  • select2 - a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
  • chosen - A library for making long, unwieldy select boxes more friendly.

File Uploader

  • jQuery-File-Upload - File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery.
  • dropzone - Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.
  • flow.js - A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API.
  • fine-uploader - Multiple file upload plugin with progress-bar, drag-and-drop, direct-to-S3 uploading.
  • FileAPI - A set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF.
  • plupload - A JavaScript API for dealing with file uploads it supports features like multiple file selection, file type filtering, request chunking, client side image scaling and it uses different runtimes to achieve this such as HTML 5, Silverlight and Flash.

Other

  • form - jQuery Form Plugin.
  • Garlic.js - Automatically persist your forms' text and select field values locally, until the form is submitted.
  • Countable - A JavaScript function to add live paragraph-, word- and character-counting to an HTML element.
  • card - Make your credit card form better in one line of code.
  • stretchy - Form element autosizing, the way it should be.

Tips

  • tipsy - Facebook-style tooltips plugin for jQuery.
  • opentip - An open source javascript tooltip based on the prototype framework.
  • qTip2 - Pretty powerful tooltips.
  • tooltipster - A jQuery tooltip plugin.
  • simptip - A simple CSS tooltip made with Sass.
  • jquery-popup-overlay - jQuery plugin for responsive and accessible modal windows and tooltips.
  • toolbar - A tooltip style toolbar jQuery plugin
  • hint.css - A tooltip library in CSS for your lovely websites.

Modals and Popups

  • Magnific-Popup - Light and responsive lightbox script with focus on performance.
  • jquery-popbox - jQuery PopBox UI Element.
  • jquery.avgrund.js - A jQuery plugin with new modal concept for popups.
  • vex - A modern dialog library which is highly configurable and easy to style.
  • bootstrap-modal - Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.
  • css-modal - A modal built out of pure CSS.
  • jquery-popup-overlay - jQuery plugin for responsive and accessible modal windows and tooltips.
  • SweetAlert - An awesome replacement for JavaScript's alert.
  • baguetteBox.js - Simple and easy to use lightbox script written in pure JavaScript.
  • colorbox - A light-weight, customizable lightbox plugin for jQuery.
  • fancyBox - A tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.
  • swipebox - A touchable jQuery lightbox
  • jBox - jBox is a powerful and flexible jQuery plugin, taking care of all your popup windows, tooltips, notices and more.

Scroll

  • scrollMonitor - A simple and fast API to monitor elements as you scroll.
  • headroom - Give your pages some headroom. Hide your header until you need it.
  • onepage-scroll - Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin.
  • iscroll - iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller.
  • skrollr - Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery.
  • parallax - Parallax Engine that reacts to the orientation of a smart device.
  • stellar.js - Parallax scrolling made easy.
  • plax - jQuery powered parallaxing.
  • jparallax - jQuery plugin for creating interactive parallax effect.
  • fullPage - A simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites).
  • ScrollMenu - A new interface to replace old boring scrollbar.
  • Clusterize.js - Tiny vanilla JS plugin to display large data sets easily.

Menu

  • jQuery-menu-aim - jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's.
  • jQuery contextMenu - contextMenu manager.
  • Slideout - A responsive touch slideout navigation menu for mobile web apps.
  • Slide and swipe - A sliding swipe menu that works with touchSwipe library.

Table/Grid

  • jTable - A jQuery plugin to create AJAX based CRUD tables.
  • DataTables - (jQuery plug-in) It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
  • Tabulator - (jQuery plug-in) An extremely flexible library that create tables with a range of interactive features from any JSON data source or existing HTML table.
  • Bootstrap Table - An Extension to the popular Bootstrap framework for creating tables that fit the style of your site with no need for additional markup.
  • floatThead - (jQuery plug-in) lock any table's header while scrolling within the body. Works on any table and requires no custom html or css.
  • Masonry - A cascading grid layout library.
  • Packery - A grid layout library that uses a bin-packing algorithm. Useable for draggable layouts.
  • Isotope - A filterable, sortable, grid layout library. Can implement Masonry, Packery, and other layouts.
  • flexboxgrid - Grid based on CSS3 flexbox

Frameworks

  • Semantic UI - UI Kit with lots of themes and elements
  • w2ui - A set of jQuery plugins for front-end development of data-driven web applications.
  • fluidity - The worlds smallest fully-responsive css framework
  • Ink - An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping

Boilerplates

  • html5-boilerplate - A professional front-end template for building fast, robust, and adaptable web apps or sites.
  • mobile-boilerplate - A front-end template that helps you build fast, modern mobile web apps.
  • webplate - An awesome front-end framework that lets you stay focused on building your site or app while remaining really easy to use.
  • Cerberus - A few simple, but solid patterns for responsive HTML emails. Even in Outlook.
  • full-page-intro-and-navigation - An intro page with a full width background image, a bold animated menu and an iOS-like blurred effect behind the navigation
  • Fluid-Squares - A fluid grid of square units.
  • Mobile-First-RWD - An example of a mobile-first responsive web design
  • this-is-responsive - This Is Responsive
  • npm run-scripts Task automation with NPM run-scripts.

Gesture

  • hammer.js - A javascript library for multi-touch gestures.
  • touchemulator - Emulate touch input on your desktop.
  • Dragula - Drag and drop so simple it hurts

Maps

  • Leaflet - JavaScript library for mobile-friendly interactive maps.
  • Cesium - Open Source WebGL virtual globe and map engine.
  • gmaps - The easiest way to use Google Maps.
  • polymaps - A free JavaScript library for making dynamic, interactive maps in modern web browsers.
  • kartograph.js - Open source JavaScript renderer for Kartograph SVG maps.
  • mapbox.js - Mapbox JavaScript API, a Leaflet Plugin.
  • jqvmap - jQuery Vector Map Library.
  • OpenLayers3 - A high-performance, feature-packed library for all your mapping needs.

Video/Audio

  • prettyembed.js - Prettier embeds for your YouTubes - with nice options like high-res preview images, advanced customization of embed options, and optional FitVids support.
  • html5media - Enables and tags in all major browsers. https://html5media.info/
  • Play-em JS - Play'em is a javascript component that manages a music/video track queue and plays a sequence of songs by embedding several players in a HTML DIV including Youtube, Soundcloud and Vimeo.
  • polyplayer - Rule YouTube, Soundcloud and Vimeo player with one API
  • flowplayer - The HTML5 video player for the web https://flowplayer.org/
  • mediaelement - HTML5 or player with Flash and Silverlight shims that mimics the HTML5 MediaElement API, enabling a consistent UI in all browsers. http://mediaelementjs.com/
  • SoundJS - A library to make working with audio on the web easier. It provides a consistent API for playing audio in different browsers.
  • video.js - Video.js - open source HTML5 & Flash video player
  • FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
  • Ion.Sound - Simple sounds on any web page
  • photobooth-js - A widget that allows users to take their avatar pictures on your site
  • clappr - An extensible media player for the web http://clappr.io

Typography

  • FlowType.JS - Web typography at its finest: font-size and line-height based on element width.
  • BigText - jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.
  • circletype - A jQuery plugin that lets you curve type on the web
  • slabText - A jQuery plugin for producing big, bold & responsive headlines
  • simple-text-rotator - Add a super simple rotating text to your website with little to no markup
  • novacancy.js - Text Neon Golden effect jQuery plug-in.
  • jquery-responsive-text - Make your text sizing responsive!
  • FitText.js - A jQuery plugin for inflating web type
  • Lettering.js - A lightweight, easy to use Javascript <span> injector for radical Web Typography

Animations

Image Processing

  • lena.js - A Library for image processing with filters and util functions.
  • pica - High quality image resize (with fast Lanczos filter, implemented in pure JS).
  • cropper - A simple jQuery image cropping plugin.

ES6

SDK

  • javascript-sdk-design - Javascript SDK design guide extracted from work and personal experience
  • Spotify SDK - Entity oriented SDK to work with the Spotify Web API.

Misc

  • echo - Lazy-loading images with data-* attributes.
  • picturefill - A responsive image polyfill for <picture>, srcset, sizes.
  • platform.js - A platform detection library that works on nearly all JavaScript platforms.
  • json3 - A modern JSON implementation compatible with nearly all JavaScript platforms.
  • Logical Or Not - A game about JavaScript specificities.
  • BitSet.js - A JavaScript Bit-Vector implementation
  • spoiler-alert - SPOILER ALERT! A happy little jquery plugin to hide spoilers on your site.
  • jquery.vibrate.js - Vibration API Wrappers
  • list.js - Adds search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML. http://www.listjs.com
  • mixitup - MixItUp - A Filter & Sort Plugin
  • grid - Drag and drop library for two-dimensional, resizable and responsive lists.
  • jquery-match-height - a responsive equal heights plugin for jQuery.
  • survey.js - JavaScript Survey Engine. It uses JSON for survey metadata and results. http://surveyjs.org/
  • Array Explorer and Object Explorer - Resources to help figure out what native JavaScript method would be best to use at any given time
  • Clipboard.js - "Copy to clipboard" without Flash or use of Frameworks.

Podcasts

  • JavaScript Air - The live video broadcast podcast all about JavaScript and the Web platform.
  • Web of Tomorrow - Podcast about JavaScript for beginners.
  • Javascript Jabber - A weekly podcast about JavaScript, including Node.js, Front-End Technologies, Careers, Teams and more.

Worth Reading

  • You Don't Know JS - Possibly the best book written on modern JavaScript, completely readable online for free, or can be bought to support the author.
  • braziljs/js-the-right-way
  • JSbooks
  • Superhero.js - A collection of resources about creating, testing and maintaining a large JavaScript code base.
  • SJSJ - Simplified JavaScript Jargon is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words.
  • How to Write an Open Source JavaScript Library - A comprehensive guide through a set of steps to publish a JavaScript open source library.
  • Jaavascript tutorial - Learn Javascript online from a diverse range of user ranked online tutorials.

Source: Github by sorrycc
Repo License: Public Domain Dedication

Permalink

JS to CLJS # 2

I’ll regularly take a JavaScript problem and work it out in ClojureScript. This will hopefully take away some of the Magic™ of functional programming and show how to solve real problems. I promise you won’t have to learn what a monad is.

Problem

Write a function, persistence, that takes in a positive parameter num and returns its multiplicative persistence, which is the number of times you must multiply the digits in num until you reach a single digit.

For example:

persistence(39) === 3 // 3*9 = 27, 2*7 = 14, 1*4=4
                      // and 4 has only one digit

persistence(999) === 4 // 9*9*9 = 729, 7*2*9 = 126,
                       // 1*2*6 = 12, 1*2 = 2

persistence(4) === 0 // 4 is already a one-digit number

Solutions

;;#cljs
(defn persistence-recursive [n]
  (let [n (str n)]
    (if (= 1 (count n))
      0
      (inc (persistence
             (reduce (fn [a1 a2]
                       (* (js/parseInt a1)
                          (js/parseInt a2)))
                     n)))))

(defn persistence-iterative [n]
  (loop [acc 0
         n (str n)]
    (if (= 1 (count n))
      acc
      (recur (inc acc)
             (str
               (reduce (fn [a1 a2]
                         (* (js/parseInt a1)
                            (js/parseInt a2)))
                       n))))))

Thoughts

persistence-recursive is a linear recursive process while persistence-iterative is a linear iterative process. SICP has a great visual explanation of each.

  • persistence-recursive: Grows the stack and potential stack overflow, but doesn’t need to maintain state.
  • persistence-iterative: Doesn’t grow the stack and no stack overflow, but needs to update state. Additionally, cljs isn’t tail call optimized (TCO), so we need to use loop/recur.

Permalink

Announcing The REPL podcast

I sent the first newsletter for The REPL two years ago, and I have really enjoyed writing it. I’ve learnt a lot from what people have written and created to share with the Clojure community. Sometimes when I’m writing the newsletter I’ve thought “That’s fascinating, I’d love to hear more about the technical details of that”. Now I have an outlet for doing just that.

I first had the idea of producing a Clojure podcast around January 2018. I didn’t have the time for it then, but the idea kept swirling around the back of my brain. When Michael Drogalis’s Pyrostore was acquired, I wanted to hear more about the acquisition, so I contacted Michael to see if he wanted to talk about it. That became the first episode.

My goal for The REPL is to talk with people about the technical details of the projects they are working on. The Clojure community has a ton of interesting people doing really creative work with Clojure. I’ve really enjoyed talking with a bunch of people already, and I’m looking forward to talking to more of them in the future. You can find it therepl.net. It’s available on Apple Podcasts, RSS and all of the other common podcasting apps.

Permalink

JS to CLJS #1

I’ll regularly take a JavaScript problem and work it out in ClojureScript. This will hopefully take away some of the Magic™ of functional programming and show how to solve real problems. I promise you won’t have to learn what a monad is.

Problem

Write a function that accepts a string and returns the same string with alternate casing.

cljs.user => (multi-case "Your String")
=> "yOuR StRiNg"

This problem came up in a JavaScript slack group. Several JS solutions were given, with most differences being insignificant.

Solutions

//#js
//one of many similar solutions
const multiCase = string => {
  return string
    .split("")
    .map((char, index) => index % 2 ? char.toLowerCase() : char.toUpperCase())
    .join("")
}
;;#cljs
(defn multi-case [s]
  (apply str
   (map (fn [f c]
         (f c))
        (cycle [clojure.string/lower-case
                clojure.string/upper-case])
        s))

Comparative Thoughts

  • Both versions map over each character without counting the number of characters.
  • The cljs version doesn’t use the index to determine which function to apply.
  • The cljs version will be simpler to extend, e.g. replace every third char with a space. (In the cljs case, we just add the function to the end of the cycled vector. In js, we’d need to add another branch to our index check.)
  • The cljs version gives us functions as first class, i.e. we can use the string functions as arguments. In js, we have toLowerCase and toUpperCase that can only be applied to string instances. If we want to pass them as arguments, we have to wrap them as functions or perform some other workaround.

Permalink

PurelyFunctional.tv Newsletter 301: GraphQL, Hiccup, Symbolic Execution

Issue 301 – November 19, 2018 · Archives · Subscribe

Hi Clojurnators,

As many of you may know, I am writing a book. I just turned in Chapter 3, which means the early access is coming soon. The book is about functional programming. It’s targeted at programmers who are new to functional programming. It deals with the problems functional programming can help mitigate and a skill-based approach to building function software. The idea behind it is that functional programming is mostly talked about in an academic way and we need a literature for everyday, working software engineers.

The first three chapters have been a real challenge! Not only have I never written a book, I also am fleshing out the ideas as I go. I’ve written and rewritten each of the chapters three times to get to the heart of the matter. Rewrites are hard and worthwhile. I am happier each time I begin a new rewrite. And I feel like I’m converging on a process to shorten the rewrite cycle. But we’ll see.

Stay on this mailing list and I’ll be sure to let you know when the book is available. I think it will be in the next few months.

Please enjoy the issue!

Rock on!
Eric Normand <eric@purelyfunctional.tv>

PS Want to get this in your email? Subscribe!


Howard Lewis Ship on GraphQL and Lacinia Podcast

Howard Lewis Ship talks about GraphQL on the REPL podcast.


Uncoupling YouTube

Michael Nygard deconstructs the idea of coupling, using far reaching examples of moons (large and small), train cars, and, of course, software modules.


Hiccup true, false, and nil Attributes Free lesson

This week’s free video lesson is all about using attributes with true, false, and nil values.


Laws! YouTube

George Wilson talks about monoids. I’m a big fan of monoids.


Symbolic Execution: Intuition and Implementation

A cool program analysis technique I’d love to dive deeper into.


Why Sum Types Matter in Haskell

An explanation of sum types and product types, which are used in Haskell (and similar languages) to represent different cases in a data model. We know them better as variants in the Clojure world.


Ideo breaks its silence on design thinking’s problems

Can we have something like this article for agile?


More about Stratified Design Podcast

I talk about the idea of Stratified Design as an architectural pattern.

The post PurelyFunctional.tv Newsletter 301: GraphQL, Hiccup, Symbolic Execution appeared first on PurelyFunctional.tv.

Permalink

Clojure Engineer

Clojure Engineer

Red Pineapple Media | Berlin

Want to work with Clojure in Berlin?

Red Pineapple Media distributes video advertising to more than 50 markets, and we've been expanding consistently since we started 6 years ago.

Our engineering team is built around a strong culture of teamwork. Code reviews, joint presentations and group decisions are standard for us. We'll often pick up the projector and do pair programming on the big wall of our office, or just sit together in one of our quiet rooms to prepare architectural changes or to give peer-to-peer feedback.

We care deeply about continual improvement, and have an RFC process in place to enable team members to influence our evolving standard and practices.

We're in an exciting phase right now as we're transitioning to programmatic buying and selling of advertisement space. The number of non-trivial challenges ahead is large, and the learning opportunities rich. From intelligently bidding for advertisement space in real time, to applying clustering and classification techniques to improve ad targeting, our future is full of opportunities for functional-programming goodness

What attitude are we looking for?

  • You have a strong sense of ownership and responsibility;
  • You're ready to work independently, clearly define problems, and objectively evaluate tradeoffs of potential solutions;
  • You're naturally motivated and proud of doing great work;
  • You believe that clear communication (including documentation and Git history) are a key part of good software engineering;
  • Your thought process is guided by rationalism and evidence rather than gut feeling or tradition;
  • You enjoy diversity (including differences of opinion), and have a humble attitude when engaging in discussions;
  • You sincerely welcome constructive criticism, and communicate with regard for the feelings of others.

What do we value in people?

  • Code needs to be read by humans, so you write code and documentation optimising for clarity;
  • You understand the importance of testing and automation, and avoiding repeating the same mistakes;
  • You get things done not only when starting exciting new projects but also when refactoring inelegant legacy code;
  • You're ready to work daily with Linux systems, AWS, Git, Docker and a steadily growing Microservice infrastructure;
  • You're ready to embrace the DevOps way of life, because an Engineer's work doesn't end after 'git push';
  • Your studies were in computer science, mathematics, engineering or a related area;
  • Alternatively: you have an awesome GitHub profile to show off :-)
  • You have worked with Clojure, ClojureScript, or other functional programming languages (and you're interested in learning Clojure!);
  • You have worked with distributed systems and have dealt with problems related to concurrency, performance and fault tolerance;
  • Curiosity is a constant in you. You don't settle for the same language or paradigm for too long and are eager to experiment and learn new things.

What we offer

Never a dull moment. Besides writing code, we also do our own DevOps, testing, retrospectives, planning, architecture, peer-to-peer evaluation, coffee and cooking

Small teams, lots of freedom

Every few months we organise in small teams around well-defined business objectives, and we have complete ownership over the approach and process used to achieve them. This includes: planning, work methodology, design, development and maintenance. We also decide when and how to tackle technical debt, and we are the sole owners of these decisions. Then, after some time, we reset the teams and choose new challenges to work on.

A safe haven for functional programmers

Even if your background is in non-functional programming, if you want to do functional programming then Red Pineapple Media is the place for you. You'll find as many challenges here as learning opportunities. You'll also have the chance to try new things and explore. We regularly hold research weeks where you can spend your time investigating and building anything you want.

Friendly environment plus quiet rooms

We regularly hold team breakfasts, barbecues, and ping-pong matches. We're super animal friendly: 4 dog owners, 2 vegans, 1 vegetarian and a cat-loving CEO. Naturally, dogs are welcome in the office. But we also optimise for focus and have quiet rooms where you can do power-naps, meditate or just work in isolation.

Do what you want - and own it

We believe that when given independence and room to grow, people tend to do great things. If you want to learn something new, fix that annoying Elasticsearch performance problem or focus on creating nicer looking brandings or reports, it's up to you. As long as our business objectives are achieved, you own and control your time and what to do with it.

Compensation

Depends on experience: we're currently looking for both intermediate and senior engineers.

About Red Pineapple Media

Red Pineapple Media is a passionate, dedicated team of content and marketing professionals connecting advertisers, publishers, and consumers all over the globe. We're driven by one simple goal: deliver campaigns that mutually benefit the advertiser, publisher, and the consumer. It's a strategy that has seen us successfully help over 300 advertisers increase their exposure and boost online media ROI in more than 56 markets -- and counting.

You can learn more about us at www.redpineapplemedia.com.

Permalink

Copyright © 2009, Planet Clojure. No rights reserved.
Planet Clojure is maintained by Baishamapayan Ghose.
Clojure and the Clojure logo are Copyright © 2008-2009, Rich Hickey.
Theme by Brajeshwar.