Open Letter for your first tech job

gq_hero_new-series-season-1Before telling good bye to 2017. I want to put this request for your first Tech Job. Thirteen years back I was looking for my first job. My name is Vikram Shetty and I have a Masters of Science (Information technology) degree with me. In 2004 I was looking for my job to become a Microsoft Dot Net programmer. I was an average programmer but I found my interest in programming. The epiphany hit me when I discovered C# Web service can talk to a web page using XML. It was as simple as creating it in 5 minutes. The Information Technology was recovering back after 2001 slow down. There wasn’t much job in the market and one of the option was campus placement, which I never came across. The other option was a job as a Tech Support (its like a Call Center). Every job has its own merits but I did not got selected in any one of those, I consider it as blessing in disguise. Information Technology industry has changed over a decade now, but young girls and boys are searching job as if it is 2005, even the format of the resume has not changed 🙂

In today’s market you if you are not getting job from normal channel. You should hack your way into the office, if you are passionate about programming or find it interesting.

#3 Crazy Hacks, you wouldn’t dare to do if you are not passionate 

  1. Find a startup you like and offer them to work for FREE. This is actually not risky if you are at home for last two months, what is stopping you from working and adding experience. If you are don’t have money for travel and lunch here is how you can earn for it. Watch this video, in India you can use OLX or Quikr
  2. Stop searching job the main job portals. Try other avenues like LinkedIn, Interview Fox, or AngleList with recent programming language like NodeJs, Ruby or Go
  3. Look for a remote job, It is 2018 and the world is your playground and you can work from anywhere with Laptop + internet. Remote Work

[Edited: 31/12/2017]

After this article was viewed by 45 people over 7 countries. Few of my friends suggested more hacks. Thank you Kritul, Piyush and Maunish. I am listing it down with my 0.2 cent to it.

#3 BONUS Hacks

  1. Meetup to collaborate with other developer and search for job. My 0.2 cent is find a meetup of Startup and Investor meet. Entrepreneur will go for funds there, if you can observe and find the one who are positive about getting funds ask them for job.
  2. https://github.com/ for participating in open source project to put it in your resume and https://stackoverflow.com/ to show your technical skills and gain points on your profile thus updating it in your resume. Your real work will be out in public. My 0.2 cent is find the people who have great work already and ask them for a job.
  3.  Product Hunt to find tech product (India), search a cool company and connect to the founder or contact us on there website. They often have few incoming emails so the possibility of reading your resume is high.

Hope this rant helps at least one person who reads this. Best of Luck!

Have an Epic 2018! 

75 constraints used in 2015 across the Globe for Global Day of Code Retreat

Tomorrow on 18th November 2017 is Global Day of Code Retreat 2017 #GDCR17 This will be my 3rd year in a row to attend and practice my craft. After 13 years of experience writing code it still feels like a ride in a theme park to attend Global Day of Code Retreat. In year 2015 I copied all the constraints from the website www.coderetreat.org

Image result for code retreat

