I want to create a website

Having your own website is one of the best things you can do if you are planning to have a serious online presence. Of course it is not a silver bullet solution, as it requires constant investment of time creating valuable content and marketing, but it is ultimately the starting point people will check about you online.

So, I want to create a website. What are my options? What should I do next? In this post, I will consider several options you may follow to create your own web site. Fortunately, there are a lot of options available to choose from, starting with ready made solutions which you may set up with very few clicks, to those which require advanced knowledge of some technologies. Unfortunately, I will not be able to list here all available options, but I will try to make a list of options which may suit most of you out there trying to create your own web site.

1. Free blog with WordPress.com

If what you are looking for is just a blogging website and you want it for free, wordpress.com may be the best choice for you. They have a managed wordpress hosting solution for which you may sign up and get your own blogging solution set up with a few clicks. This solution could be a good start if you want to try yourself blogging and create an online presence without investing any money. Though, this free solution comes with some limitations. You get a domain as http://yourname.wordpress.com and few free themes for your site. If you want a custom domain name like www.yourname.com, or a better design for your site you have to pay for it. You are also not allowed to install your own themes (if you already have one, or want to custom build one), but only choose from available ones there (free or paid).

2. Managed hosting with wordpress site

If limitations of wordpress.com do not fit you well, you may decide to go with a managed hosting where you may setup a wordpress site. I happen to prefer wordpress as my CMS of choice, otherwise, you may chose to set up a different CMS with your hosting provider depending on the type of hosting you have and the CMS you have chosen. With a manage hosting, you may chose your own domain, buy or develop a custom theme for your site, and do many more customizations which are not possible with free wordpress.com solution.

There are plenty of companies offering managed hosting solutions, and all of them vary in price and features they offer. Some of the popular hosting companies I have come over are GoDaddy and BlueHost.

3. Managed hosting with a custom solution

Another choice is to have a managed hosting solution with a custom web site developed for you. This is more powerful than above mentioned solutions as you have the option to chose everything (from colors, fonts, to design and features developed), however, it is more expensive. Depending on the market you live, developing a custom web site may cost you from several hundred dollars to several thousand dollars.

4. Private hosting

Private hosting is an advanced solution, mostly suitable for companies, where you get a private server rented for you from a hosting company. The hosting company creates the server (be it real hardware server or a virtual one), connects it to internet, but leaves the management of the server environment to you. This has huge advantages as you control what is installed in the server, what features do you want to offer, and it is very easy if you want to add some unsupported technology to your solution. However, it is also very expensive and requires technical skills of system administration and system security as this task is on you now.

5. Cloud solution

Cloud solution is a superset of private hosting. If you choose to have a cloud solution with one of the biggest market players in this industry (Microsoft Azure, Amazon AWS, Google Cloud Computing), then you not only have the server on your control, but a whole IT infrastructure. You have the possibility to create virtual servers, website hosting, email services, active directory services, storage and backup services, and many other IT infrastructure components as a service. This powerful solution requires you to have a very good understanding of IT infrastructure configuration, but as a benefit, you get a flexible IT architecture which can scale up and down as needed and you pay for what you use.

Conclusions

Which one is right for you? Well, it depends. Your needs define what is best for you, but generally speaking, amongst these, number 2 and number 5 are my favorites. So, if I want to create a website for myself, or you are an individual or a business who wants to have a blog or a personal/company site which is for online presence, then I think option number two is the best choice as it has the possibility to scale up with a custom solution or stay with a WordPress or a specific CMS. If you have a startup which is offering a SaaS or any other solution that you expect to have increasing demand, then I think option number five is the best as it offers you the possibility to start small and grow as needed. Of course these come with the complexity of knowledge required, but it will be worthy to invest in that direction.

A beginners’ guide to web development

If you are reading this post, most probably you have some sort of interest in web development, or even you think about starting to learn about web development. In this post, I would like to show you what path you can follow to be a web developer. This is a beginners’ guide to web development from the perspective of what to learn and how to specialize. This is not a post in which you will learn coding. I just want to point out the what you need to consider before you start learning to code. So, welcome to our dynamic and ever changing world. One of those fast-pace professions with lot of challenges and excitement. So let us define some basic concepts first.

Front End vs. Back End

The initial separation you will feel here is Front End vs. Back End. Let us clarify first what is Frond End and what is Back End.

Front End

