Development

While I was browsing codepen.io for some vue.js examples I stumbled onto this.

Go ahead and test your CSS Skills!

Check out the quiz on Codepen

301 Redirects are permanent redirections, so it redirects a certain URL to another one.

When we use them?

• When the website url changes for the same content. For example http://www.website.tld/oldpage -> http://www.website.tld/newpage
• When the main url of a website changes. For example http://www.oldwebsite.tld/page -> http://www.newwebsite.tld/page

Why we use them?

• In order to keep the links that were already indexed by search engines.
• To keep customers on your website when the url changes.

How to use them

301 redirects are added to the .htaccess file on an Apache server.

Redirect 301 [old page url] [new page url]

For pages:

Redirect 301 /oldpage.html https://www.url.tld/newpage.html
Redirect 301 /oldpage2.html https://www.url.tld/newpage2.html
Redirect 301 /oldpage3.html https://www.url.tld/newpage3.html

For an entire website:

Redirect 301 / https://www.newurl.tld

Here’s an overview of what you could use while developing a project with Laravel.
In order to create controllers, models, migrations, … we can use artisan.

Creating a Controller

php artisan make:controller MyController

When we want artisan to provide a controller with the “resource functions” (index, create, store, show, edit, update, destroy) predefined for us, we can simply add “–resource” to our command to provide these functions out of the box.

php artisan make:controller MyController --resource

Creating a Model

php artisan make:model

If you want artisan to provide a migration file related to our newly created model, you can just add “-m” to the command. Which gives us something like this:

php artisan make:model -m

Creating a Migration file

We’re also able to create our own migration file, for example is we want to add field to an existing table or create a pivot table, or …

php artisan make:migration the_name_of_your_migration

Just like the migration file that artisan provided for us when we used -m on the creation of a model, the migration file will be added to the /database/migrations folder.

Deploy the migration file(s) to the database

In order to get our migration file(s) migrated into the database, we need to tell artisan to migrate them. Like so:

php artisan migrate

Be aware that once a migration file has been migrated to the database, all changes to the file afterwards will be discarded. We’ll need to create a new migration file in order to add additional changes / migrations. In the database you can see the hierarchy of the migrations in the table migrations.

Installing Laravel

Installing Laravel and getting your project going is quite easy, if you know how to do it. So here we go!

First of all you’ll need a local server.
You’ll be needing at least PHP version 7.1.3. and I’m currently working on PHP 7.2.

I prefer to install Laravel globally. Use the following command on your terminal.

composer global require "laravel/installer"

After Laravel is installed you can run the simple command.

laravel new myFirstProject

And it will create a new folder for you with the name myFirstProject with a fresh installation of Laravel in it.

The next step is to set up your vhost to your folder. (don’t forget to link it to the public folder)
Once this is done, you’ll be able to browse to your newly created project using the browser of your choosing.

Installing Laravel using these steps will automatically result in a secure installation, meaning that there will be a Application Key generated for you.

Setting up the database

Setting up a database for your project will be quite easy because we will be using the power of artisan to build our project.
The only thing you need to do manually is creating an empty database. Afterwards you’ll need to put in the credentials into the .env file, right over here:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

When this is done we can start using the database.

From this point forward you can start developing your project!

While editing DNS settings for a client (or for yourself) and the URL’s don’t resolve like they should, it’s probably your local DNS Cache fooling you.
It would be a good idea to clear your local DNS Cache.

For macOS Sierra 10.12.0, OSX 10.11.0, OSX 10.10.4 and OSX 10.9 – 10.8 – 10.7 you can use this.

sudo killall -HUP mDNSResponder

For OSX 10.10.0 – 10.10.3 you can use this.

sudo discoveryutil mdnsflushcache

For OSX 10.5 – 10.6 you must use this.

sudo dscacheutil -flushcache

This year I’ve started working with some new tools, two of them are Grunt and Sass. Grunt is a commandline JavaScript Task Runner, and Sass is a Css preprocessor allowing you to write more powerful css, with the use of variables, mixins/functions and nesting!

Off we go !

First of all you’ll need to install a few things. Ruby to get Sass, and NodeJs to get npm, so we can work with Grunt.

Grunt

Step one: installing Grunt. If you have NodeJs installed properly you simply run: npm install -g grunt-cli

This will install Grunt globally. So you can use it wherever you want.

Now we need to create the “package.json” file there are several ways to do this. But I prefer to create a new file and input this.

{
  "name": "Project Name",
  "version": "0.0.1",
  "devDependencies": {
     //installed packages 
  }
}

And then save it as “package.json” in the root of my project.

After that we need to install our Dependencies. This can be done by running the following command: npm install <package> --save-dev

I want to use Grunt to compile my Sass when I save my project. To do this I need to install 2 dependencies.

grunt-contrib-sass: It is used to actually compile your scss files to css.

grunt-contrib-watch: It watches our folders for file changes.

Example

npm install grunt-contrib-sass --save-dev

Now my “package.json” looks like this:

"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-sass": "~0.3.0",
    "grunt-contrib-watch": "~0.4.4"
}

Next is our “Gruntfile.js”. This file contains the tasks that grunt needs to do for you.

This is how my Gruntfile looks like:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },
        watch: {
            css: {
            files: '**/*.scss',
            tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

This file starts with a wrapper function and we pass in grunt so that we can access it..

Adding tasks with :

grunt.loadNpmTasks('*Name of the task*')

Register Tasks with :

grunt.registerTask('default',['*tasks to run*']);

the 'default' task is what gets running when you type grunt in the commandline.

The end !

When working on your project, just run the grunt command in your commandline in your project folder.

Hit ctrl+c to quit grunt when you’re done.