The main goal is to collect the 32 golden cubes, but the more perseverant gamers can also try to collect 32 anti-cubes and more by solving much more difficult puzzles. The gaming community collaborated on the more difficult ones, but the last one had yet to be solved a few days after all the others had been solved.

The last puzzle

If you are already familiar with the story surrounding the last puzzle, jump to the next section.

The main theory for the last puzzle was that players had to stand at a very specific spot in the game and input a sequence of button presses. The standard sequences in the game are 8 inputs long and use up to 7 different buttons. Needless to say, no one wanted to try 2 097 152 different combinations, hence why players tried to make sense of some of the remaining mysteries in the game.

After a few days of unsuccessful attempts at breaking the code, the community realized that joining hands and brute-forcing the sequences together was a viable alternative. Fortunately a player who had found the solution started dropping hints to dramatically reduce the set of possible solutions to a more manageable 78 125 combinations  (the sequence was 7-inputs long for example and only used 5 inputs). Some people created a shared spreadsheet on Google Docs to split the work of trying the thousands of sequences, I went a different way.

Ars Technica wrote a good article about the whole thing with more details.

Rails, Heroku and Bootstrap: a success story

I was not too fond of the spreadsheet, not because it was a bad idea, but it just seemed a crude way of splitting the work even though it was practical and easy to set-up. On Tuesday evening (the 17th) I decided I would build a web application that would present visitors 10 sequences to try, they could then report their results, either the solution was found or not. The user would then be presented 10 more sequences to try and so on until the solution was found.

To generate the sequences in an optimal order I used a De Bruijn sequence algorithm (thanks to Peter Taylor for telling me about it).

A De Bruijn sequence [...] is a cyclic sequence of a given alphabet A with size k for which every possible subsequence of length n in A appears as a sequence of consecutive characters exactly once.

This was perfect for the problem at hand since the sequences could be entered in any order, only the last 7 button presses were checked to see if the sequence was right. So for every 10 sequences displayed to a user, only 19 button presses had to be entered.

No more than a couple hours were needed to build a rudimentary version of the app. I unit tested the basic algorithms to make sure they behaved correctly and launched the app on heroku only a few hours after I had started working on it. I then shared the link (fez-monolith.heroku.com) on a Gamefaqs thread where some players had gathered to work on the puzzle.

Trolls, false positives and false negatives

As soon as the app went live I was already working on the next version where people could confirm or deny sequences marked as being right. This turned out to be very important because trolls were already trying to negate the work of others by entering false information like marking untested sequences as invalid or marking invalid sequences right.

The solution for false positives was quite easy, people could just confirm or deny them, they would then disappear from the list of potential solutions. However, false negatives were harder to detect, the only way was to have more than one person try each sequence. Unfortunately for the community, the correct sequence was marked as invalid relatively early in the life of the app.

Causes of false negatives and why mysql != postgresql

Each false negative was the result of one of these 3 problems:

• trolls purposefully marking any sequence as being invalid
• users not inputting the sequences correctly
• my lack of experience with postgresql

Postgresql? To understand, take a look at the following code used to retrieve 10 supposedly consecutive sequences (which had been created in order in the database):

# Get a random set of X consecutive sequences
@sequences = Sequence.where("id >= ?", random_sequence_id).limit(nb_sequences)

What’s wrong? There’s no ordering in the retrieval of the sequences. On my development machine this wasn’t a problem because I was using MySQL which was returning the sequences in the expected order. Postgresql on the other hand, which was required on Heroku did not always return the sequences in order. This probably caused some users to input the sequences using the suggested method (the first sequence fully then only the last input of each following sequence). Someone reported the issue that I could only fix much later in the day after my normal day job. This was entirely my fault for not knowing that a SQL query is non-deterministic without and order by clause.

Some stats and conclusion

Time between when the app went live to when the solution was found: ~18h

Number of contributors: more than 1300

Number of trolls: 123 people found a correct sequence, 20 of them found quite a few

Number of tested sequences: 66227/78125 (84.771%)

Number of false positives: 515

The solution had been marked as negative about 5 hours after the app went live either by someone trying to ruin the efforts of the others, because of an error from the player inputting the sequence of due to an error in the code.