Here are the 75 unique constraints that was used on that day

  1. Introduction to the problem
  2. Pair Programming
  3. Test Driven Development
  4. Small methods (<=5)
  5. No side-effect methods.
  6. No if-else
  7. No conditional statements
  8. No loop
  9. Ping Pong
  10. No constraints
  11. Babysteps
  12. Mute ping-pong
  13. Brutal refactoring game
  14. Zombies!
  15. Tell don’t ask
  16. Hexagonal board
  17. Simplicity
  18. No boolean flag
  19. No array
  20. Explore, Stabilize, Implement
  21. Pure Functions Only
  22. One Level of Indentation Per Method.
  23. No TDD, Honeymoon round
  24. TDD, keyboard only
  25. On paper
  26. TDD focus on behaviour
  27. TDD Like you mean it
  28. Code swapping
  29. No language primitives across method boundries.
  30. Make a test list No code in first 0 minutes, make a list of tests, then decide in which order to implement them
  31. No touchpad, no mouse.
  32. Intention, naming convention.
  33. Extreme OO
  34. First 0 minutes paper only, no arrays and no lists
  35. Acceptance tests only
  36. Use no matrix
  37. No Return statements!
  38. Pair programing, 0 min test paper only
  39. Fixed roles one writes tests, the other implements and swap 0 minutes before end all of the sudden 😉
  40. Maxlines per method
  41. No predefined datastructures
  42. Four Rules of Simple Design
  43. Closing Circle
  44. Commit every 5 minutes, delete the rest Reduce the time to 3 minutes Last round 1 minute
  45. Taking baby steps write exactly one test within 2 minutes and commit it if you are in time, if not revert the changes
  46. Clean code
  47. Everything is represented by an immutable object, objects cannot change state.
  48. Primitive Revulsion.
  49. Three Laws Compliant.
  50. Total Ego Annihilation.
  51. So Fresh, So Clean.
  52. Cells talking to cells De-emphasis on the GoL world / board.
  53. Pairs can only communicate via tests
  54. Round Robin dojo
  55. Legacy code! This is a longer  where devs unknowingly write untested legacy code with no restraints and halfway through they need to switch partners and maintain and refactor that code
  56. Driver gets keyboard
  57. Shortcuts are not allowed (e.g. ALT-TAB)
  58. Muted pair!
  59. Switch to 3 dimensions
  60. Object Calisthenics
  61. TDD + Simplicity + Immutable + Hive Board
  62. Noun Avoidance / Verb It Up, Verby Mc. Verberson
  63. Procedural (no tests) OR immutable objects
  64. Mob programming (basic Game of Life, no other constraints)
  65. Hive board (cell only has 6 neighbors instead of 8, a grid can be represented as a beehive) + mute mode (nobody can talk)
  66. 4 Verbs Only
  67. With graph constraints
  68. Extreme OO
  69. Evil Coder!
  70. Tell, don’t ask Only void methods
  71. Extract ’til you drop
  72. Exploratory testing
  73. Healing grid
  74. Let’s see how many alive cells you have on a 100X100 matrix after 1000 iterations ?
  75. No exceptions

Hope this list helps you tomorrow…

Constraint: Share this post Now!!! 😉 

A developer’s day in life

I have meet and worked with few developers. I have always found it common theme that they are always better at there task and programming however struggle with time management, project management and client understanding. Everyone is not in this category, its a mix and a match. Let me list out few example of true stories you may be able to relate.

Stories of developer struggles:

  1. Important and urgent emails are not replied for 2 days, especially when the email is from Exec/Director who is asking for some status directly to the developer (When its a flat structure).
  2. The Client has requested for apples and he gets apples tasting like oranges. Most common reason miss understanding of requirement
  3. The projects completes on time but gets over budget, due to number of hours spend by developers.
  4. Or the worst of them all not communicating back to the team when the task is done and there are half a dozen people who are eagerly waiting for it.
  5. so on…

Before even going further and giving my 2 cents blanket advice to budding developers. Here is the principles on which it has been derived. As a developer you much be aware why principles and patterns works out best and we don’t have to reinvent the wheel again. This is a 4 quadrant principle from the book “The Seven Habits of Highly Effective People” by Stephen Covey.

four-quadrants

As such the above image is self explanatory short detail about this is given here

Quadrant 1 is what you must be doing already, because your boss or client is keeping a watch on it. Quadrant 2, honestly if you are struggling as programmer or developer. You don’t bother its not on your books at all or only occasional thought. However remember this is most important quadrant for your career. The time we are saving will be invested in here.

Lets talk about Quadrant 3, mostly likely this will be your major time consuming activity. Some ones else priority, meeting that you need not attend, overthinking and over-designing a simple programming problem, creating generic frameworks in tight deadline and so on.

