Things should be made as simple as possible, but not any simpler.

In the spirit of revising the programming basics, I decided to look into this topic today.

Over the years, there have been so many arguments on Laravel and Rails. Which is better? Which is more difficult to learn? and so on.

My Research began…

As a young man aspiring to be a super web developer, who also wants to learn a ‘power’ framework (most importantly, a framework that can get work done and fast too), I started my research by asking some seniors…

 – Google: Which framework is better?

– Otemuyiwa: Which is more powerful (since both are)?

– Mackenzie: Which do you recommend?

– Omeiza: What do you look out for in a framework?

– Oluwasegun: Are these two the only powerhouse of web frameworks?

– Ifeoluwa: Why should I use them?

And many other senior men (and women) out there, I doff my hat dab for you o.

After all these questions, I started my own investigation, which involved:

• working with each framework and noting the differences and similarities;
• building simple and pretty complex apps (which I’m too lazy to publish).

I came to realize that neither of the frameworks is bad.  Better yet, both frameworks are awesome and unique in their own way.

So here’s what I’m going to do:  I will list out the similarities and differences (respectively) that I came across with while working with each framework.

Introduction to Laravel and Ruby on Rails

Hold on a sec… before I proceed, I would like to give a brief intro to both frameworks.

If you like to know more get their books!

1. Laravel

Laravel is a web application framework with expressive, elegant syntax. It is a PHP framework created and released in June 2011, by Mr. Taylor Otwell.

Click here to start your own Laravel journey.

2. Ruby on Rails

David Heinemeier Hansson, I love to call him DHH, created Rails from his work on the project management tool – Basecamp, at the web application company also called Basecamp. It’s a Ruby framework, the first release in June 2004, gained popularity around 2005. It caught the attention of Jack Dorsey of Twitter.

Click here to enter the world of Rails.

Similarities between Laravel and Ruby on Rails

1. They are both OOP-based frameworks.
2. They both follow the MVC software design pattern.
3. They are both open-source.
4. They both came from scripting language backgrounds (they don’t need a compiler to interpret their code base).
5. They both offer awesome features in terms of ORM (Object Relational Mapping) and app structure generally.
6. They both have an unbelievably awesome community support.
7. They both emphasize on the Don’t Repeat Yourself (DRY) principle.
8. Deployment: I don’t know about you, but to deploy both frameworks is hectic (at least for the first try).
9. They both have huge varieties of external components, Ruby – gem, while Laravel – composer.

Differences between Laravel and Ruby on Rails

1. The programming languages differ. Rails is from Ruby while Laravel is from PHP.
2. Their syntax is different.
3. Laravel uses semicolon, but Rails doesn’t.
4. Rails doesn’t use any curly braces, but Laravel does.
5. The way rails declares its functions is totally different from Laravel.
6. Rails is not explicit enough; it assumes too much, but Laravel gives room for creativity. It allows developers to take charge (codebase)  – no scaffolding (I know that an experienced developer can bypass that).

NB: The aim of this article isn’t to stimulate more arguments but rather to bridge the gap between the two frameworks.

One other thing. Hmmmm… They are both cheap, so go out there and start learning.

I admit I’m no “know it all”, so leave a reply in the comment section below, with some of the obvious similarities/differences I may have missed out.

Thanks in advance!

The post Ruby on Rails vs. Laravel – Which is better? appeared first on CKDIGITAL.

A while ago, I was facing my worst nightmare for two straight days. It was no joke (I was even working on it in my sleep).

Below were the issues I was facing, that made me dig deeper into the topic:

1. Whenever I edited the config/app.php file, it did nothing. It was as if the file didn’t exist. Even when I temporarily deleted the file, everything still worked fine!
2. Route just was not responding to changes, even after adding new lines of code to the file.

Laravel 5 Artisan optimization – A brief introduction…

If you’re a bit familiar with Laravel, you’d know that Laravel optimization doesn’t really need much introduction as it is self-explanatory:

Laravel comes with a set of artisan commands that optimize the framework for better performance.

This article explains what the commands actually do and where the cache files are stored.

These are the commands that we will be focusing on:

• php artisan optimize
• php artisan config:cache
• php artisan route:cache

The optimization files generated by artisan optimization are stored in the bootstrap/cache/ directory.

1. php artisan optimize

php artisan optimize creates a compiled file of commonly used classes in other to reduce the amount of files that must be included on each request.

After running the command, all commonly used classes are compiled and then saved to this file directory: bootstrap/cache/compiled.php.

You can specify additional classes to be included by adding them to config/compile.php.

