Business School Competitions 2016

  1. Festival Name: Confluence

    Organized By: IIM A

    Website Link: http://iimaconfluence.in/

    Facebook Link: https://www.facebook.com/IIMAhmedabadconfluence/

    Festival Dates: Yet to be declared

    Festival Details:
    Confluence, the largest B-school meet in Asia Pacific, is an amalgamation of five fairs – Finance, Marketing, Strategy, Entrepreneurship and IT and Operations. It is the only B-school meet in India to draw participants from all over the world. It provides a platform for budding managers of tomorrow to apply their skills in various games and case contests designed to challenge the brightest minds in the world.

    Apart from contests, lectures and workshops by eminent personalities from various fields, Confluence features:

    Bizquizitive – the Mega Business Quiz
    Casually Speaking – The Informals
    Entertainment
    Livestock – The Online Trading Game
    Viewpoint – The Online Polling Game
    The event offers students across institutes and countries a chance to interact with each other, exchange ideas and appreciate the various perspectives that can be possible while looking at the same thing.

    Last Registration Date: Yet to be declared

  2. Festival Name: Unmaad

    Organized By: IIM B

    Website Link: http://www.unmaad.com/

    Facebook Link: https://www.facebook.com/unmaad.iimb/

    Festival Dates: Yet to be declared

    Festival Details: Unmaad is the annual cultural festival of IIM Bangalore. It is conducted every year in Jan/Feb by the Cultural Committee of the Institute.
    The fest is attended by thousands from colleges and corporates all over India. Anyone, and everyone can be a part of Unmaad

    Last Registration Date: Yet to be declared

  3. Festival Name: Vista

    Organized By: IIM B

    Website Link: http://www.iimb-vista.com/

    Facebook Link: https://www.facebook.com/iimbvista/

    Festival Dates: Yet to be declared

    Festival Details: Vista, the premier business festival of IIM Bangalore, is amongst the biggest mega-events organized in the country.

    Last Registration Date: Yet to be declared

  4. Festival Name: Carpe Diem

    Organized By: IIM C

    Website Link: http://iimc-carpediem.com/

    Facebook Link: https://www.facebook.com/IIMC.CarpeDiem/

    Festival Dates: Yet to be declared

    Festival Details: Come January, IIM Calcutta will embark upon the latest version of its most happening and irreverent cultural festival celebrating the art of life – Carpe Diem. A 72-hour carnival that hosts everything from rhythmic and jaw dropping dance moves to exhilarating dramatic plays; from contemporary fashion shows to vivacious music shows. Come, Live the Dream. Seize the day.

    Last Registration Date: Yet to be declared

  5. Festival Name: Intaglio

    Organized By: IIM C

    Website Link: http://www.iimc-intaglio.com/

    Facebook Link: https://www.facebook.com/iimc.intaglio/

    Festival Dates: Yet to be declared

    Festival Details: Intaglio, IIM Calcutta’s annual International Business School Summit, is one of the largest B-school summits in Asia. With over INR 2 million to be won as prize money, Intaglio witnesses the best minds in the country and abroad coming together to battle it out every year in January, attracting participation from world-renowned institutions.

    Last Registration Date: Yet to be declared

  6. Festival Name: Fiesta

    Organized By: FMS

    Website Link: http://fmsfiesta.com/

    Facebook Link: https://www.facebook.com/fmsfiesta/

    Festival Dates: Yet to be declared

    Festival Details: The flagship event of Faculy of Management Studies.

    Last Registration Date: Yet to be declared

jquery-conference

jQueryConf.in Experience

Update 1: Photos are now available at Google +

Quick Summary:
jQueryConf.in was an amazing conference where you met interesting front end developers from India, and there were amazing speakers and sessions.
A long blog post about the first international jQuery conference in India.

About jQueryConf.in:

jQueryconf.in is the first official jQuery conference in India organised by the jQuery Foundation in Bangalore from July 23rd – 25th.
This is my interactive blog post about all the speaker sessions that I attended, please feel free add your own experiences below in the comments.

jQuery Conf: Day 1:

The jQuery Foundation. More than just jQuery

. by (Kris Borchers)

Proposal
Summary: The jQuery Foundation is always working toward making the web accessible to everyone through our efforts in open source projects, standards and the web community. This talk will highlight many of the efforts we are currently focussed on and we’ll also dive into some of the projects we’ve been working on with the community to give you an idea of current outcomes of those efforts and demonstrate some of the uses of those projects. Though jQuery and its related projects are still important to the web, this talk will focus more on the other efforts the jQuery Foundation is involved in that many may not know about.