And your most common friend, Quadrant 4. Checking social media feeds again and again and again. Long coffee breaks and charts, playing games on your smart phone. Checking stock price every minute, Checking on news of countries you don’t belong. Have you ever thought of switching your phone for an hour and working on a programming task. Think about it.

Now that you have got a glimpse about possible struggle and resolving principles. Lets plan a day for you. Its cannot be repeated each day however it will work like a framework to bring yourself in track. Reminder I am not Nostradamus and I don’t have a crystal ball. Use your common sense!

The framework for your EPIC day:

  1. Your day starts at 5 minutes on previous night before you sleep. You know what are the big deadlines of your project. You pick 1 big task for a day, which will take around 90 to 120 minutes to finish. You also pick 2 small task which takes 30 minutes each. So you know your must complete task for the following day.
  2. Good morning! You don’t start with your day with your emails (No-Email). You pick your first task and complete it on the basis which you decided on the previous night. If you are scared of not checking your email first thing in the morning then come 2 hours early then your regular time. So to begin with you check your email as you used to check on your normal day.
  3. Once your big task is done you will already feel more accomplished for your day and you will find you are in control.
  4. You move on to your next 2 task once the first task is complete and the only other activity you can do to bend this rule is quadrant 1 task which is like Server crashed, Application down or fire in the building.
  5. Till you complete all 3 task for the day you will not take up any quadrant 3 task. If some one ask for help or your boss interrupts. Ask politely if you can do that post lunch, since you are middle of a billable task and in a zone. Most sane bosses will understand.
  6. Once you are done will all 3 task hope fully by your first half. Check your email before you take a lunch break. Reply to all the emails which will take less than 2 minutes. There are few example listed here. This tip form the book “Getting Things Done the art of stress free productivity” by David Allen
  7. So you had your lunch and you completed your BIG 3. Already feeling like ready to go home. Note: You have not spent an single minute on Quadrant 4 activity also being able to not do it for rest of your day. Being professional and giving your employer a bang for the buck.
  8. Now is the time for finishing your Quadrant 3 activity. Ideally in a time slot of 60 minutes each. Don’t take more than 2 task mentioning you are already working on some things else. which is already in your plate. Again use common sense in case of crisis and any quadrant one task.
  9. You need to take 10 mins of your planning this will help you if you are on course with your 3 months deliverable, your monthly deliverable, weekly deliverable and all your communications and dependencies.
  10. Planning: So I would recommend you to split it like 1st and 15th of the month check your Monthly deliverable. However 1st of every 3rd month check your 3 months deliverable. Every Friday check your weekly deliverable. Rest of the days check your daily goals. If you have time left check all the gaps of your communications. Like of you are waiting for some decisions or task. send a reminder. If you have completed a task send a notification. This time should be only for planning what to do. So the actual sending of email will be coming next. This time slot is only for brain work. Make good decisions here or I like to say thinking time.
  11. Now you again go back to your email to reply to all the long emails that you will have to read and reply and planned communication you did in previous step. Remember on a good non crisis day you would have spent only 10 minutes of your time on email before you reach at this 3rd email checking event. You keep a slot of 20 minutes to reply all Quadrant 1 and Quadrant 2 email. The main is quadrant 2 email especially relationship building with your clients and boss.
  12. For those you cannot reply answer them back you will reply them by tomorrow end of the day. Then you pick them up same time tomorrow in your 30 minute slot.
  13. The most fun time slot of your day begins, You will divide it into 2 slot, the First named as AutoBot and the second as MyWisdom each one about 45 minutes.
  14. AutoBot: This will be a time where you will add automation to your developer life. You will think of ways which you will do your task faster. Few example: Increase your programming speed by adding auto complete code snippet or some command script to automate your build, unit test and dev-deployment process. We are just following Do not repeat principles in our process. The out come of this time should be towards your long term goals, Should be able to used by your organization or your future team.
  15. MyWisdom: You should spend this 45 minutes for learning some thing new. Ideally by practicing it in a code base or setting up the tool in your computer. If possible avoid consuming articles or video during this time but actually getting hands dirty and making mistakes while learning new stuff. Asking important questions which you don’r know and then learning new things.
  16. If you count till now you will add up to 7 hours. the remaining 1 hour will be taken up by a 30 min status meeting, stand-up or some other meetings. The remaining 30 minutes will be taken up by context switching. Also quadrant 1 task can come up any time.
  17. Happy programming!

 