Web applications are categorized as distributed applications with a client-server architecture. So, we have a part of code which runs in the client and another part in server. The part of application which is run and rendered in client (most of the time, the client is our web browser) is called the Front End. The most usual technology combination which is used to develop for Front End is HTML+CSS+JavaScript. Front End specialists usually develop expertise in creating Front End of the web applications using these technologies. Another common skill Front End developers master is slicing Photoshop designs to HTML+CSS+JavaScript web pages.

Back End

Back End developers write code that runs on server. Usually, this part of the job entails communication with the DataBase for reading/writing data, reading/writing files, doing the business logic, etc. In some cases where the business logic resides in client side, then Back End is used to serve the data from the DataBase usually in the form of Web Services. Back End developers usually master one of web programming languages and a DataBase Management System.

 

You can master both, but from my experience, I have seen that all web developers tend to like one more than the other. Some even specialize on only one of them. Although there is a line of separation, there is no limit that which side should do what. Sometimes Front End is used only for visual representation and all the job is done in Back End. In some cases, Back End only serves the data and all the calculations and functions reside in Front End. It is a matter of design and architecture to define which side does what (although, depending on the architecture you choose, there are some guidelines about the responsibilities of each side).

Programming languages

There are a lot of available programming languages for web development. When we want to program on Front End, the defacto standard language is JavaScript. When it comes to Back End, we have plenty of choices. Let me list some of the popular choices:

  • PHP
  • JavaScript
  • Ruby on Rails (used with Ruby programming language)
  • ASP.NET (used with .net programming languages)
  • Java EE
  • Python

And this is not a definitive list, just those that came to my mind right now. So which one to choose. Well, your choice should be evaluated based on some factors like: the job market, hosting environment of the web application, available learning resources, available time to learn, the development community around you.

If you want to work as a web developer, in my opinion the most important factor is the job market. You should analyze the job market you are in (or you want to be in) and chose that language that has most job openings. Another important factor is the hosting environment. For example, PHP hosting is quite cheap compared to Java hosting. If you are going to develop an intranet application which is going to be hosted internally in an organization, perhaps Java EE could be a very good choice, but if you want to host your application online, Java EE could be rather expensive compared to other languages.

With the popularity of Node.js, JavaScript has started to become a popular choice of Back End programmers, however, this is still quite a new and immature technology compared to others, and I would not recommend it as a choice of beginner Web Developer.

In my opinion, PHP has the easiest learning curve, cheap hosting environment, plenty of learning resources and relatively easy development environment, so I would recommend to any beginner web developer start with PHP. ASP.NET is also a good choice. Microsoft offers a lot of learning resources, free development tools and a pretty rich environment. If you like the Microsoft ecosystem, ASP.NET is a very good choice.

Frameworks

If you are a beginner, give yourself some time before you start learning a framework. Frameworks are code libraries which make the life of a web developer easier. Frameworks give a structure to a web application, help web developer do some tasks a lot easier and faster then coding everything yourself. If you want to be a professional Web Developer, then it is a must you learn at least one framework, which boosts your speed of development.

You have a plenty of frameworks which try to be general solutions or specialist solutions. You must evaluate your needs. If you have chosen PHP, I would recommend Laravel as a framework of choice. It is a sound MVC framework which is quite trendy these days. If your choice is with ASP.NET, I would definitely recommend you learn ASP.NET MVC and EntityFramework at least.

Web development can be huge and you may want to focus on one type of applications, let’s say development of web sites with Content Management Systems (CMS). Again if you have chosen PHP, I would recommend you continue with WordPress. WordPress allows you to create web sites, blogs, but also it can be extended with ready plugins or custom themes and plugins to quite complex business applications.

You will find plenty of choices for frameworks for any language you choose, so based on your language of choice, you will have to work with different frameworks.

What next

As a first advice, even if you choose to specialize for Front End or Back End (I would strongly recommend you do), you should have a grasp of the other side, and if you do, your team’s performance will be better. If you have learned a programming language and mastered a framework, what I would recommend is you start with another one. Programming languages have their own philosophies and paradigms, and sometimes some differ quite a lot. Knowing two or more programming languages will allow you have a better picture and understanding how programming problems are tackled and will make you a more fluent developer. As I said earlier, you have to consider many factors when you choose your languages. My choices until today were: JavaScript, PHP, ASP.NET, and Java EE. I’m still looking forward to extend my list 🙂

Microsoft Certifications: Web development path

Microsoft Corporation offers a rich set of possibilities when it comes to education of new and existing software developers. Taking certification exams and certifying your knowledge is one of the best ways to build a solid knowledge base, improve your skills, and get ahead with your career in software development. In this post I will describe what it takes to follow Microsoft Certifications: Web development path.

