Category Archives: conference

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:-