1 ) Scenarios for common anti patterns

2 ) Puzzle to choose which is right and wrong when you have to choose between two task

 

Open letter to Business Analyst

Business Analyst plays a very important role in the entire cross functional agile team. They are the more real truth about the requirement of the business to software developers. Since Business Analyst have seen much software being build and broken over the years they develop a strong skill on how the solution works. They are very much aware of the overall flow of the software or High Level Architecture. An experienced Business Analyst in a team with senior developer and junior developer. It is natural that they with experience start captaining the project. Also there can be a deliberation and debate over the logic of the requirement, thus putting out all possible input conditions. There is nothing wrong about it but when you are not a part of everyday coding. It doesn’t make any sense to decide on what will be the table names, will the logic reside on database or code level. It should be the job of developer. Definitely all suggestions are welcome, however you cannot dictate terms.

Here are my reasons why it should be a job of developer to do the detail decision:

  1. Developer has their own design challenges to deal with. All the decisions are taken based on the requirements provided by Business Analyst.
  2. There are underlying coding style or design choices which a developer is comfortable with. This will help them in long term maintenance of the project. Also there can be multiple solutions to a particular problem.
  3. The design of procedural programming will be difficult to adapt in object oriented programmer or functional programming.
  4. The performance issues of 1999 i.e. of memory and latency is no longer valid on today’s day and age.
  5. In memory functional programming helps parallelism easier than last decade.

This is just a rant and my humble way to put few points forward.

Happy Software Development!

1 Free & Easy tool to track your social media referrals

Recently one of my friend asked me below mentioned question.

How can I track how many clicked the referral link via my Instagram bio?

I wondered there should be an easy way without setting up your website and manage it via google analytics. It was a quick search and easy use. The answer is use bitly.com and its Free.

The use case explained below, Say you have an Instagram account and you are promoting a brand. For example purpose you are promoting www.nike.com

Login to bitly via your Facebook or Twitter account. You can also create a new signup. I created a new signup. Once you login you will see below screen. Bitly

Next you click on top right orange button Create Bitlink. You will see the screen below. First you paste the long link of your referral in the box which says “PASTE LONG URL”. Example: www.nike.com  Click on create button on the bottom of the page.

CreateLink

You will moved to another page displayed on the right side EDIT BITLINK. On Edit page update the “TITLE” box as some meaningful name – Instagram (Any social media site you want to track the source from). Then click Save.

SaveLink

That’s it. You are done. Your link is ready for tracking. See below.

ViewStats

Now it is time to test. Copy the link and paste it into your Instagram bio. I tested it for my site and below is the result on your dashboard.

CountClicks

The same with full screen and additional dashboard information for multiple links.

CountClicks_FullPage

If you have any further question add it on the comments below. I will try to answer them.

Happy Tracking!!!

How to search for quality remote work?

time-hop-holiday

Remote working is something which is gaining traction across the global. The trend of growing tech entrepreneurship and individual professional. Made the increase in demand of co-working place. There are company who have remote work options like wordpress.com, basecamp.com and upworthy.com. There are portal which cater only remote working jobs. Also there is a who book written about remote working called “remote” by the team at Basecamp. Below are the few location where you can find good quality remote work.

Places you can search for remote work:

  1. http://stackoverflow.com/jobs : Want to work remotely? The top developer website in the world has something to offer you.
  2. https://www.toptal.com/careers : Top quality technical freelancer. Why 3%? As a network, we have a very rigorous screening process to identify the best. We are experts in our domains, and we look for great problem solvers with passion and drive — the types of people we want to work with (and learn from) ourselves. Of the thousands of applications Toptal sees each month, typically fewer than 3% are accepted.
  3. https://weworkremotely.com/ : We Work Remotely is the best place to find and list jobs that aren’t restricted by commutes or a particular geographic area. Find the most qualified people in the most unexpected places