In this wide range of certifications, where does one start from? Well, it depends on your current skills and work experience. If you are new to software development with less then one year of work experience or so, then my suggestion is you start with Microsoft Technology Associate (MTA) certifications.

You may start with  following MTA exams:

Software Development Fundamentals (Exam: 98-361)
Web Development Fundamentals (Exam: 98-363).
.NET Fundamentals (Exam: 98-372)
HTML5 App Development Fundamentals (Exam: 98-375)

For the complete list of MTA certifications please see MTA Certifications web page.

MTA certications are optional and are useful only if you do not have work experience developing these solutions.

What after that? The next part of the path is of professional certifications. The web development path leads to Microsoft Certified Solutions Developer: Web applications (MCSD). This title is awarded to anyone who passes these exams:

Programming in HTML5 with JavaScript and CSS3 (Exam: 70-480)
Developing ASP.NET MVC Web Applications (Exam: 70-486)
Developing Microsoft Azure and Web Services (Exam: 70-487)

When you complete all of these exams, you will get the title of MCSD: Web Applications which will certify your knowledge in the field of developing web applications using HTML5, CSS3, JavaScript, and ASP.NET MVC.

Optimizing ASP.NET web pages

With increasing usage of mobile devices for browsing the web, optimization of web pages has become a topic of utmost importance. Perhaps, this post is nothing more than stating the obvious, as techniques to be mentioned here are very well known for quite some time, yet, pretty often ignored or dismissed, leaving web pages bad performance.

In this post, I am going to describe some of the well known techniques for web page optimization and how they can be leveraged in ASP.NET web pages/applications. This post will cover:

  • Javascript/CSS placements
  • Bundling & Minification
  • Caching
  • Image optimization
  • Gzip compression
  • Number of requests
  • CDN

Let’s get deeper into the topic.

JavaScript and CSS placement

It is often encountered that developers leave all CSS links and JavaScript (JS) references at the Head section of a page. Interpretation of the HTML code by the browser goes in a sequential way, so the browser downloads resources as they come, and until resource in the queue is downloaded, it stops downloading other resources if they are at the same host. As such, when source hits JS reference, it will block loading further until these JS files are downloaded. In most cases, JS files contain code related to functionality, and it is acceptable that functionality not to be available until the whole site is loaded.
Whilst, CSS files are required for proper appearance of the site. This suggests us, that CSS files usually have a higher priority for loading than JS files. As such, if we leave all CSS links at head section, and move all JS references at the bottom of the page, right before the body end tag, we will make the page appear before the whole site is loaded, thus giving a faster load time impression.

E.g.


<html lang="en">
<head>
<link type="text/css" reference="stylesheet" src="~/styles/style1.css"/>
<link type="text/css" reference="stylesheet" src="~/styles/style2.css"/>
<link type="text/css" reference="stylesheet" src="~/styles/style3.css"/>
</head>
<body>
...
</body>
</html>

Bundling & Minification

Bundling is a technique used to collect all CSS files into one CSS file, and all JS files into a one JS file. ASP.NET as of version 4.5 has bundling and minification functionality included. Older versions can get System.WebOptimization packag by downloading it from NuGet.

When you create a new MVC 4 web application from Visual Studio, you get bundling and minification set up by default. Bundling and minification code can be found in App_Start folder within the solution, in BundleConfig.cs file. Here you may add files to be bundled and minified one by one by registering them with their relative path like this:

bundles.Add(new ScriptBundle("~/bundles/libs").Include("~/Scripts/libs/jQuery.js"));

This code creates a virtual path “~/bundles/libs” and includes JavaScript file jQuery.js. You can include as many files as you wish, and they will be bundled in the order you have included them. You can also specify a pattern to include such as "~/Scripts/libs/*.js" and this will include all JavaScript files in that folder. In the case of pattern, files will be loaded alphabetically, with consideration of known libriaries, such as jquery will be loaded before your custom libraries, and before jquery.UI.

It is important to note that, bundling and minification will happen only when the application is on “Release” solution configuration. When in debug mode, bundling and minification will not happen.

Caching

Caching is a technique used to create a temporary faster storage of commonly used content. Caching can be done on two levels:

  • Server side
  • Client side