The compiled file is only created in production stage, not unless this attribute is added –force (that is, php artisan optimize –force).

2. php artisan config:cache

php artisan config:cache combines all configuration (config) files into one file for quick loading.

This cache file is stored in bootstrap/cache/config.php

Use php artisan config:clear to undo the command.

3. php artisan route:cache

php artisan route:cache creates a cache file located in the Bootstrap/cache/routes directory for faster loading. It basically registers all routes for easy access.

After running the above command, the app will use the cached file instead of the original route.php file.

Use php artisan route:clear to delete the cache files.

In addition to the commands mentioned above, here is one I’d like to add:

4. php artisan view:clear

This command is used to clear all view (resource/view/) cached files which are generated whenever php artisan optimize command is executed.

The cached files are stored in the vendor/ directory by default, if the directory is writable. If not, it’s stored in the storage/framework/ directory.

Thanks for reading thus far! I do hope you’ve found this useful.

As for those nightmares of mine, I was able to fix them after understanding how these commands work.

The post Laravel 5 Artisan Optimization Commands appeared first on CKDIGITAL.

Filtering

As the name suggest this refers to narrowing down the search for elements. We will go over 6 of the most common types.
Let’s start with the what we may refer to as  ‘index-related selectors’:

(:eq(), :lt(), :gt(), :even, :odd)

To use a filter, you add a colon followed by the filter’s name after the main selector.

e.g   $('.main-class:even');

:eq()

Selects the element at index n within the matched set. It is used to select a single element that is returned from a collection or array of elements that match a specified selector .
For example if elements are first selected with a specific class and more than one elements are returned as in the case below:

var p = $('.demo');

How do we filter from the selection and get only the second paragraph?

Note that what is returned is an array and Javascript uses 0-based indexing, i.e the first element in an array is at index zero.

So clearly the second paragraph will be at index 1. To select it directly we simply do this:

$('.demo:eq(1)');

Similarly for the first: $('.demo:eq(0)');

For the third: $('.demo:eq(2)'); and so on

:gt()

Selects all elements at an index greater than n within the matched set.
It is important to take note of the difference between this and :eq() from the description. :eq() returns only a single selection whereas :gt() returns more than one. It returns all elements from a selection that is greater than an index you specify.
For example to select the last two paragraphs, we simply make use of the 0-based indexing we saw earlier.
We have 5 elements with the same class, that makes the last two paragraphs number 4 and 5. But because of Javascript indexing they will end up at index 3 and 4 respectively.

$(‘.myclass:gt(2)’); – this says select all elements with a class of ‘.myclass’ but return only those which index is greater than 2.

:lt()

Select all elements at an index less than n within the matched set.
This is similar to :gt() except in the opposite sense.

:even()

Selects even elements from a matched set.
Quite counter-intuitively, :even selects the first element, third element, and so on within the matched set as a result of zero based indexing.
So given an array like below:

0      1       2      3      4     – index positions
[‘p1‘, ‘p2‘, ‘p3‘, ‘p4‘, ‘p5‘]

$('.myclass:even');  – selects the second(index 1), third(index 3) and fifth paragraph(index 5).

The opposite is the case for :odd.

:first and :last

The :first pseudo-class is equivalent to :eq( 0 ). It could also be written as :lt( 1 ). This matches only a single element.

$('.myclass:first');  – will select only the first p tag in the HTML snippet above.

:last – Selects the last matched element. It also selects a single element by filtering the current jQuery collection and matching the last element within it.

$('.myclass:last'); – will select the last p tag.

For more details visit jQuery’s official documentation at http://api.jquery.com/category/selectors/basic-filter-selectors/, http://api.jquery.com/category/selectors/child-filter-selectors/, http://api.jquery.com/category/selectors/content-filter-selector/.

Traversing

prev() and next():

These are used to select elements that come directly after or before another element int the same level in the DOM tree, i.e elements which are siblings to one another.

<p>, <h2> and <ul> are siblings in the HTML snippet above. They are the direct children of the div tag.

If we select the <h2> tag, we can easily move a step upwards or a step downwards to get to its two siblings.

From h2, to move upwards to p we make use of .prev().

$('h2').prev();   – returns the p tag.

From h2, to move downwards to ul, we make use of .next().

$('h2').next();   – returns ul.

Its really that simple.

.parent()

Selects the immediate parent or ancestor of a selection. This method only traverse a single level up the DOM tree.

From our example, <li> has three parents: <ul> which is it’s direct parent and <div> which is it’s grandparent and <main> it’s great grandparent