Overall I am very satisfied of the project, it was shared by many on Twitter and on various forums as well as on Kotaku. I managed to set-up a very useful application in a matter of hours using Rails, Heroku and Bootstrap. The current website will remain live as I see no reason to take it down, I have put it in a frozen state to preserve its state at the time the sequence was found.

The code of the app is available on GitHub.

Gomez with the completed heart

So here’s a list of key points to look out for and ways to improve each of them.

Communication

At one point or another, developers will have questions that need answering by another developer or by a management person. The goal is to enable the discussion to happen without interrupting anyone. There are several communication channels available in a work environment and each one has benefits and disadvantages. The developers should have access to each channel which are emails, instant messaging, group discussions, audio conversations (phone or Skype) and face-to-face interactions.

Phone calls and face-to-face interactions should be used only for emergencies or when the receiver is not responding. Make sure to create a culture where emails and instant messages are answered in a timely manner (a couple hours at most for emails, under an hour for instant messages). If the person did not hear back after a reasonable amount of time, he will escalate the issue and use more direct approaches that might disrupt the creative flow of the other person.

In order to facilitate communications, make sure each member of your team can use the email client of its choice (I’m in love with Gmail for its threaded conversations, but being able to choose between Gmail, Thunderbird, Outlook, etc. is better). Give them a way to send instant messages to each other or have group discussions (Gmail does both, HipChat and Campfire do them better, my vote goes to HipChat for its user experience).

Finally, once you have the right tools, make sure everyone in the team understands the importance of communication and that the junior members know who to contact when they’re having issues.

Make projects fun to work on

Not all projects are as interesting as others. There are, however, ways of making a boring project more interesting. It might be an interesting challenge, the opportunity to try a new technology or a new way of doing things. Developers work a lot more on projects they find interesting or meaningful so make sure there are incentives other than money on projects and make sure the developers understand the reason behind doing a project. There’s nothing worse than working on a project you think is useless.

Don’t leave broken windows unrepaired

Consider a building with a few broken windows. If the windows are not repaired, the tendency is for vandals to break a few more windows. Eventually, they may even break into the building, and if it’s unoccupied, perhaps become squatters or light fires inside.

source

[...] one unrepaired broken window is a signal that no one cares, and so breaking more windows costs nothing.

source

An aging code base is usually full of broken windows and so are the various processes in place. Broken windows can take many forms, they can be a bug that no one took the time to fix, they can be a broken build in the source control, they can be a process that is prone to errors, etc. Do not leave known bugs unattended, build a culture where breaking the build is unacceptable (even though it will happen from time to time, make sure the developer feels guilty about it), automate as many parts of processes as possible and reduce the possibility for errors.

Finding a broken window kills the motivation of the team and reduces the quality of the work. Once people start finding bugs left all over the place, they won’t bother fixing their own little bugs-that-should-never-happen (but happen all the time in production).

Reduce friction

In the same vein as the broken windows, friction points are annoying and make the work less enjoyable. Friction points can be code without enough comments or features with little or no documentation, making it difficult to change or work with a piece of code. It can be a process that is run often but that is not yet automated. It can be timesheets or timekeeping tasks. The goal is not to remove the task causing the friction, but to make it as easy as possible to accomplish. Time keeping is useful, but taking half an hour on Friday to fill it is not. There are other ways to keep track of time spent working on projects, use them (most project management applications, Freckle, Toggl, etc.).

Provide your team with the appropriate tools and equipment

Give that developer the second screen he asks for, buy that new programmer a decent computer, don’t sweat for the purchase of $50 worth of software. A couple hundred dollars worth of purchases could help individual developers and team improve their productivity which will more than cover the expense. Give them the tools and resources that will make them as efficient as possible. Give them access to a decent source control option (decentralized version control systems such as Git and Mercurial will change the way you develop), please get away from source safe or team foundation server. Provide them a way to track tasks and projects (and have your project manager track them and ensure the work is getting done at a reasonable pace).

Finally, give them quiet working conditions with as little distractions as possible, a large desk with a decent chair to sit on and let them choose the rest of their equipment (keyboard, mouse, headset, etc.), developers are picky. They should be able to focus on their work without being interrupted.

37signals and Fog Creek (read both Bionic Office and The new Fog Creek office) have both created amazing work environments and as a result, they can hire the best developers and each company are extremely successful.

Things I learned

Token generation

