Thursday, November 28, 2013

ASP.NET MVC - Organizing your BundleConfig.cs

Here's how I organize my BundleConfig.cs in my ASP.NET MVC projects

BundleConfig.cs http://pastie.org/8514126
_Layout.cshtml http://pastie.org/8514131

First we have two static classes, "JavaScript" and "CSS".

These have both static sub-classes, "Bundles" and "CDN". The "Bundles" class contains const strings which are both keys for the bundle and the virtual path to the code location. The "CDN" class contains URLs.

public static class BundleConfig
{
    public static class JavaScript
    {
        public static class Bundles
        {
        }

        public static class Cdn
        {
        }
    }
    public static class Css{...}
}

For JavaScript, In the "Bundles" class, I keep my JavaScript in the folder "~/Scripts/" where jquery-2.0.3.js resides. Thus, the virtual path becomes "~/Scripts/jquery-2.0.3.js" and this text is contained in the string "Jquery".

public static class Bundles
{
    private const string PathBase = "~/Scripts/";
    public const string Jquery = PathBase + "jquery-2.0.3.js";
}

Below is the static class "CDN" which has a similar structure, which are just URLs that matches the above JavaScript classes. A CDN is very useful since it offloads loading time from your server, and data from the CDN can also run in parallel with loading the response from your server.

public static class Cdn
{
    public const string Jquery = "http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js";
}

The "CSS" class functions similarly, with both a Bundle and a CDN class.

With this setup, registering the bundles becomes very easy and clean.

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle(JavaScript.Bundles.Jquery, JavaScript.Cdn.Jquery).Include(JavaScript.Bundles.Jquery));
}

Likewise, including the Bundle is also clean
@Scripts.Render(BundleConfig.JavaScript.Bundles.Jquery)

Some additional tips:

Always place your javascript at the end of your <body> element, as it will block the rendering of the site if you place it above the content.

Monday, November 4, 2013

Remove all images on a website

Such a simple thing, yet Google gives you nothing on how to achieve this. So, I'll make a post about it.

Here's how you remove all images on a website:

javascript: var images = document.getElementsByTagName('img'); for(var i in images){images[i].style.display = "none"}

Create a new bookmark and put the above code in the URL field (example: Chrome)


And add the bookmark to your browser bar (example: Chrome)


Press the button and all/most pictures should disappear. (Some pictures won't, because they are coded on the website in such a way that prevents this easily. I'll try to improve the code to check for this at some point)


Saturday, January 12, 2013

What is Git and Github?

What is Git?

Per definition, Git is a distributed revision control [...] with an emphasis on speed [Wikipedia]. Let's break down those terms.

  • Distributed: The data is spread out in identical copies on multiple places, akin to torrent technology (peer-to-peer).
  • Revision control: Is the same as "version control" or "source control". It is the method by which you control, save and load different versions of your code and its changes over time.

Git implements the concept of branching. It's like a tree-branch, growing out from a stem.



A branch is initially a full copy of the original project (master). The branch can be updated and saved without affecting the master. When the branch is ready to be included into the original project it is then merged with the master - putting the code of the branch into the master.

Git is usually hosted online at a repository, such as Github. But it can also be locally on your computer. If you use an online repository, the online project and your local project will be exactly the same.



Two other essential Git concepts are "pulling" and "pushing". Pulling gets the source code from a repository. Pushing puts changes of your code into the repository.

It is important to understand that there is no real difference between an online, hosted master and offline master in your local filesystem. Almost everything you can do with an online master you can do with an offline one. Do not confuse Git with Github. Git is the system used to manage your data. Github just helps you with hosting this data online.

Why would I use Git?

Git will help you store and manage your data. Indeed, that is the very point of version control.

There is no real difference between using Git locally or online: if you work solo and on one computer. But putting your project online will give you increased flexibility - if you want to share the project to others or download at a new location, the new copy being exactly the same as on your computer. It is distributed, remember?

If you are multiple people working on the same project, Git will provide easy online-access to your data (if you use a host such as Github). Using branches you can implement a feature without messing with the original code and meddling with your other team-members by submitting incomplete code. Just create a branch instead.

It's also certainly worth linking your Github account in your resumé if you have some nice code hosted there. Github is a well respected site, and many people know what it is and how to use it. And those that do not will surely be impressed by all your amazing computer code mumbo-jumbo.

Installing Git

The easiest way to install Git is to head to http://git-scm.com/ and download an easy client-bundle for your operating system.
You can also download some specialized GUIs with added functionality http://git-scm.com/download/gui/win

But we will use the first way, which gives you acces to the Git Bash console.




Now, if you sit on Windows the commands accepted by the Git Bash console will be different from what you are used to. It only takes unix commands which you can read more on here.

Configuring Git

So fire up your fresh Git Bash and let's get to it.

Some initial necessary configurations:
# the name shown as you commit changes
git config --global user.name "firstname surname"
# you don't have to set a valid email (asd@asd.com is just fine) but it must be set. If you use Github, your email will function as your identification
git config --global user.email "email@mail.com" 
Not needed, but very useful.
# pushes all branches relevant to the project
git config --global push.default "matching"
# pull changes before pushing for safety
git config --global branch.autosetuprebase always 
Navigate to your project and create git files necessary to manage your project (the file structure here is for Windows)
# navigate
cd C:\MyProject
# create git files
git init
You can now index the files - telling Git what files you want to manage.
# this will add all your files to Git. The . is a shorthand for "all"
git add .
If you are happy with your code, you can your files under local git management
git commit -m "My first commit"
Now you are done with local settings, and you can stop here unless you want to put your code online.

Dealing with Github

Disclaimer: The way we have approached Git so far is project-first. We assume you have some existing files you want to upload. There are other ways to do it, but we won't do that now.

Head over to Github and create your account.
Then press this icon beside your user to create a repository:


Setup a repository for your project:


You will see some text. Copy this (specific to you). Be sure to select HTTP - it's a much simpler but less secure version, but just fine for our purposes.


Now you can add a shorthand for your online git repository, so you don't have to type the URL every time (this might as well be a path on your local filesystem) Press Insert to paste into the console.
git remote add MyShortHand https://git@github.com:BlackOdd/MyProject.git
Now push the changes to your repository.
git push MyShortHand
Write the password for your Github account (which must be identical to the email you configured in the beginning, and also present on your account emails) - and you're done!

Other useful commands

If anyone makes changes, you can pull them. This will update your files to be the same as the master.
git pull MyShortHand
If you have made changes to your indexed files you must use the -a flag while submitting files to git management.
git commit -a -m "I've done some changes"
If you want to create a copy of the master in another folder, just use this.
git clone MyShortHand

Alternatives to Github

The main drawback with Github is that if you want to hosting for free, your project must be public for everyone to see and download.

I personally use Bitbucket https://bitbucket.org/ as it has no such limitations, giving you the choice to make your project public or private at no cost.

For more specific needs (user amount, project size, project amount etc) you can check out these:

http://repositoryhosting.com/
https://codeplane.com/
http://beanstalkapp.com/

Useful resources

Git tutorial by Lars Vogel: http://www.vogella.com/articles/Git/article.html
Official online and free training for Git: http://training.github.com/web/free-classes/
An exhausitive and free book for Git: http://git-scm.com/book