So to get the immediate parent of <li>:

$('li').parent(); returns <ul>.

To get all it’s parents, both direct and grand and great grand etc we use:

$('li').parents(); returns <ul> and <div> and <main>. This method traverse all the way up to the first ancestor or parent.

To get some parents or ancestors but excluding some up the chain, we use: .parentsUntil(”).

This takes a selector from which to start exclusion.

So to select only the <div> and <ul> parents of the <li> element, we can do:

$('li').parentsUntil('main'); – selects all the parents but exits and skips <main>

.children()

Get the children of each element in the set of matched elements, filtered optionally by a selector. This method only traverse a single level down the DOM tree i.e it does not return grandchildren, great-grandchildren etc.

For example using this method to find the children of the div

$(‘div’).children();   – will return only <p>, <h2> and <ul> not including <li>

.find()

This method searches for descendant elements that match the specified selector. It traverses downwards along descendants or children of DOM elements, all the way down to the last descendant or child.

For example we can select the <h2> element by using find like so:

$(‘div’).find(‘h2’);

For more details visit jQuery’s official documentation at https://api.jquery.com/category/traversing/

The post Getting Started With jQuery (For Absolute Beginners) – Part IV appeared first on CKDIGITAL.

jQuery offers a very powerful technique for selecting and working on a collection of elements—CSS selectors. At this this point you must already be familiar with CSS selectors.

You can use practically all css selectors.

The basic syntax for selecting an element or tag you wish to perform some manipulation with in jQuery is:

$('selector');

Basic Selectors

ID Selectors

Supposing we have the following HTML structure:

In CSS to select the <p> element with an id of ‘message’, you do something like:

#lesson3 {}

Well for jQuery, from the basic syntax from above you do this:

$('#lesson3');

