Animate on scroll


  duration: 500,
  offset: 100,
  easing: 'ease-in-out',
  disable: 'mobile'


<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>

<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>

<div class="item" data-aos="slide-up">7</div>

<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>

Images Lazy Load


<img class="lazyload" data-src="../img.jpg" width="200" height="100">


var lazyLoadSettings = {
    elements_selector: '.lazyload'

var lazyLoadGlobal = new LazyLoad(lazyLoadSettings);

If you need to refresh lozyLoad for dynamically loaded images:

$(document).on('lazyLoadRefresh', function () {

$(document).trigger('lazyLoadRefresh'); // Use this line after successful DOM update

Free Resources

All Resources

-> Business <-


  • HTML5 UP: Responsive HTML5 and CSS3 site templates.
  • Templated: A collection of 845 free CSS & HTML5 site templates.
  • Strikingly: Free, unlimited mobile optimized websites for strikingly domains.
  • Layers: A WordPress site builder so simple. It’s free, forever.
  • Bootstrap Zero: The largest open-source, free Bootstrap template collection.


  • Signature Maker: A free web based tool that creates your handwritten digital signature.


  • Wave: Free & easy accounting, invoicing and more.


  • Kiss: Free legal docs for startup founders and investor.
  • Docracy: An open collection of free legal documents.
  • Shake: Create, sign and send legally binding agreements in seconds. Free for personal use.


  • Skitch: Your ideas become reality faster.


  • Naminum: Discover a perfect company name.
  • Wordoid: Pick a short and catchy name for your business.
  • Domainr: Fast, free, domain name search, short URLs.

-> Marketing <-


  • Hemingway: Hemingway App makes your writing bold and clear.
  • Grammarly: Finds & corrects mistakes of your writing.
  • Medium: Everyone’s stories and ideas.
  • ZenPen: The minimal writing tool of web.
  • Social Locker: Ask visitors “to pay” for your content with a tweet, etc.
  • Egg Timer: Set a time and bookmark it for repeated use.
  • Wattpad: The world’s largest community for readers and writers.
  • Known: A single site for the content you create.
  • Wattpad: The world’s largest community for readers and writers.
  • Dbook: Structured and collaborative writing for large documents.
  • When you return your text will still be here.


  • Buzzsumo: Analyze what content performs best for any topic or competitor.
  • Swayy: Discover the most engaging content. Free for 1 dashboard user.
  • Ruzzit: Find the most shared content on the web.


  • Ahrefs: Site explorer & backlink checker.
  • SimilarWeb: Analyze website statistics for any domain.
  • Browseo: How search engines see your website.
  • Copyscape: Search for copies of your page on the web.
  • Pingdom: Test & the load time of a site.
  • GTMetrics: Analyze your page’s speed performance.
  • Moz Local: Check your local listings on Google, Bing, and others.
  • XML Sitemaps: Sitemap generator that creates XML & HTML variants.


  • Kraken: Optimize your images & accelerate your websites.
  • ImageOptim: Makes images take up less disk space & load faster.
  • Image optimizer WordPress plugin.
  • InstaMockup: Create beautiful screenshots of your app or website.


  • Canva: Amazingly simple graphic design for bloggers.
  • Pixlr: Pixlr Editor is a robust browser photo editor.
  • Skitch: Get your point across with fewer words.
  • Empowers anyone to create & share powerful visuals.
  • Placeit: Free product mockups & templates.
  • Recite: Turn a quote into a visual masterpiece.
  • Pablo: Design engaging images for your social media posts in under 30 seconds.


  • Mailchimp: Send 12,000 emails to 2,000 subscribers for free.
  • Mandrill: The fastest way to deliver email. Free 12K emails/month.
  • Mailgun: The Email Service For Developers. Free 10K emails/month.
  • Sendgrid: Delivers your transactional and marketing email. Free 12K emails/month.
  • Mailtrack: The best free email tracking solution.
  • Beefree: Free Email editor to build responsive design messages.


  • Primer: No-nonsense, jargon-free marketing lessons (by Google).
  • MailCharts: A FREE email course to help you become a better marketer.


  • Spruce: Make Twitter ready images in seconds.
  • Latergram: Easily plan & schedule your Instagram posts.
  • How Many Shares Count how many shares a URL has across most social networks, all in one place.
  • SocialRank: Identify, organize, and manage your followers on Twitter.
  • Klout: Social media influence score on browser extension.
  • Bitly: Create, share, and track shortened links.
  • Filament: A free beautiful and customizable sharing bar.
  • Addthis: Get more shares, follows and conversions.
  • Sumome Share: Auto-optimizes your share buttons for max traffic.
  • Digg Digg: Your all in one share buttons plugin.
  • Disqus: Build a community of active readers & commenters.


  • Typeform: Free beautiful online survey & form builder.
  • Tally: Create polls in no time.
  • Batch: The first-ever 100% free engagement platform for mobile apps.
  • Helprace: Customer service tool. Free for up to 3 agents for small support teams.


  • Petit Hacks: Acquisition, retention, & revenue hacks used by companies.
  • Optimizely: One optimization platform for websites and mobile apps.
  • Hello Bar: Tool for A/B testing different CTAs & power words.

-> Design & Code <-


  • Freebbble: High-quality design freebies from Dribbble.
  • Dribbble: Dribbble search results for “freebie”. An absolute freebie treasure.
  • Pixel Buddha: Free and premium resources for professional community.
  • Fribbble: Free PSD resources by Dribbblers curated by Gilbert Pellegrom.
  • Freebiesbug: Latest free PSDs & other resources for designers.
  • 365 Psd: Download a free psd every day.
  • Dbf: Dribbble & Behance best design freebies.
  • Marvel: Free resources from designers we love.
  • UI Space: High quality hand-crafted Freebies for awesome people.
  • Freepik: iFree graphic resources for everyone.
  • Tech&All: PSD, Tech News, and other resources for free.
  • Tethr: The most beautiful IOS design KIT ever.
  • Web3Canvas: PSD Freebies, HTML Snippets, Inspirations & Tutorials.


  • Coolors: Super fast color schemes generator for cool designers.
  • Skala Color: An extraordinary color picker for designers and developers.
  • 0 to 255: A simple tool that helps web designers find variations of any color.


  • FLTDSGN: Daily showcase of the best flat UI design websites and apps.
  • UI Cloud: The largest user interface design database in the world.
  • Moodboard: Build a beautiful moodboard and share the result.
  • Crayon: The most comprehensive collection of marketing designs.
  • Ocean: A community of designers sharing feedback.
  • Behance: Showcase & discover creative work.
  • Pttrns: Mobile user interface patterns.
  • Awwwards: The awards for design, creativity and innovation.
  • UI Parade: User interface design tools and design inspiration.
  • Niice: A search engine with taste.


  • Stock Up: Best free stock photo websites in one place.
  • Pexels: Best free photos in one place.
  • Unsplash: Free (do whatever you want) high-resolution photos.
  • Splashbase: Search & discover free, hi res photos & videos.
  • Jay Mantri: Free pics. do anything (CC0). Make magic.
  • Moveast: This is a journey of a portuguese guy moving east.
  • Mazwai: Free creative commons HD video clips & footages.
  • Super Famous: Photos by Dutch interaction designer Folkert Gorter.
  • Super Famous: Photos by Dutch interaction designer Folkert Gorter.
  • IM Free: A curated collection of free resources.
  • Cupcake: A photographer’s treat by Jonas Nilsson Lee.
  • MMT: Free stock photos by Jeffrey Betts.
  • Raumrot: Free high-resolution picture.
  • Bucketlistly: A free creative common collection of travel photos.
  • I also handpicked some free photo packs:


  • TypeGenius: Find the perfect font combo for your next project.
  • DaFont: Archive of freely downloadable fonts.
  • FontPark: The web’s largest archive of free fonts.
  • Typekit: A limited collection of fonts to use on a website or in applications.


  • Flat Icon: A search engine for 16000+ glyph vector icons.
  • MakeAppIcon: Generate App Icons of all sizes with a click.
  • Ico Moon: 4000+ free vector icons, icon generator.
  • Ego Icons: 100 Free vector icons with a clean look and feel.
  • FlatIcons: Free flat icon customizer, royalty free.


  • UI Names: Generate random names for use in designs and mockups.
  • UI Faces: Find and generate sample avatars for user interfaces.
  • Sonics: Free packs of UI sounds and sound effects delivered to your inbox every month.


  • Hive: First free unlimited cloud service in the world.
  • GitHub: Build software better, together.
  • BitBucket: Git and Mercurial code management for teams
  • Chisel: Chisel offers an unlimited number of fossil repositories.
  • Visual Studio: Comprehensive collection of developer tools and services.
  • Landscape: Landscape is an early warning system for your Python codebase.
  • Swiftype: Add great search to any website. Free with limitations.
  • Gather all the data you want & start getting the answers you need.
  • Coveralls: Test coverage history and statistics.
  • LingoHub: Free for Small Teams, Open Source usage and Educational projects.
  • Codacy: Continuous Static Analysis designed to complement your unit tests.
  • TinyCert: Free SSL certificates for your startup.
  • Opbeat: The first ops platform for developers. Free for small teams.
  • Pingdom: Website monitoring. Free for one website.
  • Rollbar: Full-stack error monitoring for all apps in any language.
  • Loggly: Simplify Log Management Forever. Free for one user.
  • Devport: Get your developer portfolio.
  • Getting Real: The smarter way to build web apps. A free book by 37signals.
  • Peek: Get a free, 5-minute video of someone using your site.
  • Creator: Build better Ionic apps, faster.
  • DevFreeCasts: A huge collection of free screencasts for developers.
  • Cody: A free library of HTML, CSS, JS nuggets.

-> Productivity <-


  • Noisli: Background noise & color generator.
  • Noizio: Ambient sound equalizer for relax or productivity.
  • Defonic: Combine the sounds of the world into a melody.
  • Octave: A free library of UI sounds, handmade for iOS.
  • Free Sound: Huge database of free audio snippets, samples, + recordings.
  • Sonics: Free packs of UI sounds and sound effects delivered to your inbox every month.


  • Self Control: Mac: free application to help you avoid distracting websites.
  • Cold Turkey: Windows: temporarily block yourself off of distracting websites.


  • Trello: Keeps track of everything.
  • Evernote: The workspace for your life’s work.
  • Yanado: Tasks management inside Gmail.
  • Free, fast, private and easy image and file hosting.
  • Pocket: View later, put it in Pocket.
  • Raindrop: Mac app for bookmarking and reading it later.
  • Flowdock: Free for teams of five and non-profits.
  • Typetalk: Share and discuss ideas with your team through instant messaging.
  • Slack: Free for unlimited users with few limited features.
  • HipChat: Free for unlimited users with few limited features.
  • Google Hangouts: Bring conversations to life with photos, emoji and group video calls.
  • Voveet: Simple, free 3D conference calls. Experience the difference.
  • FreeBusy: Eliminate coordination headaches when you need to schedule a meeting.
  • RealTimeBoard: Your regular whiteboard, re-thought for the best online experience.
  • Witkit: Witkit is the secure platform for teams. 50GB of free encrypted data storage.
  • Get things done with your team.
  • Asana: Teamwork without email.


  • Nomad House: Houses around the world for nomads to live and work together.
  • Lastroom: Simplifying your team travel management
  • Nomadlist: The best cities to live and work remotely.
  • Nomad Jobs: The best remote jobs at the best startups.

-> Learn <-


  • Beta List: Discover and get early access to tomorrow’s startups.
  • Startups List: Collections of the best startups in different places.


  • Assembly: Co-create new ideas no matter where they are.


  • Coursera: Free online classes from 80+ top universities & organizations.
  • Khan Academy: Free, world-class education for anyone, anywhere.
  • Skillshare: Unlock your creativity with free online classes & projects.
  • Startup Notes: Startup School invites amazing founders to tell their story.
  • Closed Club: Browse shut-down start-ups & learn why they closed down.
  • All free programming learning resources.
  • Mixergy: Learn from proven entrepreneurs.
  • Hackdesign: Receive a design lesson in your inbox each week.


  • Email1K: A free 30 day course to double your email list.
  • Startup Digest: Personalized newsletter for all things startup in your area.


  • Foundrs: Co-founder equity calculator.
  • Pitcherific: Pitcherific helps you create, train, and improve your pitch.

Website Credibility

1. Make it easy to verify the accuracy of the information on your site.

You can build web site credibility by providing third-party support (citations, references, source material) for information you present, especially if you link to this evidence. Even if people don’t follow these links, you’ve shown confidence in your material.

2. Show that there’s a real organization behind your site.

Showing that your web site is for a legitimate organization will boost the site’s credibility. The easiest way to do this is by listing a physical address. Other features can also help, such as posting a photo of your offices or listing a membership with the chamber of commerce.

3. Highlight the expertise in your organization and in the content and services you provide.

Do you have experts on your team? Are your contributors or service providers authorities? Be sure to give their credentials. Are you affiliated with a respected organization? Make that clear. Conversely, don’t link to outside sites that are not credible. Your site becomes less credible by association.

4. Show that honest and trustworthy people stand behind your site.

The first part of this guideline is to show there are real people behind the site and in the organization. Next, find a way to convey their trustworthiness through images or text. For example, some sites post employee bios that tell about family or hobbies.

5. Make it easy to contact you.

A simple way to boost your site’s credibility is by making your contact information clear: phone number, physical address, and email address.

6. Design your site so it looks professional (or is appropriate for your purpose).

We find that people quickly evaluate a site by visual design alone. When designing your site, pay attention to layout, typography, images, consistency issues, and more. Of course, not all sites gain credibility by looking like The visual design should match the site’s purpose.

7. Make your site easy to use – and useful.

We’re squeezing two guidelines into one here. Our research shows that sites win credibility points by being both easy to use and useful. Some site operators forget about users when they cater to their own company’s ego or try to show the dazzling things they can do with web technology.

8. Update your site’s content often (at least show it’s been reviewed recently).

People assign more credibility to sites that show they have been recently updated or reviewed.

9. Use restraint with any promotional content (e.g., ads, offers).

If possible, avoid having ads on your site. If you must have ads, clearly distinguish the sponsored content from your own. Avoid pop-up ads, unless you don’t mind annoying users and losing credibility. As for writing style, try to be clear, direct, and sincere.

10. Avoid errors of all types, no matter how small they seem.

Typographical errors and broken links hurt a site’s credibility more than most people imagine. It’s also important to keep your site up and running.

  1. Website Credibility by Stanford

What happens when you type a URL in browser

Apart from being a very common interview question, this is one of the very first query which lingers around in our mind every time we type a URL in a browser. Here is an attempt to satiate this quest while we delve into the details of what happens in the background when we type a URL in our browsers.

Step 1. URL is typed in the browser.

Step 2. If requested object is in browser cache and is fresh, move on to Step  8.

Step 3. DNS lookup to find the ip address of the server

when we want to connect to, we actually want to reach out to a server where google web services are hosted. One such server is having an ip address of Now, if you type “” in your browser, this will take you to google home page itself. Which means, “” and “” are nothing but same stuff. But, it is not so. Google has multiple servers in multiple locations to cater to the huge volume of requests they receive per second. Thus we should let Google decide which server is best suited to our needs. Using “” does the job for us. When we type “”, DNS(Domain Name System) services comes into play and resolves the URL to a proper ip address.

Following is a summary of steps happening while DNS service is at work:

  • Check browser cache: browsers maintain cache of DNS records for some fixed duration. So, this is the first place to resolve DNS queries.
  • Check OS cache: if browser doesn’t contain the record in its cache, it makes a system call to underlying Operating System to fetch the record as OS also maintains a cache of recent DNS queries.
  •  Router Cache: if above steps fail to get a DNS record, the search continues to your router which has its own cache.
  •  ISP cache: if everything fails, the search moves on to your ISP. First, it tries in its cache, if not found – ISP’s DNS recursive search comes into picture. DNS lookup is again a complex process which finds the appropriate ip address from a list of many options available for websites like Google. You can read more about this here.

For the DNS enthusiasts – here is a great guide worth reading.

Step 4. Browser initiates a TCP connection with the server.

Step 5. Browser sends a HTTP request to the server.

Browser sends a GET request to the server according to the specification of HTTP(Hyper Text Transfer Protocol) protocol.

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Cookie: datr=1265876274-[…]; locale=en_US; lsd=WW[…]; c_user=2101[…]

Here, browser passes some meta information in the form of headers to the server along with the URL – “”. User-Agent header specifies the browser properties, Accept-Encoding headers specify the type of responses it will accept. Connection header tells the server to keep open the TCP connection established here. The request also contains Cookies, which are meta information stored at the client end and contain previous browsing session information for the same website in the form of key-value pairs e.g. the login name of the user for Google.

A quick guide to HTTP specification can be found here.

Step 6. Server handles the incoming request

HTTP request made from browsers are handled by a special software running on server – commonly known as web servers e.g. Apache, IIS etc. Web server passes on the request to the proper request handler – a program written to handle web services e.g. PHP, ASP.NET, Ruby, Servlets etc.
For example URL- is handled by a program written in PHP file – index.php. As soon as GET request for index.php is received, Apache(our webserver at prepares the environment to execute index.php file. Now, this php program will generate a response – in our case a HTML response. This response is then sent back to the browser according to HTTP guidelines.

Step 7. Browser receives the HTTP response

HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Connection: Keep-Alive
Content-length: 1215
Date: Fri, 30 May 2014 08:10:15 GMT

………<some blob> …………….

HTTP response starts with the returned status code from the server. Following is a very brief summary of what a status code denotes:        

  •         1xx indicates an informational message only
  •         2xx indicates success of some kind
  •         3xx redirects the client to another URL
  •         4xx indicates an error on the client’s part
  •         5xx indicates an error on the server’s part

Server sets various other headers to help browser render the proper content. Content-Type tells the type of the content the browser has to show, Content-length tells the number of bytes of the response. Using the Content-Encoding header’s value, browsers can decode the blob data present at the end of the response.

Step 8. Browsers displays the html content

Rendering of html content is also done in phases. The browser first renders the bare bone html structure, and then it sends multiple GET requests to fetch other hyper linked stuff e.g. If the html response contains an image in the form of img tags such as <img src=”/assets/img/logo.png” />, browser will send a HTTP GET request to the server to fetch the image following the complete set of steps which we have seen till now. But this isn’t that bad as it looks. Static files like images, javascript, css files are all cached by the browser so that in future it doesn’t have to fetch them again.     

Step 9. Client interaction with server

Once a html page is loaded, there are several ways a user can interact with the server. For example, he call fill out a login form to sign in to the website. This also follows all the steps listed above, the only difference is that the HTTP request this time would be a POST instead of GET and along with that request, browser will send the form data to the server for processing (username and password in this case).
Once server authenticates the user, it will send the proper HTML content(may be user’s profile) back to the browser and thus user will see that new webpage after his login request is processed.

Step 10. AJAX queries

Another form of client interaction with server is through AJAX(Asynchronous JavaScript And XML) requests. This is an asynchronous GET/POST request to which server can send a response back in a variety of ways – json, xml, html etc. AJAX requests doesn’t hinder the current view of the webpage and work in the background. Because of this, one can dynamically modify the content of a webpage by calling an AJAX request and updating the web elements using Javascript.

Hopefully, that gives you an idea of what happens in the background when we do a really simple operation which is type a URL in a browser.

How it feels to learn JavaScript in 2016

How it feels to learn JavaScript in 2016

Edit: Thanks for pointing typos and mistakes, I’ll update the article as noted. Discussion in HackerNews and Reddit.

The following is inspired by the article “It’s the future” from Circle CI. You can read the original here. This piece is just an opinion, and like any JavaScript framework, it shouldn’t be taken too seriously. No JavaScript frameworks were created during the writing of this article.

Hey, I got this new web project, but to be honest I haven’t coded much web in a few years and I’ve heard the landscape changed a bit. You are the most up-to date web dev around here right?

-The actual term is Front End engineer, but yeah, I’m the right guy. I do web in 2016. Visualisations, music players, flying drones that play football, you name it. I just came back from JsConf and ReactConf, so I know the latest technologies to create web apps.

Cool. I need to create a page that displays the latest activity from the users, so I just need to get the data from the REST endpoint and display it in some sort of filterable table, and update it if anything changes in the server. I was thinking maybe using jQuery to fetch and display the data?

-Oh my god no, no one uses jQuery anymore. You should try learning React, it’s 2016.

Oh, OK. What’s React?

-It’s a super cool library made by some guys at Facebook, it really brings control and performance to your application, by allowing you to handle any view changes very easily.

That sounds neat. Can I use React to display data from the server?

-Yeah, but first you need to add React and React DOM as a library in your webpage.

Wait, why two libraries?

-So one is the actual library and the second one is for manipulating the DOM, which now you can describe in JSX.

JSX? What is JSX?

-JSX is just a JavaScript syntax extension that looks pretty much like XML. It’s kind of another way to describe the DOM, think of it as a better HTML.

What’s wrong with HTML?

-It’s 2016. No one codes HTML directly anymore.

Right. Anyway, if I add these two libraries then I can use React?

-Not quite. You need to add Babel, and then you are able to use React.

Another library? What’s Babel?

-Oh, Babel is a transpiler that allows you to target specific versions of JavaScript, while you code in any version of JavaScript. You don’t HAVE to include Babel to use ReactJS, but unless you do, you are stuck with using ES5, and let’s be real, it’s 2016, you should be coding in ES2016+ like the rest of the cool kids do.

ES5? ES2016+? I’m getting lost over here. What’s ES5 and ES2016+?

-ES5 stands for ECMAScript 5. It’s the edition that has most people target since it has been implemented by most browsers nowadays.


-Yes, you know, the scripting standard JavaScript was based on in 1999 after its initial release in 1995, back then when JavaScript was named Livescript and only ran in the Netscape Navigator. That was very messy back then, but thankfully now things are very clear and we have, like, 7 editions of this implementation.

7 editions. For real. And ES5 and ES2016+ are?

-The fifth and seventh edition respectively.

Wait, what happened with the sixth?

-You mean ES6? Yeah, I mean, each edition is a superset of the previous one, so if you are using ES2016+, you are using all the features of the previous versions.

Right. And why use ES2016+ over ES6 then?

-Well, you COULD use ES6, but to use cool features like async and await, you need to use ES2016+. Otherwise you are stuck with ES6 generators with coroutines to block asynchronous calls for proper control flow.

I have no idea what you just said, and all these names are confusing. Look, I’m just loading a bunch of data from a server, I used to be able to just include jQuery from a CDN and just get the data with AJAX calls, why can’t I just do that?

-It’s 2016 man, no one uses jQuery anymore, it ends up in a bunch of spaghetti code. Everyone knows that.

Right. So my alternative is to load three libraries to fetch data and display a HTML table.

-Well, you include those three libraries but bundle them up with a module manager to load only one file.

I see. And what’s a module manager?

-The definition depends on the environment, but in the web we usually mean anything that supports AMD or CommonJS modules.

Riiight. And AMD and CommonJS are…?

-Definitions. There are ways to describe how multiple JavaScript libraries and classes should interact. You know, exports and requires? You can write multiple JavaScript files defining the AMD or CommonJS API and you can use something like Browserify to bundle them up.

OK, that makes sense… I think. What is Browserify?

-It’s a tool that allows you to bundle CommonJS described dependencies to files that can be run in the browser. It was created because most people publish those dependencies in the npm registry.

npm registry?

-It’s a very big public repository where smart people put code and dependencies as modules.

Like a CDN?

-Not really. It’s more like a centralised database where anyone can publish and download libraries, so you can use them locally for development and then upload them to a CDN if you want to.

Oh, like Bower!

-Yes, but it’s 2016 now, no one uses Bower anymore.

Oh, I see… so I need to download the libraries from npm then?

-Yes. So for instance, if you want to use React , you download the React module and import it in your code. You can do that for almost every popular JavaScript library.

Oh, like Angular!

-Angular is so 2015. But yes. Angular would be there, alongside VueJS or RxJS and other cool 2016 libraries. Want to learn about those?

Let’s stick with React, I’m already learning too many things now. So, if I need to use React I fetch it from this npm and then use this Browserify thing?


That seems overly complicated to just grab a bunch of dependencies and tie them together.

-It is, that’s why you use a task manager like Grunt or Gulp or Broccoli to automate running Browserify. Heck, you can even use Mimosa.

Grunt? Gulp? Broccoli? Mimosa? The heck are we talking about now?

-Task managers. But they are not cool anymore. We used them in like, 2015, then we used Makefiles, but now we wrap everything with Webpack.

Makefiles? I thought that was mostly used on C or C++ projects.

-Yeah, but apparently in the web we love making things complicated and then going back to the basics. We do that every year or so, just wait for it, we are going to do assembly in the web in a year or two.

Sigh. You mentioned something called Webpack?

-It’s another module manager for the browser while being kind of a task runner as well. It’s like a better version of Browserify.

Oh, Ok. Why is it better?

-Well, maybe not better, it’s just more opinionated on how your dependencies should be tied. Webpack allows you to use different module managers, and not only CommonJS ones, so for instance native ES6 supported modules.

I’m extremely confused by this whole CommonJS/ES6 thing.

-Everyone is, but you shouldn’t care anymore with SystemJS.

Jesus christ, another noun-js. Ok, and what is this SystemJS?

-Well, unlike Browserify and Webpack 1.x, SystemJS is a dynamic module loader that allows you to tie multiple modules in multiple files instead of bundling them in one big file.

Wait, but I thought we wanted to build our libraries in one big file and load that!

-Yes, but because HTTP/2 is coming now multiple HTTP requests are actually better.

Wait, so can’t we just add the three original libraries for React??

-Not really. I mean, you could add them as external scripts from a CDN, but you would still need to include Babel then.

Sigh. And that is bad right?

-Yes, you would be including the entire babel-core, and it wouldn’t be efficient for production. On production you need to perform a series of pre-tasks to get your project ready that make the ritual to summon Satan look like a boiled eggs recipe. You need to minify assets, uglify them, inline css above the fold, defer scripts, as well as-

I got it, I got it. So if you wouldn’t include the libraries directly in a CDN, how would you do it?

-I would transpile it from Typescript using a Webpack + SystemJS + Babel combo.

Typescript? I thought we were coding in JavaScript!

-Typescript IS JavaScript, or better put, a superset of JavaScript, more specifically JavaScript on version ES6. You know, that sixth version we talked about before?

I thought ES2016+ was already a superset of ES6! WHY we need now this thing called Typescript?

-Oh, because it allows us to use JavaScript as a typed language, and reduce run-time errors. It’s 2016, you should be adding some types to your JavaScript code.

And Typescript obviously does that.

-Flow as well, although it only checks for typing while Typescript is a superset of JavaScript which needs to be compiled.

Sigh… and Flow is?

-It’s a static type checker made by some guys at Facebook. They coded it in OCaml, because functional programming is awesome.

OCaml? Functional programming?

-It’s what the cool kids use nowadays man, you know, 2016? Functional programming? High order functions? Currying? Pure functions?

I have no idea what you just said.

-No one does at the beginning. Look, you just need to know that functional programming is better than OOP and that’s what we should be using in 2016.

Wait, I learned OOP in college, I thought that was good?

-So was Java before being bought by Oracle. I mean, OOP was good back in the days, and it still has its uses today, but now everyone is realising modifying states is equivalent to kicking babies, so now everyone is moving to immutable objects and functional programming. Haskell guys had been calling it for years, -and don’t get me started with the Elm guys- but luckily in the web now we have libraries like Ramda that allow us to use functional programming in plain JavaScript.

Are you just dropping names for the sake of it? What the hell is Ramnda?

-No. Ramda. Like Lambda. You know, that David Chambers’ library?

David who?

-David Chambers. Cool guy. Plays a mean Coup game. One of the contributors for Ramda. You should also check Erik Meijer if you are serious about learning functional programming.

And Erik Meijer is…?

-Functional programming guy as well. Awesome guy. He has a bunch of presentations where he trashes Agile while using this weird coloured shirt. You should also check some of the stuff from Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Ok. I’m going to stop you there. All that is good and fine, but I think all that is just so complicated and unnecessary for just fetching data and displaying it. I’m pretty sure I don’t need to know these people or learn all those things to create a table with dynamic data. Let’s get back to React. How can I fetch the data from the server with React?

-Well, you actually don’t fetch the data with React, you just display the data with React.

Oh, damn me. So what do you use to fetch the data?

-You use Fetch to fetch the data from the server.

I’m sorry? You use Fetch to fetch the data? Whoever is naming those things needs a thesaurus.

-I know right? Fetch it’s the name of the native implementation for performing XMLHttpRequests against a server.

Oh, so AJAX.

-AJAX is just the use of XMLHttpRequests. But sure. Fetch allows you to do AJAX based in promises, which then you can resolve to avoid the callback hell.

Callback hell?

-Yeah. Every time you perform an asynchronous request against the server, you need to wait for its response, which then makes you to add a function within a function, which is called the callback pyramid from hell.

Oh, Ok. And this promise thing solves it?

-Indeed. By manipulating your callbacks through promises, you can write easier to understand code, mock and test them, as well as perform simultaneous requests at once and wait until all of them are loaded.

And that can be done with Fetch?

-Yes, but only if your user uses an evergreen browser, otherwise you need to include a Fetch polyfill or use Request, Bluebird or Axios.

How many libraries do I need to know for god’s sake? How many are of them?

-It’s JavaScript. There has to be thousands of libraries that all do the same thing. We know libraries, in fact, we have the best libraries. Our libraries are huuuge, and sometimes we include pictures of Guy Fieri in them.

Did you just say Guy Fieri? Let’s get this over with. What these Bluebird, Request, Axios libraries do?

-They are libraries to perform XMLHttpRequests that return promises.

Didn’t jQuery’s AJAX method start to return promises as well?

-We don’t use the “J” word in 2016 anymore. Just use Fetch, and polyfill it when it’s not in a browser or use Bluebird, Request or Axios instead. Then manage the promise with await within an async function and boom, you have proper control flow.

It’s the third time you mention await but I have no idea what it is.

-Await allows you to block an asynchronous call, allowing you to have better control on when the data is being fetch and overall increasing code readability. It’s awesome, you just need to make sure you add the stage-3 preset in Babel, or use syntax-async-functions and transform-async-to-generator plugin.

This is insane.

-No, insane is the fact you need to precompile Typescript code and then transpile it with Babel to use await.

Wat? It’s not included in Typescript?

-It does in the next version, but as of version 1.7 it only targets ES6, so if you want to use await in the browser, first you need to compile your Typescript code targeting ES6 and then Babel that shit up to target ES5.

At this point I don’t know what to say.

-Look, it’s easy. Code everything in Typescript. All modules that use Fetch compile them to target ES6, transpile them with Babel on a stage-3 preset, and load them with SystemJS. If you don’t have Fetch, polyfill it, or use Bluebird, Request or Axios, and handle all your promises with await.

We have very different definitions of easy. So, with that ritual I finally fetched the data and now I can display it with React right?

-Is your application going to handle any state changes?

Err, I don’t think so. I just need to display the data.

-Oh, thank god. Otherwise I would had to explain you Flux, and implementations like Flummox, Alt, Fluxible. Although to be honest you should be using Redux.

I’m going to just fly over those names. Again, I just need to display data.

-Oh, if you are just displaying the data you didn’t need React to begin with. You would had been fine with a templating engine.

Are you kidding me? Do you think this is funny? Is that how you treat your loved ones?

-I was just explaining what you could use.

Stop. Just stop.

-I mean, even if it’s just using templating engine, I would still use a Typescript + SystemJS + Babel combo if I were you.

I need to display data on a page, not perform Sub Zero’s original MK fatality. Just tell me what templating engine to use and I’ll take it from there.

-There’s a lot, which one you are familiar with?

Ugh, can’t remember the name. It was a long time ago.

-jTemplates? jQote? PURE?

Err, doesn’t ring a bell. Another one?

-Transparency? JSRender? MarkupJS? KnockoutJS? That one had two-way binding.

Another one?

-PlatesJS? jQuery-tmpl? Handlebars? Some people still use it.

Maybe. Are there similar to that last one?

-Mustache, underscore? I think now even lodash has one to be honest, but those are kind of 2014.

Err.. maybe it was newer.

-Jade? DustJS?


-DotJS? EJS?


-Nunjucks? ECT?


-Mah, no one likes Coffeescript syntax anyway. Jade?

No, you already said Jade.

-I meant Pug. I meant Jade. I mean, Jade is now Pug.

Sigh. No. Can’t remember. Which one would you use?

-Probably just ES6 native template strings.

Let me guess. And that requires ES6.


Which, depending on what browser I’m using needs Babel.


Which, if I want to include without adding the entire core library, I need to load it as a module from npm.


Which, requires Browserify, or Wepback, or most likely that other thing called SystemJS.


Which, unless it’s Webpack, ideally should be managed by a task runner.


But, since I should be using functional programming and typed languages I first need to pre-compile Typescript or add this Flow thingy.


And then send that to Babel if I want to use await.


So I can then use Fetch, promises, and control flow and all that magic.

-Just don’t forget to polyfill Fetch if it’s not supported, Safari still can’t handle it.

You know what. I think we are done here. Actually, I think I’m done. I’m done with the web, I’m done with JavaScript altogether.

-That’s fine, in a few years we all are going to be coding in Elm or WebAssembly.

I’m just going to move back to the backend. I just can’t handle these many changes and versions and editions and compilers and transpilers. The JavaScript community is insane if it thinks anyone can keep up with this.

-I hear you. You should try the Python community then.


-Ever heard of Python 3?

It’s The Future


Hey, my boss said to talk to you – I hear you know a lot about web apps?

-Yeah, I’m more of a distributed systems guy now. I’m just back from ContainerCamp and Gluecon and I’m going to Dockercon next week. Really excited about the way the industry is moving – making everything simpler and more reliable. It’s the future!

Cool. I’m just building a simple web app at the moment – a normal CRUD app using Rails, going to deploy to Heroku. Is that still the way to go?

-Oh no. That’s old school. Heroku is dead – no-one uses it anymore. You need to use Docker now. It’s the future.

Oh, OK. What’s that?

-Docker is this new way of doing containerization. It’s like LXC, but it’s also a packaging format, a distribution platform, and tools to make distributed systems really easy.

Containeri.. — what now? What’s LXE?

-It’s LXC. It’s like chroot on steroids!

What’s cher-oot?

-OK, look. Docker. Containerization. It’s the future. It’s like virtualization but faster and cheaper.

Oh, so like Vagrant.

-No, Vagrant is dead. Everything is going to be containerized now, it’s the future.

OK, so I don’t need to know anything about virtualization?

-No, you still need virtualization, because containers don’t provide a full security story just yet. So if you want to run anything in a multi-tenant environment, you need to make sure you can’t escape the sandbox.

OK, I’m getting a little lost here. Let’s back it up. So there’s a thing like virtualization, called containers. And I can use this on Heroku?

-Well, Heroku has some support for docker, but I told you: Heroku’s dead. You want to run your containers on CoreOS.

OK, what’s that?

-It’s this cool Host OS you can use with Docker. Hell, you don’t even need Docker, you can use rkt.


-No, rkt.

Right, Rocket.

-No, it’s called rkt now. Totally different. It’s an alternative containerization format that isn’t as bundled together as Docker is, and so it’s more composable.

Is that good?

-Of course it’s good. Composability is the future.

OK, how do you use it?

-I don’t know. I don’t think anyone uses it.

Sigh. You were saying something about CoreOS?

-Yeah, so it’s a Host OS you use with Docker.

What’s a Host OS?

-A Host OS runs all your containers.

Runs my containers?

-Yeah, you gotta have something run your containers. So you set up like an EC2 instance, you put CoreOS on it, then run the Docker daemon, and then you can deploy Docker images to it.

Which part of that is the container?

-All of it. Look, you take your app, write a Dockerfile, turn it into an image locally, then you can push that to any Docker host.

Ah, like Heroku?

-No, not Heroku. I told you. Heroku is dead. You run your own cloud now using Docker.


-Yeah, it’s real easy. Look up #gifee.


-“Google’s infrastructure for everyone else”. You take some off the shelf tools and stacks, using containers, and you can have the same infrastructure Google has.

Why don’t I just use Google’s thing?

-You think that’s going to be around in 6 months?

OK, doesn’t someone else do hosting of this stuff? I really don’t want to host my own stuff.

-Well, Amazon has ECS, but you gotta write XML or some shit.

What about something on OpenStack?




Look I really don’t want to host my own stuff.

-No, it’s really easy. You just set up a Kubernetes cluster.

I need a cluster?

-Kubernetes cluster. It’ll manage the deployments of all your services.

I only have one service.

-What do you mean? You have an app right, so you gotta have at least 8-12 services?

What? No, just one app. Service, whatever. Just one of them.

-No, look into microservices. It’s the future. It’s how we do everything now. You take your monolithic app and you split it into like 12 services. One for each job you do.

That seems excessive.

-It’s the only way to make sure it’s reliable. So if your authentication service goes down…

Authentication service? I was just going to use this gem I’ve used a few times before.

-Great. Use the gem. Put it into it’s own project. Put a RESTful API on it. Then your other services use that API, and gracefully handle failure and stuff. Put it in a container and continuously deliver that shit.

OK, so now that I’ve got dozens of unmanageable services, now what?

-Yeah, I was saying about Kubernetes. That let’s you orchestrate all your services.

Orchestrate them?

-Yeah, so you’ve got these services and they have to be reliable so you need multiple copies of them. So Kubernetes makes sure that you have enough of them, and that they’re distributed across multiple hosts in your fleet, so it’s always available.

I need a fleet now?

-Yeah, for reliability. But Kubernetes manages it for you. And you know Kubernetes works cause Google built it and it runs on etcd.

What’s etcd?

-It’s an implementation of RAFT.

OK, so what’s Raft?

-It’s like Paxos.

Christ, how deep down this fucking rabbit hole are we going? I just want to launch an app. Sigh. Fuck, OK, deep breaths. Jesus. OK, what’s Paxos?

-Paxos is like this really old distributed consensus protocol from the 70s that no-one understands or uses.

Great, thanks for telling me about it then. And Raft is what?

-Since no-one understands Paxos, this guy Diego…

Oh, you know him?

-No, he works at CoreOS. Anyway, Diego built Raft for his PhD thesis cause Paxos was too hard. Wicked smart dude. And then he wrote etcd as an implementation, and Aphyr said it wasn’t shit.

What’s Aphyr?

-Aphyr is that guy who wrote, ‘Call Me Maybe.’ You know, the distributed systems and BDSM guy?

What? Did you say BDSM?

-Yeah, BDSM. It’s San Francisco. Everyone’s into distributed systems and BDSM.

Uh, OK. And he wrote that Katy Perry song?

-No, he wrote a set of blog posts about how every database fails CAP.

What’s CAP?

-The CAP theorem. It says that you can only have 2 out of 3 of Consistency, Availability and Partition tolerance.

OK, and all DBs fail CAP? What does that even mean?

-It means they’re shit. Like Mongo.

I thought Mongo was web scale?

-No one else did.

OK, so etcd?

-Yeah, etcd is a distributed key-value store.

Oh, like Redis.

-No, nothing like Redis. etcd is distributed. Redis loses half its writes if the network partitions.

OK, so it’s a distributed key-value store. Why is this useful?

-Kubernetes sets up a standard 5-node cluster using etcd as a message bus. It combines with a few of Kubernetes’ own services to provide a pretty resilient orchestration system.

5 nodes? I have one app. How many machines am I gonna need with all this?

-Well, you’re going to have about 12 services, and of course you need a few redundant copies of each, a few load balancers, the etcd cluster, your database, and the kubernetes cluster. So that’s like maybe 50 running containers.


-No big deal! Containers are really efficient, so you should be able to distribute these across like 8 machines! Isn’t that amazing?

That’s one way to put it. And with all this, I’ll be able to simply deploy my app?

-Sure. I mean, storage is still an open question with Docker and Kubernetes, and networking will take a bit of work, but you’re basically there!

I see. OK, I think I’m getting it.


Thanks for explaining it.

-No problem.

Let me just repeat it back to see if I’ve got it right.


So I just need to split my simple CRUD app into 12 microservices, each with their own APIs which call each others’ APIs but handle failure resiliently, put them into Docker containers, launch a fleet of 8 machines which are Docker hosts running CoreOS, “orchestrate” them using a small Kubernetes cluster running etcd, figure out the “open questions” of networking and storage, and then I continuously deliver multiple redundant copies of each microservice to my fleet. Is that it?

-Yes! Isn’t it glorious?

I’m going back to Heroku.