I wanted people to be able to generate semi-private surveys without bothering with registration and authentication. So the surveys are semi-private because anyone with the URL can access the survey and answer it, but the URLs are not guessable because I developed a token generator that generates a random string of characters. This is in no way something new, but I’m glad I learned how to implement it.

Stupid authentication

A big annoyance of mine when it comes to creating a new project is that I don’t want to deal with authentication. I’d rather build a whole project and then plug in some authentication mechanism once the rest of the application is solid. However, a lot of my projects require user accounts to be useful. With this project, I only needed admin access for myself in order to do some cleanup from time to time. So for this implementation, the username and password are hardcoded in the application itself (the password is hashed just to be sure).

Front-end development with Ruby on Rails and MVC

I learned a lot about front-end development with Ruby on Rails, it’s not always intuitive but overall it’s a pretty straightforward process. I learned how to make use of partials and yields to keep true to the DRY principle as much as possible. I was also new to the whole MVC thing, I didn’t have to chance to try it at work with ASP.NET, and was pleasantly surprised with the simplicity and how much easier it is to use (in comparison with ASP.NET WebForms).

Heroku

Heroku is great for hosting small projects (probably good for bigger project too, I just didn’t try it). It’s free if you need a single worker thread and a small database (my case) and is extremely easy to set-up. I definitely recommend this if you want to try your hand at small Ruby on Rails projects.

IDE

For this project, I used Aptana Studio 3, it’s a decent IDE, but it’s definitely not as crisp and responsive as I would like. Coming from a .Net development environment, I’m used to working with IDEs, but I haven’t found a solid one for Windows yet. There were a couple that looked promising, but I didn’t want to spend money as I don’t develop with Ruby on Rails very often. I’m thinking Notepad++ with a decent shell would be a decent alternative.

Wrap-up

Overall, I’m quite satisfied with how the project turned out, I had very little prior experience with Ruby on Rails, yet I managed to code a working, though incomplete, application in a dozen of hours. The biggest drawback for Ruby on Rails for me at the moment is the lack of a decent IDE on Windows and my lack of experience. Hopefully, as I get better with Rails, I’ll find a comfortable working environment and I’ll be able to churn out code without having to constantly look for documentation.

PS: Heroku seems to be having issue with my application, this is unfortunate as everything was working perfectly until a couple of weeks ago.

var oneYear = new TimeSpan(1, 0, 0, 0, 0, 0);
var threeMonths = new TimeSpan(0, 3, 0, 0, 0, 0);

Not exactly pretty isn’t it? With extension classes, this can now become:

var oneYear = 1.Years();
var threeMonths = 3.Months();

Much better.

I’m a strong believer into offering a developer friendly API when developing my own applications. Now that we have extension methods, I can bring the same level of quality to existing code. That’s why I created CSharpSharp.

What is it?

CSharpSharp is a collection of extension methods and other classes grouped together in order to improve the API of the core of C#. The above example is only one of many other improvements I’ve implemented into the CSharpSharp libraries. The library is still relatively small, but I have plenty of other features ready to be added. The library is free to use for any project. I also plan on opening the source code depending on the feedback and reception in the developer community.

For more information, visit the project page, you’ll also find a link to download the library (libraries actually, there’s one specific for the Web).

If you would like to contribute to the project, I’m not looking for developer contributions right now, but I’m open to suggestions regarding new features.

So instead of letting them sit on an ad page for GoDaddy that gives me absolutely no benefit, I created a simple “domains for sale” website (hosted on a subdomain on one of my existing domains, I’m crazy enough to buy another domain for that) and I forward each of them there (the subdomain in question is domainsforsale.mbillard.com). I created the website with Ruby on Rails, because I could create something simple quickly and because I could make use of the excellent heroku hosting which is free for websites with low performance requirements.

By simple, I mean simple

What really makes this work though is that each of the domains forward to this page with the name of the domain as a parameter (ex: …domainsforsale.mbillard.com/?domain=[domain name]). Combined with a Google Analytics profile, I can now track which domains are accessed and how often they are. This helps me know more about which domains might actually be worth something. Clearly stating that a domain is for sale also helps users looking to purchase one of those domains because the contact information is right there, users don’t have to go search in a whois databases.

If you have inactive domains that you would be willing to sell, there’s no reason not to do this.

Note: There’s also an administration section not shown here that I use for managing the domains (in case I sell or buy one).