Here are few links that talk about the companies that offer remote work and there are more than 100 companies

  1. Remote
  2. These 7 amazing companies let you work remotely from anywhere
  3. 100 top companies with work from home jobs

Having given all this information there is an article about “How to Work Remotely and Still Be the Best” It covers following topics:

  1. The Remote or Home Office Setup
  2. Software Tools
  3. Remote Work Best Practices: Bug Tracking
  4. Remote Work Best Practices: Team Communication
  5. Making Your Presence Felt: Don’t Go Invisible

Details can be read here @ https://www.toptal.com/freelance/how-to-work-remotely-and-still-be-the-best

Happy Remote working

Build Ultra-Modern Web Apps with Angular Material

At the Google I/O Conference back in 2014, Google announced Material Design, their new design language. They have since converted much of their popular applications to adhere to this new spec in an effort to provide a consistent experience. Now they are trying to convince you to follow along as well.

Angular Material: Superheroic Javascript Framework Meets Ultra-Modern Design

What is Material Design?

After a visit to the official Material Design spec, you will immediately get a feeling of ultra-modern minimalism. Basic shapes and flat colors are the theme here. Going through the documentation is quite an experience. I recommend taking a look for yourself, but I will summarize it here.

Goal

The purpose is to create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. Also to develop a single underlying system that allows for a unified experience across various platforms and device sizes.

Principles

Material Design is founded on three principles.

Material Is the Metaphor

Inspired by the study of paper and ink, the material lives in 3D space and is grounded in tactile reality. It gives the illusion of space by using realistic shadows. The paper material must abide by the laws of physics (i.e. two pieces of paper may not travel through each other), but may supercede the physical world (i.e. a paper may grow or shrink).

Bold, Graphic, Intentional

Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. The Floating Action Button, or FAB, is a prime example of this principle. Have you noticed that little circle with the ‘plus’ symbol floating around in your Google Inbox app? Material Design makes it very apparent that this is an important button.

Motion Provides Meaning

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent. The main point here is to animate only when it has a purpose and not to overdo it.

How does AngularJS fit into Material Design?

AngularJS, Google’s “Superheroic JavaScript MVW Framework”, addresses many of the challenges encountered in developing single-page applications (SPA). It provides the framework needed for creating modern web applications that connect to APIs and never need the page to be refreshed.

AngularJS: A New Approach

Angular is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents, but creating dynamic applications not so much.

Creating dynamic applications with HTML has always been an exercise in tricking the browser into doing things it wasn’t meant to do. There are a couple of approaches to doing this.

  1. Library – a collection of functions. (jQuery)
  2. Framework – code dynamically fills in static elements when needed. (Durandal, Ember)

Angular takes a different approach to solve this problem. Instead of struggling with the HTML it is given, it creates new HTML constructs. Angular teaches the browser new HTML syntax through a construct called ‘directives’. Angular comes with a set of these directives built-in, but also allows you to create custom directives, so it allows you to write your own HTML elements.

Wouldn’t it be neat if Google created a set of directives based on Material Design principles?

Introducing Angular Material

Google is actively developing Angular Material, an implementation of Material Design in AngularJS. Angular Material provides a set of reusable UI components based on the Material Design system. Angular Material is composed of several pieces. It has a CSS library for typography and other elements, it provides an interesting JavaScript approach for theming, and its responsive layout uses a flex grid. But the most appealing feature of Angular Material is its amazing collection of directives.

Getting Started

I have created an open source project to help jumpstart your next Angular Material project. The purpose of this project is to give an example of everything Angular Material has to offer, all under one roof. Navigation, paging, theming, and the entire collection of directives are ready to go, all you have to do is feed in your data and bind it to the HTML.