When done server side, we load commonly used content to memory, and serve from that place instead of other sources such as HDD, DB, etc. ASP.NET provides support for server side caching through HttpContext.Current.Cache. However, server side cache helps with dynamic content. On the other side, a good part of web page load comes from static content such as JavaScript/CSS files, images, etc. Static content can be cached on client side. By this, we tell the browser what content can be saved locally for some time, and until that date is expired, the browser should not ask the server for that content. We can influence client caching through using a Manifest file or by saying the IIS to write caching headers on responses for static content. This can be done by adding this code in Web.config file.


<system.webServer>
<staticContent>
<clientCache cacheControlMaxAge="365:00:00" cacheControlMode="UseMaxAge"/>
</staticContent>
</system.webServer>

This will tell the client to cache static content for a year from the date of request.

Image optimization

Optimizing images is a crucial point on web optimization. Most of the sites today have a lot of images, and by optimizing them a lot of page load size can be saved. Images can be optimized by using a image editing software. From Visual Studio, an extension called Image Optimizer can be used to optimize images.

Image optimizer extension for Visual Studio

This extension will allow you to right click an image, or an image folder and select Optimize images option, and it will do the optimization for you.

Gzip compression

Gzip compression is a server side functionality for compressing the content sent to a client. By default, compression is enabled from IIS7.5 and above. If compression is enabled on web server, then we can influence this behavior from web config by specifying this:

<system.webServer>
<urlCompression doDynamicCompression=”true”
doStaticCompression=”true”
dynamicCompressionBeforeCache=”true”/>
</system.webServer>

If values are specified to false, then this will stop compression.

If you are using IIS Express, then you can activate compression by executing this command from iis express folder

appcmd set config -section:urlCompression /doDynamicCompression:true

Number of requests

By HTTP specification, the browser should download at most 2 resources in parallel from the same host. Most browsers comply with this, or up to 4 parallel downloads. This means, if there is a high number of requests to retrieve the whole site, the page load time will be slow.

This bottleneck can be addressed in different ways. Bundling & minification is one way to decrease the number of requests. CSS Sprites as well as embedding small background images to CSS also will help on this. One other way to help this is by putting resources in different hosts. Even subdomains will help on this, for e.g. putting images, scripts, and css on different subdomains like this:

images.host.com
scripts.host.com
css.host.com

will make the browser believe it is downloading files from different resources and throw more threads for parallel downloads.

Content Delivery Networks (CDNs)

CDN is a way to optimize a web page as well as save bandwidth at the same time. Most common libraries used, one of them being jQuery, are hosted by CDN providers such as Microsoft, Google, etc. You can even use custom CDNs such as Akamai and host your content.

CDNs will optimize content download from a geographically close location to the requester. This will also benefit from the fact that the browser will see a different host from your side, and will throw another thread for downloading content from CDN.

The techniques mentioned in this post are by no means all what can be done to optimize ASP.NET web pages. There are many other techniques with more specific usage and help optimization of web pages.

Train yourself on ASP.NET web development

I have always been supporter of the formal education as a primary way of one’s intellectual forming. However, there are times you need a quick push on a topic you have no experience, or formal education. If this is your case, then here is my advice.

You need to have a curriculum to support your knowledge development, instead of trying to grasp the topic from blog posts and internet pages. As humans tend to learn visually faster than by reading, starting with video training would be a better choice.

Pluralsight is a video training provider for developer topics with videos prepared by some of the most known authors and industry experts of software development community. From the range of the courses offered, here is a learning path I would suggest, from the range of training provided from Pluralsight.

Lets start progressively, from basics to more advanced topics, so here are the courses in this order:

  1. HTML Fundamentals
  2. HTML5 Fundamentals
  3. Using HTML5 and CSS3
  4. JavaScript Fundamentals
  5. Structuring JavaScript Code
  6. jQuery Fundamentals
  7. A Web developer’s guide to images
  8. ASP.NET MVC4 Fundamentals
  9. Building Applications with ASP.NET MVC 4
  10. Building ASP.NET MVC Apps with EF Code First, HTML5, and jQuery
  11. Web performance
  12. Scrum Fundamentals

This curricula is prepared in a way so you will progressively develop yourself to be a web developer. First, you will start with HTML, then continue with HTML5, the hot topic of our time, and proceed further with mixing HTML5 and CSS3 to create modern sites. After that, the curricula continues with JavaScript, the ultimate language of browsers, to continue with a guide to images,  and then further advance with server side programming using ASP.NET MVC framework. At the end, course finishes with Web performance topic to create optimal fast loading sites, and Scrum fundamentals, to develop a structured software development process. 

If you follow this path, my suggestion is that you allow yourself at least two months, if not more, to go through these courses.

I would like to hear your opinion, especially about the results if you have followed this learning path.