For me, code usability is just as important for programmers as is usability of a UI. Less usability means less usage of your product/library which means less feedback and eventually less profit. But what can we do when we’re stuck with a bad library? One option is to look for alternatives, but sometimes there aren’t other viable options or they’re just as bad or worse. The solution? Wrap up the bad code inside your own component and make it easy to use.

I spent a few days writing a wrapper library that had the API that I wanted. Then I plugged the existing library inside of it and the result was a library with an API tailored to my needs (and my organization’s needs), that removed risks of errors, reduced code duplication, and really improved the quality of the applications we were building. Any bug could be fixed only once, in my library, and pushed simply by updating the library in the application. It’s also a lot more fun to use since I have hidden all the complexity and smoothed out the rough edges.

This isn’t anything new, if you want a great example of how much good wrapping up badly designed code can do, take a look at all the JavaScript libraries like jQuery. The creation of jQuery has enabled developers all over the world to create applications with powerful client-side behaviors faster and better than ever. jQuery let’s developers write less code with less bugs and faster than without it.

So if you ever find yourself stuck with a bad piece of software, wrap it up.

This is a really hot topic at my job. I believe that Cloud-based solutions can really benefit a small company, but sometimes I wonder if I’m being too naive. On the other side, I don’t think all the fears of having your data stolen are really founded and that most of the time, it’s just paranoia kicking in. Even if  the content was stolen, would it really be such a big deal most of the time? I will try to list the pros and cons of each option to help understand the issue. I do not aim to reach a conclusive decision, as I do not believe there’s a single right answer.

Using Cloud services

Putting your data online makes it vulnerable from two angles: the employees at the company hosting the content can access it easily or hackers can steal it directly by breaking through the defenses of the service provider. It does not matter if the hackers were aiming for your data or for someone else’s (for example, the recent Sourceforge attack), your data was compromised nonetheless. The security of your data is entirely in the hands of other people. The upside of using Cloud services is that you don’t have to manage the IT infrastructure required to handle whatever type of data you have. You don’t need to buy any hardware or to hire staff to keep it running and secure. For a small corporation, these two expenses are far from being negligible. Cloud services also often offer better options than self-hosted ones.

Using self-hosted solutions

Hosting your content yourself means that you’re in control, you know who accesses the data and you know how it’s managed. You only have to worry about your own employees (which I hope you trust more than any other employees) and from attacks directed straight at you. You don’t have to worry about Google being hacked, about BitBucket or GitHub leaking their users’ data, etc. The downside is, as stated above, that you need to purchase the infrastructure yourself and to hire the staff to maintain it. Furthermore, the security is unlikely to be stronger than what the service providers offer unless you truly invest in security yourself. As this article about Cloud security puts it:

[...] Cloud-based solution vendors not only have the latest technology, the latest firewalls, the best datacenters and the highest levels of redundancy possible but they will apply multiple layers of defense in-depth that your average business (a Fortune 500 company may be an exception) can never have.

I am personally sold to Cloud-based solutions, the simplicity of use, the relatively low-cost and the debatable higher security makes it an easy decision for me. I’m not suggesting that jumping in the first service provider that offers a valuable service is a good idea; I think that learning more about the company hosting your content is a necessary precaution, but if other companies are using it, are satisfied with it and there are no horror stories about the vendor, consider me sold.

In his question, he mentioned that he wanted to write the company to tell them about the unfairness of the questions. Fortunately, the Programmers community responded well and told him that this was not the right thing to do, however a few people did agree with him. Since he might not be the only one feeling that way, I decided to write a few (non-technical) things that every programmer should know when applying for a programming job.

You don’t have to answer all the questions

It’s a common trick by interviewers to ask a question that the candidate will not be able to answer. Sometimes it’s some kind of annoying “MBA” question like “Why are manhole covers round?” (here’s the answer if you really want to know), but sometimes it’s just a highly technical question that you are not expected to be able to answer. What the interviewers want to know is how you deal with problems that you don’t have the answer for, because that’s going to happen a lot in the work environment. If you get one of these questions, walk them through your thought process, tell them how you would find the information (ask a specialist, a colleague, on Stack Overflow, etc.). Sometimes they might want you to guess how many of one thing there is in a certain region (ex: how many gyms in New York). They want to know how good you are at estimating values, because you don’t always have time to go find the information and a rough estimate might be sufficient. I dislike this kind of question, but you should be prepared to answer it nonetheless.