jQuery Foundation

Notes:
- Executive Director of jQuery Foundation
- kris@jquery.com , @kborchers
- RedHat, js lead
- day-to-day business, developer time
- high level governance over projects, copyright, all projects are open-source and free to use
- CLA, Infrastructurem, Legal, Marketing, Financial Support
- jQuery.3.0 > release blog
- jQuery User Interface
- jQuery Mobile.
- Sizzle: Css Selector Engine
- QUnit: js unit testing
Common Reporter Interface
- PEP: Pointer Events
Automate and improve W3C tests
- Chassis: Initial CSS Framework
- Esprima:
Javascript parser, AST, to understand whats going on in your js code.
Improved Testing and Workflow.
Instanbul, JSCS, Structured JS.
Khan Academy
ESTree

- Globalize:
Format, Vocal, Language, TimeZones
less code for i18n and l18n
Runtine optimization

New Projects:
Standards:
very academic, and are not in trenches and dont really
force standards that help developers and not academics
Developer / Practioner Voice

W3C:
All Working Groups, all overt the place for standardization.

ECMA:
TC-39,
ECMA-402, -> Globalization.
2 representations to leverage jQuery and where the language is headed.

World Wide Events:
Organizes in US as well in other countries in the world.

Where we are headed:
Needs and priorities.
Diversity:
Developers, Projects, Governance.
Accessiblity:
Physical, Cognitive,
Tools and Awareness
Education:

How is the JQuery foundation involved with Node ?
Unifies world of javascript.
Lots of crossover.

Definite Timelines for jQuery Mobile ot jQuery?
, no public timelines as they are depending upon volunteers.

Are they are going to create and support hybrid apps frameworks?
yes they are interested, Scott seems so.
jQuery UI has been working with Intel for integration in their SDK.

Diversity and programs in schools ? underrepresented groups including age.
From Schools.
University Partners, programming club. age is an important factor.
more doors open up.

A great talk focussed on telling jQuery Foundation is not just about jQuery

Infra and Security ?
Faced DDoS Attack and defaced, Cloudfare to mitigate them. Only 3 people working for 20 servers.

Browsers are willing to discuss changes, Safari has been amazing to talk to.
Browser Vendors, Bugs.
Little bit of work to implement new standards.

Welcome Talk by Naresh

:

Welcome Talk

Networking.
Basic Networking
Law of 2 feet.
No feedback forms
Volunteer.
jQUery plugin Author
Someone who does not

Notes:

> Grunt: A Bitovi case study. (Alexis Abril)

Proposal
Summary: Grunt is a popular tool used to help development teams script tasks of all types together in an easy to use, repetitive process. In this session we will show you how we use Grunt at Bitovi to develop and deploy large, maintainable, testable applications.

Bitovi Case Study
Grunt-js

Grunt. canjs

- Caters to FEDs
- No need to rebuild everything,

Useful-

Canjs -> Distributed packages

Test Suite:
jshint, build, tests

Buiid:
AMD, Steal, Global
version numbers,
banner information.

Documentations:

4434 total tests Example

Simple
Testee grunt task

Test Driving a jQuery plugin.

(Naresh Jain)

Proposal
Summary: Over the past decade, eXtreme Programming practices like Test-Driven Development (TDD), Behavior Driven Developer (BDD), Refactoring and Continuous Integration have fundamentally changed software development processes and inherently how engineers work. Practitioners claim that it has helped them significantly improve their development speed, design quality and responsiveness to changing requirements. Software professionals across the board, from Internet startups to medical device companies to space research organizations, today have embraced these practices. But can these practices be applied to front-end development? Especially jQuery plugin development?

Test Driven Development

This demo will show how we can test drive a jQuery plugin with the help of various patterns, strategies, tools and techniques. Participants will understand how they can apply this approach for testing any jQuery code.

Basic Setup
Comments jQUery plugin with in confengine.com
TDD
Test, Code, Refactor
Break any passing tests.
Starting out with jQComments().
Jasmine + Jasmine-jquery tests.

Aap ki Adalat with jQuery Foundation

Summary: Aap Ki Adalat is the longest running talk show in the history of Indian television. In this show, the anchor, Mr. Rajat Sharma has grilled over 500 personalities on various sensitive and personal issues. We would like to put the key members of the jQuery Foundation through a similar session, where participants will ask them hard questions around various technical and non-technical choices made by the Foundation and the future direction of the foundation.

Aap ki Adalat
Aap ki Adalat

- Why $ instead of free and open source jquery plugins >
> extends from prototype

- Why add `this` another 4th option that is plugin option ?
> this -> DOM element