Take a look at the demo here or fork the code on GitHub.

Directives

Directives are a core Angular feature. Angular comes with several directives that you use all of the time like ng-model or ng-repeat. They are a very important piece of Angular that makes the framework function as it should.

How to Use an Angular Material Directive

Angular Material extends this directive library with a set of beautiful Material Design inspired directives. Angular Material directives are HTML tags that begin with ‘md’; short for Material Design. They couldn’t be much easier to use. For example, let’s take a look at the good old button.

A standard HTML button might look something like this.

<button>Click Me</button>

An Angular Material button looks like this.

<md-button>Click Me</md-button>

And this is all that is needed to make a Material button. Now, there are several other options that are available for this directive such as theming it and raising it from the surface to imply importance.

<md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

Services

Services are also core to Angular functionality. They are used to share code across the application. A common core service like $http is used and reused for data calls in Angular applications.

Angular services are:

  1. Lazily instantiated – Angular only instantiates a service when an application component depends on it.
  2. Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

How to Use an Angular Material Service

Angular Material comes packaged with some services that provide some extra functionality to the application. They also contribute to the performance of some of the directives. A great example of a service is the ‘toast’.

A toast is a small notification that slides in from the top of the screen and goes away after a few seconds. Using this service is easy.

In JavaScript,

$mdToast.show(
      $mdToast.simple('Simple Toast!')
        .position('left bottom')
        .hideDelay(3000)
    );

This example shows a simple toast that pops up on the bottom left of the screen and retreats after 3 seconds.

Some services can be personalized with custom templates. In this case, the $mdToast service can use a custom HTML template by using the md-toast directive.

Theming

Material Design is a visual language where themes convey meaning through color, tones, and contrast. These themes are expressed throughout the components in the entire application to provide a more unified feel.

According to the Material Design guidelines, you must “limit your selection of colors by choosing three color hues from the primary palette and one accent color from the secondary palette.” Angular Material makes following this guideline simple by using JavaScript to configure the theme. But first, what is a palette and a hue?

  • Hue: A hue is a single color in a palette.
  • Palette: A palette is a collection of hues.

For example, a palette would be ‘green’ and a hue is a particular shade of green. Angular Material comes packaged with all of the valid palettes from the Material Design spec. You can learn about more about the valid color palettes here.

Configuring the Theme

Theming your project is a piece of cake. In the app.js file, set your desired palettes and hues using the Theming Provider service.

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette(‘cyan’, {
      'default': '400',
      'hue-1': '100',
      'hue-2': '600',
      'hue-3': 'A100'
    })
    .accentPalette('amber')
    .warnPalette('red')
    .backgroundPalette('grey');
});

Using the Theme

To apply the theme to the components, set the class of the element to the desired palette and hue.

<md-button class="md-primary">Click me</md-button>
<md-button class="md-primary md-hue-1">Click me</md-button>
<md-button class="md-primary md-hue-2">Click me</md-button>
<md-button class="md-accent">or maybe me</md-button>
<md-button class="md-warn">Careful</md-button>

Layout

Flexbox is the latest and greatest addition to responsive design and Angular Material comes packaged with it. If you are familiar with the Bootstrap grid system, then you should be able to catch on quickly. In fact, Bootstrap is switching to Flexbox in its upcoming release. It has the familiar rows and columns layout you have become accustomed to, but with much more. Learn how to use Flexbox with this tutorial or study theofficial documentation.

Top 9 Best Angular Material Directives

There are too many Angular Material directives to list them all, so I would like to share with you my favorites.

9. Progress Linear

Often in SPAs, pages need time to load data from the server. If the application shows a blank page during this time, users may think the application is broken and will leave. Let users know the data is loading with theProgress Linear directive. Users will know to wait when they see an animated progress bar indicating that something is happening. Alternatively, use the Progress Circular directive for a round indicator.

8. Date Picker