No matter what the question is, just answer to the best of your knowledge. If the question is out of your field of expertise (front-end, back-end, databases, algorithms, etc.), maybe they need someone able to work in multiple fields, or maybe they are just testing you. Just don’t complain to them about it or you just lost all hope of getting that job; they’d rather hire someone that will try to find the solution than someone who will complain about the problem.

The interview goes both ways

If you’re a decently skilled candidate, chances are that companies will be in competition with each other to get you. Many companies get it and offer great working conditions and plenty of incentives to try to convince you that they are the place where you want to work; those companies get the highly competent and motivated programmers. However, many others don’t understand that and just want to fill positions; those companies get the unmotivated programmers who just want a salary.

So when you’re in an interview, you should ask them about the working conditions: what kind of machine you’ll be working with, which tools (source control, bug/task tracking, communications, etc.), is there a dress-code, will you work in a cubicle alone all-day or can you talk to your coworkers, … They need to provide you with a good work environment so that you can do your best job. You’re going to be there for half of your day, 5 days a week for a long time, you better make sure you’re gonna enjoy the time spent there.

Never talk about the salary first

This one’s pretty obvious, but never mention it first even if they haven’t talked about it and they ask you if you have any questions for them. Use those questions to ask about the work environment or what a typical day at work will look like. Asking about the pay means one thing to them: you’re in it for the money, not because you love the job. Also, when they do ask you about how much money you want, give them a range or a baseline (ex: I had X at my previous job, so I expect at least X or from my research people doing this job receive between Y and Z, so I’d expect something in that range). Let them come up with a number.

Practice makes perfect

Like most (all?) things, practicing helps you get better. If you’re not confident in your interviewing skills, set up some interviews with companies that don’t interest you all that much. You won’t have as much pressure to get the job and it will help boost your confidence.

That’s all I got for now, good luck!

A style guide can help:

• A group of developers produce consistent looking user interfaces
• Bringing in new developers that much faster without having to mentor them as much
• Developers focus on content rather than thinking about how to display the information

What’s in a style guide

Fonts

Which fonts (or preferably font stacks) to use in which situations. Headers, sub-headers, text, notifications, etc. should all be mentioned. The list of fonts should be complete and no other fonts should be used without adding it to the style guide first.

Colors

What colors can be used and in which situations once again. Just as with fonts, the list should be complete.

How to display the different UI elements

Hhow should error messages be displayed? how about the notifications, instructions, tables, links, all headers, etc. Don’t hesitate to specify how each element can be displayed with minimal input from the developer (by using reusable components or partial views or whatever mechanism your web framework supports). You could even specify the styling that should be used or better yet, simply the CSS class.

Images

Which images should be used and when. If I need an image that isn’t provided yet, where do I find more from the same pack (and the new ones should be added to the style guide). How screenshots or other images should be included in the design. When should a thumbnail be used, what are the maximum dimensions and file size, etc.

Of course, a lot more can be included in the style guide, the goal is to leave as little room for thinking as possible. The style guide is a living document and can be modified to accommodate a new situation, but this should be a rare occurrence and big deal.

How to create a style guide

The style guide should be the responsibility of the UI lead (or a group of leads). He’s in charge of the design direction for the project so he should be the one putting the constraints. If someone disagrees with the style guide, the lead should know about it and a revision to the style guide should be considered. If it’s simply a case of a missing design specification, it can easily be added to the style guide.

There are a number of ways of creating a style guide, some use images, some use only a wiki-like text guide, but the most useful and accurate style guides will be coded in HTML and use the same stylesheet(s) as the project. The guide should be very visual, with at least one example for each situation. Headers should look like headers in the project and the same colors, fonts and images should be used. The style guide should be consistent with the UI and look like a page from the website being built. Don’t be scared of adding code snippets (CSS or HTML), it will make everyone’s job later much more simple.

Multiple style guides can be used, but they should never overlap each other, otherwise they risk contradicting each other and you will forget to update both. They should share the same stylesheets (the secondary guides can use specific stylesheets just for them). However, keep in mind that the less style guides you have, the easier it is to follow them.

So, next time you embark on a new project, make sure to create a style guide or ask for one to be created for you.

Today, I will discuss about an important decision in the life of a web application developer, choosing a web development framework. It is important to note that choosing a framework is more about finding one that you’re comfortable with rather than finding the best. All the popular ones are good in their own way and are used to run all sorts of web apps.