- Javascript and DOM ? jQuery Confused?
> People were already confused. It was not better and worse.

- Plugins become a trainwreck, because of version management in plugins.
> Can’t control the plugins, just use the most maintained.

- rating and ranking problem of jQuery plugins.

- until something is better, people are getting encouraging to.

- Promise based programmiing for Common A Patterns for jQuery.
> Error Handling.

- Why support for IE6/7/8. Why still support.
Still getting used for Internet Explorer.

- Use Feature detection instead of Browser detection

- requestAnimFrame in the next frame, web animations. jQuery.animation()

- what would you change in jQuery in time machine ?

- TypeScript and Ecmascript 6 not used in jQuery 3.0

How I become a better Front End Developer by maintaining a daily jQuery plugins site. Jay Kanakiya.

Front End Developer

Summary: Maintaining a jQuery plugins website is hard but equally rewarding. In this talk I am going to outline some of the initial difficulties I have faced and its corresponding learnings. jquer.in also played an important role into how I become a Front End Developer. Even now it plays a huge role into improving my writing skills, coding skills, contacts.

Slides

Went great !

Performance beyond Page Load.

(Apoorv Saxena)

CKrtt38UMAAXZqk

Everything related to performance

:Importance
- Engagement reduced in Facebook from 60fps to 30fps in EdgeCond 2015.
- you have got 16ms (10ms) to render a particular frame
right from javascript to css,
- janky web applications before.
- Rendering Performances.
Js -> Styles -> Layout -> Paint -> Composite.

Layout:
Paint: Pixel is positioned to a different location.
Different css properties trigger different changes

Composting:

Tools:
– FPS Meter. (60) … chrome devtoolss
– Timeline as in
– Show Paint rectangles.

Smooth Scrolling, Smooth Animations, Smooth Interactions

Process that consumes more than 16ms:
– Time consuming, e.g. Garbage Collection
– Javascriptt trigger operations, eg. Layout Thrashing
– Loads of repainting on screen, reason can be attributed to both js/css/both
– Triggering any other operation that can cause the animation to exceed its frame budget.
– Synchronous operations inside the event handler that exceeds the current budget frame

Best Practices:
– Avoid Memory Leaks,
– delete models and views at the same time.
– Reducing DOM Calls., reading and writing,
– Use requestAnimation frame or fastdom for batch reads and writes.
Debounce input handles, ajax calls, scrolling, clicks
– Use GPU Acceleration, use css
Flipboard case study for canvas animation for hardware acceleration.
– CSS Animation.
– Web Animations API to the rescue
– Gifs and Performances. > image does not animate out of view.
– position: fixed elements getting repainted on every scroll
will-change: transformed
– Union of damaged regions: browser tries to optimize it causing a bigger position to get repainted.

Proposal
Summary: In today’s responsive world, user experience and application performance is becoming more important than ever. Jankiness is a thing of the past, though it still haunts many web applications, let’s under the working of jQuery code so that it doesn’t haunt your web application.

Building up the Community.

Scott Gonzales.

Scott Gonzales
Building up the community

A no slides talk from Scott Gonzales who currently serves at the jQuery UI Lead Foundation, about the importance of the community.
The key takeways from this talk were:-

– Start contributing to something early on, if you find a bug report it.
That also counts as contributing.

– jQuery UI has been working on a lot of amazing things and when they see any problem, they try to abstract it or diverge it other projects as well.
This is the reason for launching Sizzle, Chassis and Globalize.

– Every small bug that you report or patch that you sent affect other people who dont even know about it and helps to push the web forward.

– India has got such a huge number of developer and abysmal support for open source contributions. Lets Fix this. You should not follow SDD.
(Stack Overflow driven development)

– Many times, you see a bug in a library, you send a patch to that library but you find that is actually depending on another framework which is dependent on another more base library. Example will-change

So, you send 3 pull requests, hopefully it gets merged in all of them, you don’t only benefit the users of the earlier library but you just added another core feature to the underlying that have exponentially benefitted much more users.

Proposal
Summary: Over the past seven years, jQuery UI has identified and solved many common problems for web developers. Often times, the problems don’t apply just to users of jQuery UI, or even jQuery Core. In these cases, we try to solve the problem in the best way for the largest audience, rather than creating an isolated solution within jQuery UI. We’re able to do this by working with the community and bringing together various groups to collaborate on solutions. In this talk, I’ll discuss how this concept is at the heart of the jQuery Foundation and explain some of the projects that have been born out of jQuery UI.

Day 2:

Don’t make this jQuery mistakes.

Dave Methvin

Proposal

