Getting Started with Chrome Developer Tools

I found a great site called Code School (all free for the 5/24 - 5/27 weekend) with a very well made hand on tutorials for different Web technologies. The Google Chrome Developer Tools  course was free. It was so interesting and engaging that I finished the full course in one day.

Here is a list of features that are included in the Chrome Developer Tools. If you do not have the time to take the course, I highly suggest skimming the features and go back to learn them if you needed the tools.

Elements:

• Gives you the ability to Drag and drop HTML Lines, Edit the HTML,
• Look up the CSS items  and where they are inheriting the elements.
• Ability to change to cursor dependent events (elements like onhover, infocus ..etc) to edit the CSS

Resources:

• Look up all the files used to create the site (CSS, JS, images) and highlight any missing ones
• Local storage shows any saved JSON calls (I have yet to test this with forms, but Get and Post data should be shown here)

Network:

• Shows the calls (Get and Post) made to show all of the files and when they started (server is limited to a number of files it can call in time. So it is a great idea to combine and minify files.
• To use: Press the black circle at the bottom and it would start recording then Refresh the page.
• Options to disable cashed items under settings (small gear on the bottom right)

Sources:

• A text editor. Access all of your (js) files and ability to edit.
• Right click and click on Local modifications for the option to save your files or revert.

Timeline:

• Record Behaviors (animation, drawing) to see how long they are taking to draw.
• Memory monitoring to check for any memory leaks

Profile:

• Monitor the speed of the JS to help with finding parts of the codes that are slowing the page
• Monitor CSS to find how long the JS is taking to select the elements (e.g. #elementName vs .elementClass)
• Take a Heap shot to find any memory leaks of elements not collected.

Console:

Consoles allow you to type any Javas Script functions you have in your page and it would return the result.

Select elements to find them in your html by using  $(".className") or element

Lots of goodies that could be found on the google API support.

Chrome Developer tool is a must learn if you are doing any web development. I have to admit that one feature that I miss from IE dev tool is being able to use the cursor to highlight and click on an element on the web page.

Zoom in to Show Your Presentation Details

Ever seen a presentation where the presenter zoomed in to a part of the screen to show some hard to read details?

I always thought that it was a windows feature but I finally found it. This cool trick could be done with a product from Microsoft called ZoomIt.  It is hard to show an example of it, but  this is what my full screen looks like before and after zooming in.

I wish I knew about this before I used ctl + and - on my presentation. Enjoy!

How to Give Your First Technical Presentation

So I gave my first ever technical presentation at Carolina Code Camp 2013. I talked about a technology that makes my life easier and felt that other developers should know about.  I had a lot of fun doing it and received a positive reaction from the audience.

Before I start, I just want to break the misconception of being an expert to present. You don't. It is all about knowledge sharing and helping others. You can simply research a topic for a week and present the lessons to your audience.

Protip: Nobody is really "qualified" to give tech talks.We're all exploring and figuring it out.Just share what you've learned.

— Jeremy Kahn (@jeremyckahn) April 11, 2013

It was a learning experience for me and a step that I knew that I should take one day. So I decided to focus on improving my presentation and public speaking skills.  These are some basic  tips I collected  that would help anyone trying to present for the first time:

1- Don't focus on being a great presenter. Focus on not sucking
Silly..but an average presentation where the message is delivered is your goal. You can not become a Steve Job by practicing for a weekend. It takes experience to give a great presentation.  Instead, look back at the bad presentations that you been to (speaker was not prepared, reading from the slides ...etc) and focus on NOT doing these mistakes.

2- Practice In voice
Practicing the presentation in voice helps with recognizing strong points for the slides. Each slide should have a reason for being up and you will need to tell the audience why you have it up there.
It also helps with creating an "auto pilot" feel where some  key points would be explained  at the right time giving you time to prepare for answers. And walk around the room to practice your body movement.

3- Find Your slides Balance
A slide with one word can be as powerful as one with multiple bullet  points. Your goal with the text is to get your crowed to stay at the same subject as you.  Do not read from the slides as human eyes can read faster than the speaker reading.

4- Live Code can go wrong. Just show us the code
If you are a new speaker, Try to lower the risk of failure of presentation tools. We know that you can code. So not coding in front of everyone and showing us the final result is enough. Just practice, add a lot of comments  and know the code does.

5- Everyone in the room wants you to succeed
Unlike the old school  and college days, No one is forced to come in. Everyone knows what it feels like to present and they know that it is tough. They will all help you because they want to hear what you got.

6- Draw your energy from the crowd
Your crowd will follow along and there will be some interested people sitting. Try to find one from each section of the room and it would look as if you are making eye contact with everyone. It would be more helpful if they are sitting in the back.

7- Tell them when they can ask questions
It is a great feeling when others ask questions. It wakes up the room to hear another voice talking.  After any big slide, make sure that you are asking for questions. Waiting to the end would cause the audience to forget to ask. Plus, It is easy to assume that the crowed knows some concept when they are not familiar with it. A simple question can clear a lot of confusion and put everyone at the same point with the speaker.

8- Show your personality
Be human. The audience would learn more from a presentation that they enjoyed. be yourself. Just talk to them the same way you talk to your friends.

9- Tell a story
You can always come up with a story. Do you have any reference stories about your client? How did you start using this technology? We want to relate the technology to our lives. An If statement is a cool concept, but an ability to make a decision is more interesting.

10- Replace the "um" with hand gestures.
Trust me .. Not a single um was given.

That is all I can think about now. I am still a bad presenter and will be for a while. And it is OK. Everyone got to start somewhere. I did not expect that good of a reaction out if my first  presentation.  I can't wait until I am up in front of everyone again.
You are all ready now (you were before reading this but probably didn't know it). Go ahead and present!

Some helpful resources I used:
- Scott Hanselman has a lot of good articles and videos. At the very least, I recommend listening to the podcast.
- Good tips and very cool slide design. I recommend reading his take on how we use Powerpoint wrong.
- Impress.js library helped me create a non-powerpoint presentation.

Using Twitter Bootstrap 2.0 in ASP.NET MVC web applications

Bootstrap is a powerful front end framework that contain a collection of tools used to create great  sites and solve common  front end problems.

I stumbled upon bootstrap while looking for a way to improve the look of my web pages. I come from a native  development background and the front end of my application -while important- has not been my focus. I wanted to create cool looking, and yet, not time consuming UI for my applications. Twitter Bootstrap saved my day.

I tried to change the front end of my ASP.NET MVC web apps and Here is a quick way to use bootstrap in your ASP.NET application:

 1-Create a new blank ASP.NET MVC 4 project. 

2- Let Nuget handle it for you (OR you can manually add the bootstrap files to the correct directory. Not recommended). You should find the package installer under Tools (don't mix between it and the VS command line). The command is  :

Install-Package Twitter.Bootstrap.

Your Bootstrap files will be located in your content file

3-Add the libraries to your BundleConfig.cs file. This is not required but it is a good practice.  

4- Include your CSS and JS bundles in the _layout header. I ran the site before and after including the bootstrap file.

5- Change the contents of the file to fit your style. I used an example from bootstrap website to start. I added padding to the top of the body to allow for room for the navbar.

Code  is available (folder: Working Example) at  https://github.com/AMadHammer/Bootstrap2inASPnet

Helpful resources for super-hero-level of website building:
- Form builder using drag and drop.
- Free themes to use.
- Create a mock up of your bootstrap site.
- THE GREATEST BOOTSTRAP THEME EVER