Thoughts on choosing the right web framework

Disclaimer: I haven’t developed with all of the frameworks in existence so I’ll just be giving my general impressions based on my research and understanding of the frameworks. If you disagree with anything, please leave a comment so that everyone can benefit from your experience and knowledge.

The frameworks

In my previous post, I mentioned 4 main frameworks (ignoring the multitude of PHP frameworks) and I forgot an important one: JSP (edit: actually not a framework, Struts would be a  popular Java framework). I’m very unfamiliar with it so I won’t talk about it, just know that it is based on Java and that it exists.

ASP.NET

Microsoft’s flavor is a pretty solid, although costly, option. By using ASP.NET, you’ll be working with the very powerful C# language (or VB.NET if you prefer). The IDE of choice, Visual Studio, is one of the best code editors out there, but you’ll have to shell out quit a bit of money if you want to use the more powerful features of the professional versions. Without surprise, you’ll have to work in Windows and ASP.NET works best with the rest of the Microsoft stack, namely Microsoft SQL Server and IIS, both of which will take a hefty toll on your wallet. At the finish line, you end up with a reliable set of tools on which you can build a powerful and stable application.

There are two main ways of developing web applications with ASP.NET, you have the choice of using the tried and true WebForms or the newer MVC architecture based on RESTful principles (which is often the norm in the newer frameworks). If you are just starting web development I suggest that you go straight to MVC.

If the costs of developing with ASP.NET scare you, don’t worry, Microsoft’s BizSpark program can help you. You can also take a look at the Mono project, an open-source .NET development framework.

Mono is a software platform designed to allow developers to easily create cross platform applications. Sponsored by Novell (http://www.novell.com/), Mono is an open source implementation of Microsoft’s .NET Framework based on the ECMA standards for C# and the Common Language Runtime. A growing family of solutions and an active and enthusiastic contributing community is helping position Mono to become the leading choice for development of Linux applications.

PHP

PHP is without a doubt the most popular programming language for the web. All web hosting companies support it and there’s a ton of resources and tutorials available online. However, many people stay away from PHP because the language has been a mess for a long time, only recently receiving some much needed attention to its internal structure. Fortunately, there are plenty of frameworks available that hide most of the horrors of PHP. The most popular ones are CodeIgniter, Kohana, CakePHP, symfony, Zend framework, etc. I am not familiar with them, but if you’re interested in knowing more, I suggest that you read this discussion on StackOverflow about choosing a PHP framework. Most of the PHP frameworks use the MVC architecture and adheres to the RESTful principles.

Python/Django

A powerful combination and, unlike PHP, there’s no question about which framework to use, your only option is Django. If you’re in love with Python, there’s no doubt that this duo is for you, Django is a popular option and a solid offering once again. Furthermore, Python lovers benefit from a wonderful hosting option in Google’s App Engine which offers cheap hosting (free until certain very large limits are reached). Needless to say, with Google’s support behind Python, it’s hard to go wrong with this option. Once again, this framework follows the RESTful concepts.

Ruby on Rails

Finally, the last contender in our list, Ruby on Rails. Rails abstracts a lot of the implementation work by providing a large array of generators (a common sight in other frameworks) and by simplifying the database work a lot by making heaving use of the ActiveRecord pattern. People tend to either love or hate this combination (Ruby is a scripting language) mostly because it seems to rely on “magic” in the sense that a lot of things happen behind the scenes without the developer knowing it. For example, Rails makes use of a pluralizer so that if you have a class name Person, you can access the instances by calling the People class. It’s all based on logic, but you have to trust Rails and some people just want to be in control of everything. Overall, Ruby on Rails is also a powerful and solid framework with a huge community behind it. Many people also consider it the fastest framework to develop with, taking you from the conception of an idea to an actual working app faster than any other framework. Rails favors MVC applications following the RESTful guidelines.

Still confused?

I’ve tried my best to describe the particularities of each framework, I strongly encourage you to do your own research. Always keep in mind that there’s no wrong answer, they’re all capable of helping you build your web application. Keep in mind that this list is far from being a complete list, here’s a more exhaustive list of web development frameworks.

Once you’ve chosen your framework, check the tutorials on their respective homepage and try them. As with anything new, you’ll only become proficient with the tools after having used them a lot.