Dont Make this jQuery Mistakes

Summary:

You can find solutions to thousands of jQuery problems on the Internet in blog posts, StackOverflow answers, or on Github. The problem is, many of those answers and code snippets are very obsolete! The web development world of 2006 that jQuery was born into is very different than the world of 2015, and jQuery has evolved to keep up. Yet there are still features inside of jQuery that only remain because of compatibility concerns, not because they’re a good idea in modern web development.

This talk will discuss features of jQuery that are best to avoid if you want a fast web site or HTML app that works with the widest range of browsers–even browsers that haven’t yet been released! You’ll also learn how using some of these features can make it very hard to follow modern practices such as Responsive Design. For each feature, you’ll learn the modern 2015 way to do each of these tasks.

Lead Developer for jQuery Core Project.

- careful in the case of power
- jQuery has evolved in the next 10 years
- Change means break
code / plugins / programming habits /
First result may not be correct anymore.
Compromise:
jQuery Migrate: what methodbs are not supported.
Mistakes to fix from the console.
- jQuery 3.0
Deferreds are Promise / A+ compatible:
Added Error Handling.
must use .catch() on a Promise Chain

Bad:
Best sites are there, but are not maintained.
Freezed at 1.11.1
Never use jquery-latest anymore.

.live
performance issue and doesn’t work reliably for Apple Mobile

– Best to avoid :visible and :hidden
– Don’t use classes for strictly js-related state, store state in classes
– Use data-attributes to avoid forced layout().
– Instead of $(elem).show() use $(elem).addClass(‘show’);

– Always use .error
– Preferably don’t use ajaxSetup. , handled globally bad
If you are writing a plugin around ajax, use all the overriding options
– Use a wrapper over $.ajax

– Contructor $, takes in a lot of things.

– use
`this.checked, this.id, this.className, this.disabled` preferably for reading.
instead of jQuery Selectors,

– Custom Selectors slow things down.
There are many selector equivalents most of the time that are much faster.

A sip of React-js.

(Prathamesh Sonpatki)

React-js

Proposal
Summary: React JS challenges lot of conventional ideas in web development at the same time providing a simple model for web development. Lets start rethinking with components, virtual DOM, JSX and see how React really shines! In this talk we will take whirlwind tour of React JS.

We will be building an application based on Open Library API which will help us cover core features of React. At the end of session, we will have a complete app built using React.

Links:http://bit.ly/sip-of-reactjs
Presentation: https://speakerdeck.com/chaitanya/sip-of-reactjs

- React Build UI. limited of scope.
- “Its what I want, how I want”
- Declarative, depends upon state at all times.
- large applications is based on small testable, bite-sized particles.

** Resuable **
** Composable **
** Seperation of concerns **
** Components can be reused on a per-project basis. **

** You can use any other javascript library with react **

** Not html but jsx **

jsx converts html to normal react code + (Optional)

No Templates.

How to manage data:

“`
Data changing over time is root of all evil
“`
> Use props, parameters

> Parent to Child Communication.
> One way data flow

> Child to Parent
> pass in functions defined in parent to child.

> propTypes, validations for props for external people using the api.
“`
booka: Proper types of errors, React.PropTypes.array.isRequired
“`
> State, internal

( on click on a link in a presentation, you can do git checkout, then open up your text editor)

> State Change -> call render()

> Refresh Page x -> Refresh Component.

> If Refresh Component, refreshes each and every Child Component
Virtual DOM,
only get the diff,
and make minimal set of changes.
do the batch updates

> Component LifeCycle Hooks like:
componentWillMount
componentDidMount
componentWillReceiveProps

Good Patterns:

> Avoid state as much as possible
Only add things that going to change.
Prefer props over state

> Use Dumb Components

> Learning Curve
> Small, just javascript
> Easy to sneak into existing projects

> First Experiment to Use,

> Huge Apps, use Flux to communicate between React Apps.

> Seperation on concerns for all logic, ajax calls, single responsibility.

JSON-LD. Making every object matter in Semantic Web.

Janardhan Revuru

wpid-img_20150725_112511.jpg

Proposal
Summary: Over the period, web has transformed itself from ‘Document oriented’ (web pages) to ‘Data oriented’ (sections, objects) to now Semantic. As conceived by the visionary (Tim-Berners Lee), Web 3.0 is the Semantic Web. And, Linked-Data is the first step towards it. Though the concept of Semantic web existed for long, the developers are still grappling with right usage. In the current context of voice assistants like ‘Google Now’ and ‘Siri’, linked data is essential for better context aware user experience.

