Structure your code!

In the past, I've seen many cool project but their management of files were horrible. Whenever you needed a file, you had to search hours to find them. Also, many of them had just one huge file with thousands of lines of code in it. So here's my very easy structure way!

Directory management

I keep my folders always the same way. In the development phase, it looks like this:

-/root
 -/assets
   -image.png
   -image2.png
 -/css
   -framework.css
 -/js
   -/libs
     -framework.js
     -jquery.js
   -/core
     -init.js
     -functions.js
   -/home
     -moreinfo.js
     -imagegallery.js
   -/contact
     -ajaxsend.js
     -formcheck.js
 -/less
  -base.less
  -home.less
  -contact.less
 -index.html
 -contact.html

But after I compiled everything and it's ready for distribution, it looks like this:

-/root
 -/assets
   -image.png
   -image2.png
 -/css
   -style.min.css (compiled less files)
   -framework.min.css
 -/js
   -framework.min.js
   -jquery.min.js
   -scripts.min.js (compiled JS files)
 -index.html
 -contact.html

The code management

Like you have seen above, I don't have one huge JavaScript file where all code gets put in, I have multiple files. To prevent the code getting messy with dozens of functions, I code like this:

init.js:

  1. var defines = { // Important variables that never change
  2. max_animation_time: "1s",
  3. ajax_form_url: "ajax.php"
  4. };
  5.  
  6. var vars = { // Variables that get used everywhere and may change
  7. current_user_id: 4572,
  8. current_user_name: "Joe"
  9. };
  10.  
  11. // Prepare all objects
  12. var home = {};
  13. var contact = {};

The last two objects (home and contact) will be used in the corresponding files, like home/moreinfo.js:

  1. home.moreinfo = function() {
  2. alert("This is a bit more information");
  3. };

They can go even deeper, like in home/imagegallery.js:

  1. home.imagegallery = {}; // prepare object
  2.  
  3. home.imagegallery.init = function(images) {
  4. $(images).each(function(i){
  5. $("#images .container").append("</img>").attr("src", images[i].file);
  6. });
  7. };

Some small tips

These things are also important.

  • Use comments, especially in bigger projects or in team projects
  • Write readable code
  • Don't delete source files (like less files or unminified JS files)
  • Make backups

I think you should be good-to-go now and be able to write nice, organized code!



Code

Create Responsive Websites Like A Pro

Nowadays, it's really important that your website looks good on mobile devices. But how should you proceed there? Let me present you my way doing so:

Step 1: Get a framework!

You could either create typography, grid systems, image classes, responsiveness and more, but there are tons of frameworks that can handle that:

  • Bootstrap: probably the most famous one. Created by Twitter, it brings everything what you need. The community is big and the documentation is great. There are also tons of plugins for it.
  • Pure: If Bootstrap is too big for you, give Pure a try. It's developed by Yahoo! and has everything basic. The biggest advantage is the very small filesize.
  • W3.CSS: Built by the World Wide Web Consortium, it is a basic CSS-only framework. No jQuery, no JavaScript.
  • jQuery Mobile: If you only want to create a website for mobile users or a HTML5 app, you could also use jQuery Mobile. It is made for phones and tablets. Compared to the other two frameworks, jQuery Mobile is a giant with tons and tons of features that can be a bit confusing at the beginning.

My last article was about Material Design frameworks, maybe you also want to give those a try? Read it here.

Step 2: The code

Here are some points very important.

  • The text must be readable on whatever resolution, so avoid fontsizes in px and rather use em.
  • Make sure your images are fitting nicely. Most frameworks provide responsive utilites for images.
  • Improve your loadtime! Shrink code, avoid big images and don't preload videos.
  • Don't use Flash. Well, never use it.
  • Use the viewport tag:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  • Add a favicon and a Chrome tab color.
  • Don't let your website be too long.

Step 3: Testing!

You can test your site with various services like Mobiletest.me which you might know from my article "9 cool web development tools". But most browsers have a developer mode, which also has a function to test screen sizes. In most browsers, you can open it with Ctrl + Shift + I.

But nothing keeps you away from testing on a real device. On your computer, you have the feature called "Inspector", that lets you inspect every element of the website, as well as the JavaScript console, the network inspector and much more. But what's on the mobile side?
There's a tool called Weinre that runs on Node.js. You just have to include a JavaScript file in your code and have easy access to those tools on your computer so you can remotely debug your website.

 

That's it! You should now have the basic knowledge on how to quickly create a good responsive website.



Code

With Android Lollipop, Google released it's unique Material Design which I personally like a lot. I changed my website design to it just recently. But there are tons of Material Design for HTML out there! Which one should you choose?

Best Material Design framework for HTML

Bootswatch Paper

If your website runs with Bootstrap or you'd like to create a website with Bootstrap, I'd recommend Bootswatch Paper. It's really easy to add it to your existing Bootstrap website, because you just have to change the Bootstrap CSS file. It does not feature the best material look and feel, but because of it's simplicity it's great. Also, because it runs on Bootstrap, you have all of the Bootstrap features, including modals, navbars, rows, buttons, form elements, tooltips and many more.

Bootswatch Paper

Materialize CSS

Materialize has a bit better look and fell. The CSS classes feels like they copied many things by Bootstrap, but that's okay, it makes it easier to learn. Also, they brought in many cool ideas like Parallax, that lets the background image scroll slower than the rest of the site or build-in image viewers, which is just awesome. But there is just one big downside: the documentation. The documentation is not very well sorted. A good example is this: I want to know how to create a navbar. Where am I looking? Probably in the Components directory. But it's not, it's in the JavaScript section. Why the heck is this in the JavaScript section?! Also, many code examples just don't work! But maybe I'm just too picky...

Materialize CSS

Material Design Lite

This framework is a bit like Materialize. It is made by Google and looks a bit tidier and more "professional" than Materialize. It has tons of components that are well documented. Also, it has much more animations and they are nearly the same as on Android. Obviously, because Google uses it in almost every modern web based project.

Material Design Lite

With those three frameworks, you should have a good selection. Of course, there are many more out there, but that are the frameworks I worked with and I personally like.



Code

Today, it's about the best web development IDE, and first of - there is no best! There's just a best for YOU! So let's find out which of the three most popular ones might be the best for you.
The best web development IDE
View full article



Code

Hello,
I'm stopping the development of Spotify Charts here. Spotify changed the API again and removed a lot of featutes. Also, Google Play & YouTube both has chart sections.
For me there is no more reason for developing the app.



Uncategorized

Newsletter

Subscribe to my newsletter and stay tuned.


Donate

Enjoy this blog? Awesome! If you feel generous, I’d appreciate a small tip. Thanks!

Donate with PayPal