The pound sign (#) must precede the id name.

So for example to change the color of the p tag, you’d do something like this

$('#lesson3').css({'color', 'red'});

Element Selectors

Similarly you can select element by tag name in jQuery just as in css.

In CSS to select the <a> or <h1> element, you’d simply do:

a {} or h1{}.

To achieve the same in jQuery, you’d do the following:

$(‘a’) or $(‘h1’);

So for example, to change the link text:

$('a').text('www.facebook.com');

Class Selectors

Suppose we have the following HTML structure

In CSS to select the <p> element with an class of ‘lorem’, you do something like:

.lorem {}

Well in the case of jQuery, from the basic syntax from above you do this:

$('.lorem');

The dot sign (.) must precede the class name.

So for example to set the display property of the p tag to none, you’d do something like this:

$('.lorem').hide();

Advanced Selectors

Descendant selectors

A lot of times in CSS, for one reason or the other you cannot simply select a single element. You have to select several elements before you get to the specific element you wish to style. For example:

Suppose we have the following HTML structure:

Now, how do we go about selecting the <li> tags in CSS?

There are several ways to achieve this but I’d pick one.

.child-div ul li {}

To translate this selection in jQuery is similar:

$('.child-div ul li');

This is known as the descendant selectors. Since it would be difficult to select the li element by itself, you look for its nearest parent and start moving downwards till you get the li tag. The element you wish to select must come last.

Note: do not abuse this method by first selecting 5, 10 parents etc. At most you don’t want to use more than two.

Child selectors

These are used to select a tag that is a direct child of another tag. A child tag is the direct descendant of another tag.

From the HTML structure above, how do we target the first h1 tag?

In css you might be tempted to do this:

.main-div h1 {}

Sorry, this won’t get the job done!

Why? Because since we selected h1 from it’s parent .main-div, all h1 that are children of .main-div will be selected including the last h1. Indeed the last h1 is a child although more precisely a grand-child, .child-div is simply it’s most immediate parent or ancestor.

To target the first h1 accurately you do the following:

.main-div > h1 {}

The greater than symbol (>) indicates that the element on the right is a direct child, not grand-child or great-grand-child of the element on the left.

So to translate this to jQuery, you’d do the following:

$('.main-div > h1');

Adjacent Sibling

Selectors let you select a tag that appears directly after another tag. The easiest way to understand this is to think about the relationship of siblings i.e brothers or sisters having the same immediate parent or ancestor.

Looking at the HTML structure above, can you identify elements that are siblings?

Starting from the main parent div .main-div, you can easily see that it has 3 direct children

The first h1, p and div with a class of .child-div. This means that they are all siblings. But .child-div also has it’s own children, which are:

h1, a and p.

Now how can we select the p tag immediately after i.e adjacent the h1 tag?

Note: there is only one p tag in this case that is adjacent to a h1.

In CSS you’d select like so:

h1 + p {}

Similarly in jQuery you’d do this:

$('h1 + p');

To create an adjacent sibling selector, a plus sign (+) needs to be between two selectors (which can be any type of selector: IDs, classes, or elements). The selector on the right is the one to select, but only if it comes directly after the selector on the left.

Attribute selectors

If you are not already familiar with attributes in HTML, I’d quickly give examples.

<img src='' alt='a flower image'/>

<a href='' target='_blank' name=''></a>

<input type='text' value='' placeholder='' disabled='true'>

<p data-point=''></p> etc

I am sure by now you already have an idea of what an attribute is.

src, alt, target, name, href, placeholder, data-point etc are known as attributes.

jQuery lets you select elements based on whether the element has a particular attribute or attribute value.

For example you could target every <a> tag that have a particular href value or that open in a new window with target=’_blank’.

$('a[href]');,
$('a[href="www.google.com"]');,
$('a[target="blank"]');

To target an img with an alt attribute:

$('img[alt]');

or to select all img tags that have an alt of ‘a flower image:

$('img[alt="a flower image"]');

To select inputs of type text:

$('input[type="text"]');

This is just a basic introduction to jQuery selectors. Please visit this link for more information: http://api.jquery.com/category/selectors/

I hope you have been able to at least grasp the basic method of selecting elements in jQuery.

In our next lesson we will cover jQuery filters and traversal apis.

The post Getting Started With jQuery (For Absolute Beginners) – Part III appeared first on CKDIGITAL.

The previous lesson simply covered what jQuery is and how to add it to our webpages. We glossed over some important information for the sake of time and simplicity. In this tutorial we will cover them in some details.

CDN (Content Delivery Network)

This simply means another website hosting resources (e.g. images and files), thereby making them available for use to anyone who requests it. Because of its popularity, Google, Microsoft and also jQuery itself host it on their servers around the world. There are a couple of benefits. For example if someone in Australia visits your site, he’ll receive the jQuery file from a server that’s closer to him than your web server, which means he’ll get the file faster and your site will appear to load fast.

What this means for you is that you no longer have to download the jQuery file and add it to your folder but only have to add a link on your page to the CDN you want to use e.g if using Google’s CDN your script tag would look like this

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”> </script>

That’s all you need to do. But the flip side is that you and your visitors need to have an Internet connection for it to work.

COMPRESSED & UNCOMPRESSED

Also called Minified and Unminified. Usually when hosting your website you want all your files to be as small as possible so that your website will load quickly. What a compressed or minified jQuery file is, is a jQuery file which has been made as very small in bytes. This is achieved by removing all spaces and comments between codes making it almost impossible to read. That was what we saw on the webpage when we clicked the download link in the last lesson. A compressed file is usually referred to as Production-ready. Take a look at the jquery.js file you have. It is a compressed file.

An uncompressed jQuery file is one that has a lot of white space (e.g. tabs, line-breaks etc.) and comments to enable the developer read and understand the code. As a result they usually end up being quite large. Because it is meant for the developer to go through, it is referred to as the development version. So it should only be used during the development phase of your website if ever.

If you are not going to study it for educational purposes (and as a beginner you most likely wont), you do not ever need to use the uncompressed jQuery file.

You can easily know which is a compressed jQuery file. It has a “.min.js” suffix.

$(document).ready()

The $(document).ready() function is a jQuery function used to ensure that your code runs at the appropriate time. What it does is that it waits until the HTML of your page loads before running your code. A lot of what you want to do with JavaScript is to manipulate the contents of your webpage e.g. making an image slideshow, hide a section, change a div’s background etc. Well how do you do that if the html isn’t yet loaded on the webpage? Remember that the html has to be first downloaded and this might take a while depending on some factors. Also when a browser encounters any JavaScript code, it stops everything else and runs it. Now imagine the browser running your code that’s manipulating some html tags when the tags aren’t even on the page yet!

Let me illustrate:

Going back to our previous example:

What happens when we move the jQuery code to the top before the div tag and remove the $(document).ready() function.

What happened? Nothing.

In another case where we return the script tag to its previous position, still without $(document).ready():

When you save and refresh, your code actually works. That’s because the browser has parsed the html before it got to your code. But this is very bad practice. As long as you are using jQuery to manipulate content on your webpage you should always use $(document).ready().

What $(document).ready is essentially doing is telling the browser; “Hey Mr. Browser, don’t read through my mind yet until you’ve loaded all the html and contents because I can’t do anything with them if they aren’t physically present” and the browser replies; “Oh sure, no problem”. I hope you get the point.

Note: Any script tag that relies on the jQuery file must always be put after it i.e. the link to the jQuery file must be before any programming that relies on it.

Also all your programming code should come after any CSS style sheets. Usually jQuery references styles from a style sheet.

There is also a shorter version of $(document).ready():

$(function() {

// your jQuery code here here

});

Versions

The jQuery version you downloaded is the latest version i.e. version “3.0.0.” In the near future it might have changed to 3.11.0, 3.2.1 or 4.0.0 etc.

The jQuery team is always working to make sure that jQuery works well. When new bugs are discovered they try to fix them. Also new versions of web browsers come out with new capabilities, so the team has to react to these. New features are sometimes added to jQuery to make it work better and faster.

You can tell if a version is a major update. For example “2.0.0” and “3.0.0”.

For versions such as “1.4.0”, these are referred to as dot releases. They usually offer new functions, update of older functions to work better, etc. The last number, like the final 0 in jQuery 1.11.0, usually refers to some sort of bug fix for the previous version.

I hope you have a better understanding now of all that we covered.

In the next lesson, we will dive into CSS selectors, which forms the basis of content manipulation and traversal in jQuery.

The post Getting Started With jQuery (For Absolute Beginners) – Part II appeared first on CKDIGITAL.

This tutorial is intended for newbies who already have a good understanding of HTML and CSS. It would be immensely beneficial for you to at least have a very basic understanding of Javascript. We suggest you do so before committing to these lessons.

One of the reasons we will be focusing on jQuery (apart from it being the most popular Javascript library) is that it’s fast; it provides simple solutions to problems that would otherwise take many many lines of code in pure Javascript. Also, cross-browser compatibility is a major issue with Javascript, because the code you write for one browser might not work in another. This can give you a lot of heartache. jQuery shines in this area. It is used in over 62% of all websites.

A JavaScript library is a collection of prewritten JavaScript functions that provides simple solutions to many of the common details of JavaScript.

First, download jQuery

Head over to www.jquery.com

Click on the download link.

You will be directed to a new page. Here you will see different versions and methods of adding jQuery to your project.

For now we will skip all the details about compressed, uncompressed, CDN and all that and click on the very first link to download jQuery. You can read up the information on the page if you like. But we will come back to that later.

You will be greeted with this alien-looking screen. Have no fear! We aren’t trying to drive you crazy or something.

Ok, you might be thinking, “what do you expect me to do with this gibberish?”. Well, let’s proceed to the next step!

Next steps

To be able to use jQuery, you would need to create a webpage.

First create a folder, call it jQuery Tutorial. Inside it, create an html file, called index.

Create another file and name it jquery.js.

The .js means this file is a Javascript file. It’s the extension name.

Open up the file in Sublime Text (or your preferred text editor). Go back to the webpage, select and copy all. Then paste in your newly created file, jquery.js.

All you have to do is save and you already have jQuery ready for use. As simple as that.

Now we need to edit our index.html file in Sublime Text.

Sublime Text tip: Just type in ‘html’ and hit the Tab key. A standard HTML template will be created for you.

You can add the name “jQuery Tutorial” to the title tag.

Now, we have the jQuery file, but our webpage doesn’t know this. What we need to do is reference it in our html file.

Just below the title tag, add the script tag. For it’s source attribute, add “jquery.js”

Sublime Text tip: Type in script and hit the Tab key. A script tag will be added.

Now let’s quickly test that this is working.

We will just write a simple alert code.

Before the closing body tag type in the following without further explanation:

Open up your index file in a browser and sure enough you will see an alert pop up.

But there isn’t really anything special about this, we could have achieved the same with Javascript.

To test the power of jQuery we will do something more interesting.

Create a div and add some dummy text (eg. lorem ipsum …)

Sublime Text tip: just type ‘lorem’ and hit the Tab key.

Delete the alert code and type in the following;

Save and refresh your page. Did you see what happened?

That was really a very nice thing to achieve in just a single line of code. Imagine how much code you would have written in Javascript.

It’s really that simple.

Stay tuned!

In the next tutorial, we will cover the things we skipped in this tutorial such as compressed and uncompressed, the different versions of jQuery, CDN and the meaning of ‘$(document).ready’ code we wrote.

If you are unable to get our sample code to work, please feel free to leave a comment, I will reply as soon as possible.

The post Getting Started With jQuery (For Absolute Beginners) appeared first on CKDIGITAL.