In the process of creating exceptional user experience, learn how semantic data helps during phases of information architecture, user interaction and UI design.

Notes:
Linked Data e.g. Google Now.
Metadata, microdata, microformats
Semantics,

e-summit 2015

E-Cell Summit 2015

The E-Cell Summit is an annual conference conducted by Entrepreneur Cell of IIT-B with earlier talks featuring well known personalities and industry stalwarts including Mahesh Murthy, Nandan Nilekani.

This is my personal experience at the E-Cell Summit with some of my friends.

The first talk that I attended was from Jeff Bullas on Topic

3 insights in the powers of social media

Jeff Bulas

The talk was pretty good about how easy it is to start a blog, and how powerful this new medium has become.
You have got to listen to this guy about 203K tweets, 295K followers, thats pretty impressive numbers.
The main learnings from the talk were

  1. To build a following you need to post something daily
  2. Don’t underestimate the powers of email marketing, start building an email list early
  3. Facebook and Twitter should not be the only thing in your social media arsenal
  4. If you have an inkling to start a blog, just write it
  5. Free marketing is still the best thing to have

The Next workshop that I had attended was

Lateral Thinking Workshop

This was an excellent workshop conducted by Paul Sloane it was all about lateral thinking.
Some key learnings from the workshop were

  1. To solve any problem is to understand the problem in more detail
  2. Why, Why, Why -> Understand the root cause of any problem as fast as possible
  3. The Six Serving Men -> What, Why, Whom, How, Where
  4. Approach the problem from different perspective from different angles
  5. Frame the question in as many different ways as possible

The biggest event for E-cell Summit was the

Mobile Space

where Alan Mamedi, Founder of TrueCaller, Kavin Mittal, Founder and CEO of Hike Messenger, Satyan Gajwani, CEO of Times Internet, Kunal Shah, Founder Freecharge.in conducted by Ajeet Khurana, CEO of Sine


Some interesting learnings from this panel discussion

  1. People look at their phones more than 50 times a day, more than they look at their wives
  2. About 40% people sleep with their smartphone near them and 30% take their smartphones to their bathroom
  3. In the next 2 years, there will be 100 million new people on the internet via their smartphones, How are they going to use it
  4. Hike sends 10 Billion messages a month
  5. Hike has 25 Million Active users
  6. The current market in India is immature and nascent, theres lot of space for specialized services and deliveries catered to an Indian audience
  7. Truecaller first started in Lebanon for all the wrong reasons
  8. You can actually unlist yourself at Truecaller(Can’t find it on the website)
  9. Around 15% of the audience had not installed Truecaller because of privacy concerns
  10. Its still unknown from where Truecaller got the initial data to get it off the ground and what is currently its business model
  11. Truecaller hits about 2 Billion searches a month
  12. Internet mobile is currently at a stage where Internet was in the year 2002
  13. “What we love in India is free” -> Kunal Shah
  14. Last year January 2014, 91% of Freecharges came from Web, this year January 2015, 92% of Freecharges came from mobile
  15. “90% of users dont care about features, they care about needs” -> Satyan Gajwani, stating the example of CricBuzz
  16. People need incentive to give something back
  17. Its all about getting one use case really really right
  18. If you can crack the diversity in India, you can crack the market
  19. Currently there are 900 million activated SIM cards in India
  20. Majority of the market is still in the experimental stage

Second Day

Product vs Service

This was a panel discussion regarding the product vs services. Rohan Shravan, CEO of Notion Ink India, Harsha Kumar AVP of Ola Cabs.
Some interesting learnings
Olacabs might be running about 50,000 cabs all over India.
The interesting story over here is from Rohan Shravan about how hard it is to start a hardware firm in India, raising funds etc

10 Minute Million

Another interesting event that I attended was the 10 Minute Million where about 6 teams out of 8 teams landed funding.
The panel who carried out the funding included impressive personalities like Ajay Pandey, Member of Tata Board Members, Bharat Banka, Senior President of Aditya Birla Group, Ravi Gururaj, Chairman, NASSCOM Product Council.
The interesting thing was there were many people from the audience who were investors who attended this event with zeal.
You can browse the list over here

Some interesting startups:-

Faaya: Online High-End Tailoring solution.
500+ customers in 6 countries. This startup got the highest (63 lakh funding).
Some cool ideas:-
You can preorder 20 fabrics for Rs 150 and if you place any order you get those refunded.
They have partnered with local gyms in Delhi to take your measurements
For alterations they have partnered with local tailors, or you can send them the bill to reimburse you back.
For a 1600 bucks Kurta it costs them 650 bucks to make it, amazing !
The founder is from a tailoring and textile background, so he knows the ins and outs of every aspect of the business.

