drupal camp hyderabad 2015

Drupal Camp Hyderabad 2015

Last time i introduced you to Swecha and what will be happening on March 7th and 8th you can check my prev post . The Drupal camp started with an introduction to drupal by Larry Garfield and for the first time i saw some one giving seminar via Hangout it was quiet fun and was feeling excited to see someone in live .

I liked what he said about Open Source

The Right to innovate is not a privilege to be restricted to a tiny minority – FSMI

Present companies like google , amazon , Apple though they use Open source technology they don’t have transparency . Every thing that we create needs to be approachable and should be useable cause unusable tools are useless he said .

The point of Open Source is to give everyone the chance to change or distribute the source in any form for the good of community . then he spoke about the differences between Drupal 7 and 8 what are the core problems that he faced and how did they resolve it . How Drupal gives you a good start right from the begining of creating a website . how you can built real world sites right away out of the box .

The best part was that even Blind people can use Drupal with the help of voice navigation thus gives a greater accessibility .

He spoke not only for the core developers point of view but also in the Front end developers prespective.He spoke about new frameworks and technologies such as Symfony, Twig, Zend Feed, Doctorine, Annotation, Guzzle, Easy RDF .

At last he showed us live counting of how many active members who are contributing and participating to the Drupal Community which was around 2715+ people from whole world.

To want to learn help build it

– Larry Garfield

In the end people asked him some questions .One was that “Why should we use Drupal Over WordPress or Joomla ?”. He answered : Every CMS has its own flavor for eg drupal is known for its content strategic and content management at the enterprise level , Where as if content writing and blog editing is concerned then WordPress is best and also added that Drupal has best security team and most active member in the community that is why people go for drupal .

It was an interactive session and hope to meet you live in future, thank you larry for delivering such a wonderful seminar .

you can follow him on Twitter his twitter handle is right below .


Drupal training session at swecha

Attended a seminar at swecha ,by the way where is swecha it’s located at gachibowli(Hyderabad) it’s beside Center for good governance . swecha is basically a volunteer driven free software movement organization ,it was started as a GNU Linux project to build an OS for the people who understand Telugu (local language).By now they have created 3 Linux OS and they are well promoting and contributing to the world of Open Source community.

Today’s seminar was about Drupal it was a short and simple introduction of what is Drupal and why is it useful besides that they also showed why they use Linux and what are its benefits .some of the examples were how we can delete a directory via cmd line ie the terminal instead of right-click then search for the delete option and then confirm whether you want to delete it or not . The new thing which I learnt was about lynx.

Lynx is a command line based web browser which means instead of typing in terminal Firefox google.com we can type in lynx google.com the difference is just that it displays the page in your terminal itself thus using less bandwidth load and providing high performance .

After that we discussed about what are the events that we’re going to conduct in our college . we said that we will be creating a website for our GLUG (GNU Linux User Group) .Along with that On March 8th ( International Women’s day ) we planned women who hack its an event that’ll be conducted at IIIT-H on the same day

Web dev workflow in indian institutes

“If you think math is hard try web design.”

– Good read

With years passing by people denoted more to the UX/UI designing . UX designing not only attracts people but also provides intuitive and interactive learning process throughout the website but the problem here is that Teachers from different institutes especially in India don’t give any attention to the UI face of design instead they just take care of whether the website is functional or not that’s it .It doesn’t matter whether the page look ugly or beautiful. That is why student ambassadors are recruited so that they can learn from the experts and teach others to adapt to the present workflow .

As of now institutes in India, students tend to follow the same boring workflow that they teach they don’t even bother to tell us from where we can study about it ie is there anyone whose designs we can follow . They just dump everything into our minds and prepare us for the exam and we call that as spoon-feeding . Why don’t they understand that there are students who are interested in learning more on that subject it can be anything JS,CSS,Nodejs etc . That is why i get fed up with the management in India i don’t know about IIT’s hope they don’t follow spoon-feeding style.

The basic thing that we lack is practical learning . What i think is that we can improve in this field by collaborating management with students, here transparency comes into picture .This can be done by having R & D dept in every college and should not be interfered by the every management body only few should get access to it . With this students who are interested can take part and have a broad knowledge of what’s happening in the current workflow .

Boxify Deconstructed #1

Before starting you should check out my previous post on what are the essential things that you need before starting a website or any front end dev ie Designing . Since we have a Mock site Boxify it’s just that you need to download so that you get a kickstart .

First thing first you need a foundation for that we will be using the basic Boilerplate model you can download it from github.

boxify deconstructed

This is what it looks like after applying the boilerplate content ie the index.html file in the boilerplate folder . including the you need to add some other ingredients to add a nice flavor to it . lets see the changes

boxify deconstructed after change

You can see that we have made some additions to our old file like JS and some CSS(bottom and above resp). these are the changes .Have a look at their official websites .

1# Modenizr

2# Bootstrap

3# Jquery FancyBox

4# Flickity

5# Animate.css

6# font-awesome

7# Boilerplate

Boxify – Theme Deconstructed Series