The Date Picker directive makes choosing a date a clean, simple experience for the user and a true one-liner to write. Simply use md-datepicker and optionally confine the range with md-min-date and md-max-date and that’s it.

7. Autocomplete

Autocomplete provides a pleasant user experience by helping the user choose an option. It is what makes Google’s search engine the best. The Autocomplete directive adds this functionality to your application by completing a user’s words as they type. But the best part about this directive is customization. By filling your autocomplete with md-item-template you can give more meaning to the suggestions. For instance, if a user was searching for names in a company, the autocomplete could show the matching names with their picture and company role, giving a more robust user experience.

6. Bottom Sheet

The bottom sheet is a little menu that slides up from the bottom of your screen, covering content and taking focus. Originally intended to be used solely for mobile devices, the bottom sheet has been gaining popularity on larger screens. To use it, create a template with md-bottom-sheet containing either an md-grid or an md-list for a grid layout or list layout, respectively. Then call it with the Bottom Sheet service, $mdBottomSheet.show().

5. Input

Input forms are boring and have been since the beginning of the internet. But they don’t have to be! Give yourinputs some flair with the Input directive. Wrap your input tag with md-input-container and watch it come to life. Watch as your placeholder animates into a floating label. Easily validate your input with instant, but subtle, color changes and warning messages. Input directive takes an element that is expected to be boring and delivers a pleasant surprise.

4. Toast

The most aggravating user experience is not knowing what the application is doing. We ease this aggravation with toasters, or little unobtrusive notifications. In the olden days, when we sent a request to the server we waited on that page until the response came back before we could move on. User attention span has dropped drastically since then. In today’s SPAs, we click a button and expect to move along immediately, dealing with the server response when it comes. The Toast directive makes this a piece of cake. A toaster is summoned by simply using the Toast Service, $mdToast.show(), and setting the text, duration, and which corner to appear in. Make your own custom toaster with md-toast.

3. Grid List

Are your lists lacking pizazz? Grid lists are an alternative to standard list views. A grid list is best for presenting images, and is optimized for visual comprehension. It works by laying different sized tiles on a grid, giving a scattered, eclectic feel. The tile size and layout then respond to the screen size. This directive is sure to give your application an exciting and fun look.

2. Whiteframe

The concept of space is the core of Material Design and its paper metaphor. Two sheets of paper in the same z-position (or depth), form a seam and must move together. Two overlapping sheets of paper, with different z-positions, form a step. They move independently of each other. To follow the design, we must be able to shift elements along the z-axis. Angular Material provides a simple way to do this. Using the Whiteframe directive, set the class to md-whiteframe-z{x}, where x is the units of depth up from the background. The larger the number, the larger the shadow cast by the paper.

1. Sidenav

Creating a side navigation menu has never been easier. The Sidenav directive places a navigation menu on either the left or right of the screen. Keeping mobile in mind, it swipes in and out as expected, or programmatically with a button click. A nice addition is the lock open feature. The side navigation can be set to lock open when the screen reaches a certain size. By setting the parameter md-is-locked-open=”$mdMedia(‘gt-sm’)” the menu will be tucked away on the phone but locked open on tablet and larger.

Conclusion

Google is converting their most popular applications to Material Design. Now they are heading the development of Angular Material, an implementation of Material Design written in AngularJS. Material Design uses a paper metaphor, bold intentions, and meaningful motion. AngularJS organizes single page applications. Angular Material applies Material Design principles to AngularJS applications.

Material Design is here and Angular Material is a fantastic way to apply the Material design spec to your single page applications. If you want to create your own Angular Material application, don’t waste your time starting from scratch. Rather, start off with a fully functioning app with demos of the directives, theming already set up, and navigation and routing ready to go. Take a look at the demo here or fork the code on GitHub. Of course, you can also learn all about Angular Material by visiting the official documentation.

Original post @ https://www.toptal.com/angular-js/ultra-modern-web-apps-angular-material