Dealwithus: They have a simple business model, almost all major ecommerce websites have got affiliate marketing solutions. So they get the customer to buy using their affiliate and then refund 30% of it as cashback.
This was the first presentation made entirely in Hindi!

SnackExperts:
A package of highly nutritious food at your doorstep or Rs 699 every month.
A unique proposition considering the diversity of the Indian Market and its different tastes.
Will be interesting to watch its outcome.

Reach me at @techiejayk or in comments below:-

Responsive Web Design

Introduction to Responsive Web Design

I had conducted a javatar(our weekly technical workshop) at Sokrati on a simple introduction to Responsive Web Design:

Slide 1: Intro

The range of devices available to us are increasing exponentially with 4K Tvs and iWatches.Its a a matter of time when people will start browsing apps and websites on their iWatches, SmartPhones, Tablet Phones, iPad minis, iPads, laptops, pcs, large screen tvs.. etc.

Slide 2: Pillars

The four basic requirements or pillars of RWD are EMs/Percentages, Media Queries, Flexible Media and a flexible grid layout.

Slide 3: Typography

Lets start with fonts.The default base font size for web-pages is 16px, but some browsers might set it as different or the user might change it according to his preference. We should always honor and make sure that our design accomodates it without breaking.
We have a very simple page with a heading and a paragraph, how do we make it responsive ?

The Page:

See the Pen GgojKE by Jay Kanakiya (@kanakiyajay) on CodePen.

Resize your browser or use Chrome devtools rwd feature |

The font-size of heading is 80px while that of the paragraph is 32px, we have to make it responsive to page width, because if a person on Opera Mini visits this page, whole screen will be covered with the heading only.

So to make this responsive easily, you should use a new css property known as “vw” -> viewport width.
So if we make an elements font-size as 3vw and viewport width is 1000px that means its font-size will be 30px.
So now as we want the base width for 1300px width to be 16px, we do some maths

base = (16 * 100)/1300 = 1.23

So we set the body’s font-size as 1.23 vs with a fallback of font-size: 100%;
Now we come to the concept of ems. Ems is a size of measurement similar to pixels.Unlike pxs ems are relative to their parents font-size (You can also use rems which means relative to body-width we will cover it later).

ems

So if the base font size is 16px and we have a heading whose font-size is 48px we can set its font-size as 3ems. The benefit of ems over px for responsive design is that you need to change only to change the font-size of its child-elements.

So here is our sample page fully reponsive:

See the Pen ZYQpzP by Jay Kanakiya (@kanakiyajay) on CodePen.

Slide 4: Font Formula

An important thing to note in responsive typography is the formula

result = target / context
( 2em = 32/16 )

This is until http://caniuse.com/#feat=calc we can use calc() easily.
The target refers to the font-size that we want to apply, while the context refers to the font-size of the parent.
Remember the context is the parent elements font-size.
Note: You can also use rem which means it will take the context as the base font-size.

Slide 5: Widths

Consider a simple 2 column layout with one for main content the other for sidebar.
The width of wrapper is 900px, main column is 600px while that of sidebar is 300px.

See the Pen RNrGNV by Jay Kanakiya (@kanakiyajay) on CodePen.

How do we make this responsive ?

By using percentages. Percentages are very easy to use so over here we will set the width of main column as 66.666% while that of sidebar as 33.333%
We also give a max-width of 960px with margin: 0 auto for large screen monitors.
So here’s the final result

See the Pen qEbaEb by Jay Kanakiya (@kanakiyajay) on CodePen.

Slide 6: Paddings and margins

Lets apply the same responsive concept to paddings and margins. I have always set the box-sizing property to ‘border-box’ makes it easier to calculate.

Just 4 simple rules :

  1. Set Paddings/Margins ‘Rights’ and ‘lefts’ in percentage widths.
  2. Set Padding ‘tops’ and ‘bottoms’ in ems.
  3. Margins depend upon elem’s container.
  4. Padding depends upon elem’s.

Slide 7: Flexible Images

This is the most simplest way to implement. Just add a max-width:100% to every image.
This will make sure the image will never go beyond the right border and will be sized accordingly.
Here’s a demo with unresponsive images as well as responsive images.

See the Pen wBMzBm by Jay Kanakiya (@kanakiyajay) on CodePen.

Slide 8: Flexible Media

Similarly you can apply this to other objects such as flash, video and embeds.


img,
embed,
object,
video {
     max-width: 100%;
}

Slide 9: Media Queries