Boxify is an HTML theme developed by Peter Finlan you can see this on  http://tympanus.net/Freebies/Boxify/ . I will be deconstructing this theme and explain you how to develop these kind of themes with easy and what are the things that we required to create such themes .

Starting with my setup i will be using Bracket Text Editor you can use Sublime or Notepad++. boxify theme deconstructed rittam debnath

For this you need to have the good knowledge of HTML and CSS in one of the post i mentioned some websites from where you can learn these lang’s easily .

Why we need to compress or minify CSS and Js?

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

Obfuscation is an alternative optimization that can be applied to source code. It’s more complex than minification and thus more likely to generate bugs as a result of the obfuscation step itself. In a survey of ten top U.S. web sites, minification achieved a 21% size reduction versus 25% for obfuscation. Although obfuscation has a higher size reduction, minifying JavaScript is less risky.

In addition to minifying external scripts and styles, inlined <script> and <style> blocks can and should also be minified. Even if you gzip your scripts and styles, minifying them will still reduce the size by 5% or more. As the use and size of JavaScript and CSS increases, so will the savings gained by minifying your code.

Here are the top 3 online CSS compressor

1# CSS compressor

2# CSS minifier

3# Grunt Js  here is the tutorial to learn how to minify your css and js .

Quick look at the revolution of web browsers

Browser Revolution was started by Mosaic, well-known as the first popular web browser which dramatically boosted the popularity of world wide web. Mosaic was developed at NCSA, part ofUniversity of Illinois. Some Mosaic team members later went to create Netscape and develop Netscape Navigator. One of them is Marc Andreessen (@pmarca), a graduate of University of Illinois, who is known these days as a prominent investor at Andreessen Horowitz (a16z) VC firm.revolution of web browser

Mosaic was later born again in the form of Internet Explorer. Spyglass, an official licensee of NCSA Mosaic project, licensed their browser technology (unrelated to the original Mosaic code) to Microsoft and it became the genesis of a new browser contender to Netscape Navigator. The rise of Internet Explorer also led to the first Browser War.

During this time, Netscape was in trouble and the browser code was released as an open-source project Mozilla. After a few years, Firefox emerged and this time became the browser that challenged Internet Explorer. One of the co-creator of Firefox is Dave Hyatt, he was involved with Netscape and it is hardly a surprise that he also finished his graduate from University of Illinois. Later on, Dave Hyatt was one of the influential figures behind WebKit, the rendering engine that powers Safari.

Something that is not mentioned in the above browser diagram is of course JavaScript. Are you going to be surprised if I now mention that Brendan Eich (@BrendanEich), the father of JavaScript, finished his master also at the University of Illinois?

here is a great post by Paul Irish about Webkit for developers.

– Post by ariya

Why we need to put stylesheets at the top inside the head tag ?

Stylesheets are basically used to beautify HTML page . it contains many elements cascaded with properties and values . If you are developing a website then you might know the fact that bootstrap contains thousands of rules which are available both in the minified as well as unCompressed .Since it is an external Stylesheet we can use it in any html page . But here the problem is whether to put the CSS link at the top or not . According to yahoo Developers its good to attach it at the top inside the head tag which will increase the performance and also not cause any flash of unstyled content (FOUC) and allows the page to render progressively. When the browsers renders it progressively ie from top to bottom it also improves the user experience .

The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

Flash of Unstyled Content occurs when your bandwidth is low and the browser is slow to render all the styles from the server which will appear as if there were no styles applied to the webpage for a second then after it renders it’ll be back to normal .

Even the HTML specification or W3C states that the styles should be put at the top of the document .The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.

JQuery Mobile Demos , How to create a simple dialog Tutorial.

jQuery Mobile Demos it’s a fun way to start HTML5 Mobile project. If you are looking for documentation to create a Mobile Text Note Editor ie onClick of note that slides to another page then it can be dont via jQuery mobile all the documentation and even the CSS framework is provided on their site .

Here is an Example site that you can look into and understand how to create a jQuery based application.

SimpleDialog Features:

Two display modes, either a button choice (bool), or a text entry (string).
Attempts to position itself centered over the input, however, for small screens, it will open a dialog window instead.
Click outside the widget to close.
Options can be configured via data-options attribute

Here is the github src page you can download it for free.

Similarly there is another site which showcase how to work with backbonejs link. If you want to learn what is Backbone js and what is the use of it then click here.

Material Design by Google

With the L developer Preview Google has made a great entry in the field of Design and sleek animations by changing the meaning of each element with the shadow . Basically every object works in a 3D space model with x, y and z axis and each object has a light and shadow with which virtual lights illuminate the scene and allow objects to cast shadows.

Thus Material Design is quite a niche move by google . but the developers wanted more than this , with the CSS frameworks in rise like Bootstrap, Foundation etc, Material design also became a CSS framework that is available online for free. Lets start Materializing your Website .

You can also get the latest release using bower. this release contains source files as well as the compiled CSS and JavaScript files.

bower install materialize

whatismaterial_environment_shadow1 whatismaterial_environment_shadow2 whatismaterial_environment_shadow3 whatismaterial_materialproperties_physicalproperties_thickness_01_yes