Media Queries are the foundation upon which responsive design is built.
For any website media queries are through which we can control minute details of our website.
The two karan and arjun of media queries are max-widths and min-widths:

  1. Maximum Widths -> means apply styles when less than
  2. Minimum Widths -> means apply styles when more than

Syntax:


@media screen and (max-width: 600px) and (min-width: 300px) {
    .para {
       width: 300px;
    }   
}

The above code means for viewport widths greater than 300px and less than 600px the elements with class para should have width 300px.

A simple demo

See the Pen RNrGPV by Jay Kanakiya (@kanakiyajay) on CodePen.

Slide 10: Viewport meta tag

This small yet useful important tag says for every device (especially mobile browsers) always take the width equal to device-width. Also depending upon your application you can disable user zooming and scaling.
By default, Mobile Safari renders web content at 980px wide—even though its display is 320px wide when held in portrait mode.


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Slide 11: Bootstrap Grid

Docs

Before starting any web-design project its imporant to create a layout that will work for any device from 4K laptops to a feature phone running Opera Mini.
The bootstrap grid has 12 columns and you depending upon the classes of your divs you can change its width depending on the device-width.

So lets say you want to spread 25% of the width for large tablets but 50% for smartphone and 100% for small phones all you need is to apply col-md-4, col-sm-6, and col-xs-12.
Bootstrap css will automatically take care of the width.

Bootstrap Grid Builer

bootstrap grid

Ideal Terminal Setup

Terminal Setup in Windows 7.

Every developer will undoubtedly love the bash terminal of Linux and its flavors.Easy setup, autocomplete, out-of-the-box support for most day-to-day commands, console switching.
Unfortunately the Windows terminal and even the Powershell are impossible to work with on a daily basis.
This post will give a detailed analysis on how to setup your terminal for windows.
We will be using Console2 and Cygwin together to create the ultimate development environment.

Step 1: Install Cygwin

Go to https://cygwin.com/ and download the installation file depending upon your windows

Step 2: Install the following packages for it

You can initialize the setup again, Cygwin will again ask for the packages to install.
Here are the most-important packages

  1. Admin: cygrunsrv
  2. Doc: cygwin-doc
  3. Doc: man
  4. Editors: vim, nano
  5. Interpreters: perl
  6. Mail: fetchmail
  7. Mail: mutt
  8. Mail: procmail
  9. Net: inetutils
  10. Net: openssh
  11. Net: openssl
  12. Net: autossh
  13. Net: rsync
  14. Shells: bash
  15. Shells: rxvt
  16. Text: less
  17. Utils: cygutils

cygwin-installer for windows

Step 3: Install Console2

Download Console2 from http://sourceforge.net/projects/console/files/
Here is the link to the latest release http://sourceforge.net/projects/console/files/latest/download?source=files

Step 4: Change Default Settings of Console2

Right-click -> Edit -> Settings.
Mostly adapted from Scott’s.

  1. Console:
    1. Shell: C:\cygwin64\Cygwin.bat
    2. Startup Directory: H:/ [your daily workspace]
  2. Appearance:
    1. Font: Consolas
    2. Size: 15
    3. Color: Kermit Green
    4. Selection Color: White
    5. Window Transparency: Alpha, 40%
  3. Behaviour:

    Tick every checkbox in Copy & Paste

  4. Hotkeys:

    I love the default hotkeys in default cmd of ubuntu
    The most important Hotkeys

      New Tab: Ctrl+T

      New Tab 2: Ctrl+Shift+T

      Copy: Ctrl+Shift+C

      Paste: Ctrl+Shift+V

      Close Tab: Ctrl+Q

      Next Tab: Ctrl+Tab

      Previous Tab: Ctrl+Shift+Tab

  5. Tabs:

      Add one more tab for Bash

    1. Title: Bash
    2. Icon: C:\cygwin64\Cygwin-Terminal.ico
    3. Shell: C:\cygwin64\Cygwin.bat

Done.You can now start using console2 like a pro.

console2 settings

Step 5: Install apt-cyg

Everyone developer loves the simplicity of apt-get install, you can have that finally for your windows laptop by using a package called as apt-cyg.
wget https://raw.githubusercontent.com/transcode-open/apt-cyg/master/apt-cyg
mv apt-cyg /bin/apt-cyg
chmod +x /bin/apt-cyg
apt-cyg install nano

Step 5: Extra: You can even add power-cmd

Under Tabs in Settings
+Add one more tab
Shell: %SystemRoot%\syswow64\WindowsPowerShell\v1.0\powershell.exe
Icon: Download http://upload.wikimedia.org/wikipedia/en/7/7f/Windows_PowerShell_icon.png and set path to it.

Step 6: Set up ssh

Right Click on Cygwin icon and select Run as Administrator
Enter the following command
ssh-user-config

  1. Shall I create SSH1 RSA key: No
  2. Shall I create SSH2 RSA key: Yes (more secure)
  3. Enter passphrase (like a password):
  4. Enter passphrase again

Done.

Step 7: For node-js Users, run dos2unix


apt-cyg install dos2unix
dos2unix /cygdrive/c/Program\ Files/nodejs/npm

References:

  1. http://www.hanselman.com/blog/Console2ABetterWindowsCommandPrompt.aspx
  2. http://c2.com/cgi/wiki?BetterCygwinTerminal
  3. http://stackoverflow.com/questions/17825023/installing-additional-packages-for-cygwin
  4. http://www.howtogeek.com/howto/41560/how-to-get-ssh-command-line-access-to-windows-7-using-cygwin/
  5. http://infrablue.tripod.com/cygwin.html
  6. http://stackoverflow.com/questions/21206812/how-add-commands-to-cygwin-npm
How to add utm_params to links

How to add utm query params to every external link on your blog

Every digital marketing knows the importance of utm query parameters, basically those text like utm_source=”” in your browser window location bar.
Its a great way to slice and dice and find out where traffic is coming from, which campaigns are more effective, is social working as expected.
Lets say you want to add these query params to your blog post so that the websites owners to whom you are linking can easily know how many clicks are coming through the website.
I had such a requirement for my blog http://jquer.in/ which now contains more than 5000 (function addUtmParams(source, medium, campaign) { $("a").each(function () { var $this = $(this); var linkHref = $this.attr("href"); if (linkHref.indexOf(window.location.hostname) < 0) { var updateLink = updateQueryString({ utm_source: source, utm_medium: medium, utm_campaign: campaign }, linkHref); $this.attr("href", updateLink); } }); })("jquer.in", "website", "content-curation"); // The thee configurable options ( utm_source, utm_medium, utm_campaign) // In my case source is jquer.in, medium is website, campaign is content-curation // Inspired from http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter function updateQueryString(params, url) { if (!url) url = window.location.href; for (var key in params) { if (params.hasOwnProperty(key)) { var value = params[key]; var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"); if (re.test(url)) { if (typeof value !== ‘undefined’ && value !== null) return url.replace(re, ‘$1′ + key + "=" + value + ‘$2$3′); else { var hash = url.split(‘#’); url = hash[0].replace(re, ‘$1$3′).replace(/(&|\?)$/, ”); if (typeof hash[1] !== ‘undefined’ && hash[1] !== null) url += ‘#’ + hash[1]; } } else if (typeof value !== ‘undefined’ && value !== null) { var separator = url.indexOf(‘?’) !== -1 ? ‘&’ : ‘?’, hash = url.split(‘#’); url = hash[0] + separator + key + ‘=’ + value; if (typeof hash[1] !== ‘undefined’ && hash[1] !== null) url += ‘#’ + hash[1]; } } } return url; }

View the functions file of jquer.in

Heres a gist

You can add the code to your functions.js or a javascript file of your wordpress theme.
Let me know what you think in the comments :-

Frontb.in screenshot

The Front-End Tab

During your normal debugging and designing applications, what do you require the most ?

How about designing a an extension for chrome that will automatically load all your favourite tools on your new tab page.This is what I have done this weekend.

Currently It has got the following tools :
Checkout the demo here

  1. JS Beautifier
  2. Html Beautifier
  3. CSS Beautifier
  4. JSON Lint
  5. Url Encoder
  6. Url decoder
  7. JShint

Update: version 0.2

  1. Added CodeMirror for syntax highlighting
  2. Remove Whitespace from json and normal text
  3. Html Renderer
  4. Markdown Renderer

Update: version 0.3

  1. Express-js App for running.
  2. Mongodb for storing the pastebins.
  3. html5 pushState while saving
  4. html5 localstorage for saving previous pastebins
  5. Added Grunt Workflow

Update version 0.4

  1. Changed to a better design with congruent background and logo
  2. Added Favicons
  3. Added Nanobar for showing progress

Update 18th Oct 2014

  1. All button sizes should be same
  2. Reset button should be up
  3. Should be viewable on mobile.Made it responsive
  4. Added basic description on clicking on logo
  5. Fixed a bug in JSONLint
  6. Fix Scroll issue in Codemirror caused by overflow:scroll

Check out the demo !
Don’t forget to fork it on github and submit pull requests and issues.

Its open sourced under MIT License.

The awesome blog of a Javascript developer.