Category development

Read about the posts of category development

Webpack is actually the best tool to create web pages. Is the next generation tool after gulp and grunt. For me is really easy to configure and manage and I want to show you how I can make projects with this tool.

Prerequisites

First of all, we need nodes running on our machines. Open terminal or command line and try if you have installed node.js:

if you have installed you see the version of node, if not you need to install it, we have a little post explaining how to install:

Install Node in Mac OS X

You can clone the finished project from GitHub for reference: Github EBAVS/ Webpack ES6 tutorial

Configure Project

Now we need to initialize and configure the basics. Create a project folder on your computer and enter.

Initialise Project

First, we need the basics. We work with nodes and this tool uses a file called package.json to manage projects and dependencies. To create this file we need to execute the npm init command and answer questions.

Install Webpack

Now is time to install webpack. We search to install webpack itself and a tool called webpack-dev-server that we will use later.

The –save-dev option means that webpack is installed locally like development dependency in the project. If you want to install globally you can use -g option instead. I prefer local because is changing very fast and I don’t to leave working if I update globally to the last version.

First Steps and Configs

We create 2 folders. One for our code and another one for transpiled code (transpile is the way of transform one code into another code, for example, we will transform es6 in javascript)

And create an index.js file inside src/ folder with the next easy content.

Create webpack.config.js and add the basic part of the configuration:

This is the minimal configuration: we add a conf object with a path telling the two important paths. A second area, with module.export tells webpack what file needs to look like and what file need to generate.

Then we need to create a command to execute webpack through the command line. Open package.json and add “serve” task to scripts area. Scripts area looks like this:

“serve” task executes webpack calling webpack.config.js and transpile js to another file.

And now try to run with the next command in bash:

We created our bundle.js file. But we haven’t HTML yet and for the test, we need to use node:

 

No, this is not a web!

But’s not the point. Why? Because we are developing a web and this not a web. We don’t want a node web application. We want a web. Ok, let’s add HTML basic. Now make an index.html inside src/ folder and add basic HTML code, we don’t need more:

Install a required plugin for this operation.

Open webpack.config.js and then open a new section called plugin adding new HTML webpack plugin:

You can see HtmlWebpackPlugin Documentation here: Jantimon Github Webpack plugin html

Now we can execute again:

If we look inside dist/ folder we could see two files; index.html and bundle.js. HtmlWebpackPlugin gets js from config, and inject script tag inside HTML, if you open index.html with the browser and open inspector you should see “I’m alive!” message.

Actually, this is a little project, but don’t want to stop here. This is only the beginning. Let’s continue.

 

Begin to build a real web page with webpack

At this point, you have webpack with a little configuration but isn’t real. In a real project, you maybe use Bootstrap or Foundation with jQuery or maybe Angular. Anyway, also we need to know what we want to do, and I believe that a better thing is a TODO list!

For a real and simple to-do list, we need some images, fonts, CSS, maybe effects and good code. Good code, actually, means ES6 or ES7. We choose ES6. Then, we have all chosen, let’s do begin.

 

ES6 or ECMAScript 2015

Modern browsers do not understand ES6, we need to transpile to old-fashioned javascript. To make these transpilations we use babel. Babel is a library that understands a lot of languages and can transpile to javascript.

Install Babel (you can go to https://babeljs.io/ to see all capabilities, I only choose few for this project):

Now we tell webpack that use babel for transpile, to do that we need to add the area of a module with rules config:

Explanation: We are telling you that all js files (test property) in src/ folder needs to be loaded with babel-loader.

Now, to be sure that we are writing good and correct code we install a lint loader. Every time we write bad code lint tell us to correct:

And their rule inside modules:

We use enforce to be sure that we are executing eslint before babel. Thes use excludes because not want lint al external module.

Now in our root folder need to create a file called .eslintrc.json with this content:

We are telling that eslint uses Airbnb rules. You can install other rules, Google has their:

And change “extends” to “google”, but not our case, Airbnb has good ones, you can inspect their rules: https://github.com/airbnb/javascript

Optional: if you want you can add a task in package.json spripts area to lint only. I think that is not needed but is good to be there:

 

Install dependent libraries

It’s time to install bootstrap and jQuery. These libraries have their package in npm repository. Install it:

See that we used –save and not –save-dev. This is because these two libraries are used in our project and need to be there in production.

Test jQuery

Now test jQuery. Open index.js from src/ folder and change a little bit, remove console.log and add next lines:

If we transpile and open the browser we can see “I’m alive” on a browser page. Cooooool! we are moving forward, we have a phrase in the browser instead of the inspector.

But for use with Bootstrap we need more config, open webpack.config.js and add a new first line:

Then we tell config that uses a new plugin to convert jQuery into a global variable, plugins will be:

if you halt this step, after add bootstrap, you will have an error saying that jQuery is not found.

Configure and test CSS/Bootstrap

Bootstrap is a collection of CSS and JS libraries. Include Bootstrap in our code needs an extra effort, first we install all needed and then I explain what is every module:

Yeah!

  • style-loader: gets our CSS files and inject them inside <style> tags.
  • CSS-loader: interprets @import and url() from CSS and resolve them
  • sass-loader (node-sass): gets sass and transpiles to CSS
  • file-loader: gets a file and return new name with md5 hash. It’s needed by previous loaders.

Open webpack.config.js and add:

Paste this code after babel-loader rule.

ES6 doesn’t know how to handle and import current CSS. If you try to import bootstrap CSS directly to index.js you will have an error. To avoid this we make a style.scss and put it in src/ folder with next content:

The tilde (~) means that need to look inside the node_modules folder.

And finally, we add code to index.js that looks like this:

I’ve added a new div to see if bootstrap is working. Run npm task …….. And yeees!

happy clapping GIF by Originals

Webpack-dev-server

Now, we have to work our base to begin the development, but I don’t want to run webpack every time I made a change in code. To avoid running tasks every time, we have two options; You can run webpack with –watch, which is good or you can run webpack-dev-server, which is better.

The difference is that –watch option leave webpack executed and run every time that rode is changed. It’s ok, but we need more power because we are developing web, and debug javascript, then is better a web server. With webpack-dev-server, you will have a real web-server integrated with webpack. We installed with webpack, the only want we need changes configuration. Open package.json and change server option:

Then if you run:

You will see all compilations, listings and then ready to browse: http://localhost:8080/

Changing webpack-dev-server configuration

Alternatively, you can change some parameters of the web server adding some parameters in webpack.config.js:

Adding devServer to config we can change the port, I prefer 3000 instead 8080.

You can see all options here: https://webpack.js.org/configuration/dev-server/

 

Developing Project

We have now the project with a good base. Let’s begin to create our real to-do application.

Making Views

ES6 have one important feature, have templating. You can store HTML in a variable and then inject it later on our web page.

Make new views.js in src/ folder. We put inside the little templates for creating the page:

We have here to constants with a little bit of HTML. The first constant is the container. The second one is the input text box where we will write tasks.

After definition, we add to an object collection and use export to say ES6 that we can use in other files.

Then we can open style.scss file and add some CSS to separate box to the top of the page:

 

Making Controller

Now we make the controller, create a file called controller.js. Thi file will be responsible to load views and manage events and data.

It’s time to make with a few lines, only for initialize and show data to the browser:

Then we have a constructor that receives jQuery and views and store them in properties. Then you have initViews method that initializes HTML and injects it to DOM via jQuery. Then you have bindEvents to bind events to DOM and start a method that calls previous methods.

Put it all working

We have two files (views and controllers) but aren’t called yet. Then open index.js and will see this code:

Import jQuery and bootstrap and styles and then import views and Controller and call it. Simple. If you browse now you will see the first approach to our ToDo List.

First todo test

Isn’t working yet. But we will go to our final steps!

 

Making all working

We have the base. It’s time to finish this little project coding final events. We don’t want to extend more, don’t store todos in any place. Simply add and remove. Let’s do it!

Adding to Views

Into views, we have only brand and input text. We need to list items and to-do items. Add next lines to view.js to add new views:

And now change view collection constant to add new elements:

Cool, we have now all view parts ready.

Finishing Controller

The controller has the simple binding, addItem method is empty and is static. We need to code all of this. But, first of all, we need to finish initViews because we want to inject the item list on the page:

We have now a list rendered on the page. Time to code addItem method, but for code, we need to change the constructor to create an item list to store our todos:

And:

Note that we are calling removeItem, create it:

And bindEvents changed to; we need to change call to addItem because isn’t static;

You can run the project and see that all are working as expected. If not, please, feel free to comment on any errors you have and I will help you to make this work.

ebavs todo tutorial working

 

Webpack config for debugging

If you browse the project and open the web inspector you will notice that is impossible to debug the project because the code is hidden inside webpack envelope. If you try to look at variable values or do some debug you will enter in a full head pain!

To avoid this situation and serve correct code to chrome we need to add an option to our webpack.config.js :

The devtool option allows saying webpack and webpack-dev-server that we need to use source map to our code. If you browse the project you will notice that can search files with CMD + P (Ctrl+P) and add breakpoints, etc …ebavs webpack debugging

 

Final Words

In a real-world project is probable that you don’t use jquery and bootstrap in a project. Actually are other cool tools you can use in your project like underscore, lodash or some others instead of jquery.

For me, include jquery in this project was a real pain because isn’t prepared for modern life projects. jQuery was created to make it easy life to create simple projects and projects with ES6 and Webpack are other words.

The same for bootstrap. On EBAVS/ bootstrap are changed to other CSS templates like foundation or skeleton. Bootstrap it’s a big project and sometimes we only need the grid and some helper functions to develop a single project. Bootstrap is a little monster now with a lot of components that we don’t use.

You can clone a project from GitHub: Github EBAVS/ webpack ES6 tutorial

Node.js is actually an essential tool for every developer. Basically are a javascript interpreter for a command line. This is very interesting because allows executing javascript in any environment; you can make server-side applications, command-line tools, webs, etc. An actually have a lot of followers, apps, frameworks to work with it. This ecosystem is incredible and make it easier life when you work with it.

 

But Node isn’t alone. Come with another powerful tool called npm. Npm is a package manager that allows installing of third party libraries in javascript. For development, this is amazing because you could have an entire development environment in minutes.

Let’s do install Node.

Install Node

you have two ways to install in Mac OS X.

Use Installer

The easiest way to install a node is with the package manager.

  1. Go to https://nodejs.org/en/download/
  2. Download Mac installer version
  3. Execute and follow step by step

Use Homebrew

Homebrew is defined as a package manager that OS X should have. First, we need to install homebrew. Open a terminal window and write:

After some text, you can test it works:

Now we can install Node:

And after some more text, you will be Node.JS installed.

Test It

If you open a terminal and write:

You will have the version output:

Why use Homebrew instead Installer

Why is better to use homebrew instead of the installer? Easy, you need administrative privileges to install, this means use Sudo to install with package installer and are a big problem for working with it. You will need to use Sudo in front of the node and this one doesn’t like execution with root privileges. To avoid this problem use Homebrew to install it.

Docker is a new way to use virtual machines (someone expert that read this, not hates me, it’s a way to show what it is). Docker represents an easy step to install services on our machine without installing it. This means, is like a virtual machine using your own hardware instead of virtualizing it and where you can install things. It’s complex to explain because Docker is a half-path between your own computer and Virtual Machine.

The best way to understand what is and why use it is creates a basic example. We are web developers, the best is to create an Apache Image with PHP and execute some code.

Install Docker

Let’s try it. First, install Docker, this is important. If you don’t install the examples in this article couldn’t work!

You can download a copy of Docker here: Docker Engine installation

Install and …. continue.

Now it’s time to create containers. Docker has containers, a container is a service installed and you can pile containers to add more services. Let’s go to work and stop rare words!!

Create Image

This tutorial talks about creating an image that you can use and reuse. Time to create. Move to a new folder and create a file called Dockerfile and add the next lines:

It’s a two-line file. Simple instructions:

  • FROM chialab/php:5.6-apache: tell what docker image you want to use. I’m choosing chialab images because have a lot of libraries installed. You can choose another one if you want. Feel free, I always use it because have all I need for development. Search images here: Hub docker
  • ENV APACHE_LOG_DIR /var/www/html : Tell image internal environment variable.

Time to build. We have a simple Dockerfile and now need to build our image, open the terminal window and move to the Dockerfile folder and execute the command:

We built an apache image, execute the next command to see your images:

Use Image

Now it’s time to use it. Then, create an index.php page with phpinfo() instructions.

Only one more step and we are done. Time to execute the magic command:

What’s the meaning of commands?

  • docker run: tells to execute image
  • -v: is for mount volumes. I’m telling that folder $PWD (it’s system variable for actual folder) maps to /var/www/html inside image
  • -p: map port 80 on our computer to port 80 in an image.
  • apache: Docker image name

If you aren’t using Mac Os X or any Linux based OS you can change $PWD for another folder:

And finally, open your browser and write https://localhost You will see a phpinfo() information:

docker-phpinfo

You are running a web server now with apache. Thanks to docker it’s easy to create environments without installing any software on our computers.

In 2016, we created in EBAVS / our Christmas postcard to wish Happy Holidays.
A familiar DIY with:

  • Red card
  • Love
  • White paper
  • 6 years Old Daughter
  • Orange paper
  • Cryings
  • White pencil
  • Scissors
  • Smiles
  • Dotted Paper
  • Shouts
  • Glue
  • 10 Months baby boy
  • Blue marker
  • Patience
  • Effort

Happy Holidays to all with a REAL XMAS POSTCARD!

postal-nadal-ebavs

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The lasts years we did a Christmas action: The pooping log, or a cake

Git Workflow or GitFlow it’s a development model to work with code and git. We use extended in our code to make conflicts between developers less than possible. The reality is that Git Workflow is branch management for organizing code and developers. There are many ways you can manage branches, we only use 2 or 3 at least, but you can combine them (we do) into more possibilities.

 

If you don’t know about Git or Branch you can read our previous post:

 

Basic Workflow

Actually, a lot of developers works alone and git give them the security of know that their code is well organized in a lot of commits. If you are a little bit organized you will do push for every functionality, for example, add a delete button to code, and you know every commit is a function. Sometimes no, simply you are developing and every time you remember to do a commit. This other way too, because you are in fast mode and can’t stop to think some details. Anyway, imagine that you need help and someone comes to help with development tasks. You give them access to git and he/she clone code and begin the work. The most normal is both developers work in the same branch, master.

Let we see what happens. Two developers, Barbara and Victor. One repository with one branch. Victor begins to work:

Then create a basic PHP with some HTML inside:

(yes, I forgot one p tag)

Now I add a file and commit push:

Then Barbara comes to work and Victor give access to her (we use the same user in different folders, that is similar):

Yeah! we have now the same repo in two folders, it’s like Victor and Barbara works now. Then, Barbara begins to develop and add a new line to index.php:

She commits and pushes:

And like a good coworker, she tells to Victor and he pulls changes:

Then Victor review the changes editing index.php. Victor sees p tag mistake and decide to change the line and something else:

He commits and pushes:

And Barbara, see the same mistake and make similar changes:

And …

.. Fail. What the hell!? both of them changes the same lines and Barbara, second to push have a real problem. But isn’t the big problem, she tries to pull:

Git found a big conflict because changed lines are the same in two repositories. And Barbara decides to open index.php to see what happened:

Oh!! it’s terrible, a lot of awful code is new in the file. Ok, let’s see what we can do. Git divides conflicts into two areas, this is the area corresponding to code in our own machine repository:

And the other part is corresponding to the server repository:

Now Barbara needs to clean code deciding what part is correct and what isn’t (you can use some automatic tools, but that isn’t the purpose of this article). Finally, Barbara cleans the code:

And now we need to commit and push again:

The difficulty isn’t to modify 2 lines and decide what line is correct. Imagine one file with thousands of code lines and three or four developers. Or Worst, ten files with thousands of modifying code. The poor guy that gets merge problems has all loose day looking for the code problems.

 

Git Workflows Type

Now we saw the big problem working with the same repository and one branch. We discuss now different ways to avoid problems with different types of workflows.

Feature Branch Workflow

After the hell of Basic Workflow or Centralized Workflow, it’s easy to think to leave this kind of work. It’s a hell, a real hell. I participate in a 4 members team, a lot of years ago, working with Centralized Workflow and was really hell. Entire weeks loses merging code, it was a nightmare.

All of my problems could have been solved used this simple way of work. Making single Branch for every feature. The idea is simple, you make a new branch for every feature you need to implement.

Let’s explain and continue the Barbara and Victor history :)

After Victor review the code decides to move to Feature Branch Workflow then he decides to create two branches, one for add code and another for add HTML:

With git checkout -b new branch can create a new branch and change to them, the important is -b option that means “create a new branch. Now we are in feature-HTML and we need to add some HTML file to our index.php, Barbara begins their work:

We remove the commented PHP line and add a new one at the end. Now it’s time to commit and push.

Now time for Victor, he needs to add some code, first we change the branch and begin codification:

We have actually 3 branches with different codes and need this code altogether. Like Victor is a master developer, he controls now the merge ad code, first integrates the feature-code branch:

See the process, first change branch to master: git checkout master
Then pull code from the server, we need to have the latest code: git pull origin master
Then pull feature-code branch: git pull origin feature-code
Now we have merged code, we could do the same with git merge feature-code
After code merged we need to push: git push origin master

Now we can do the same process with the other branch:

It’s the same error as before, but here resides the difference: Victor, in this case, are Team Lead, knows what happens with code and how to resolve conflicts, indifferent to Barbara that just arrives at the project. Too we introduce new command: git mergetool

Maybe you haven’t configured the repository with any tool, but your system won’t let you alone:

I’m assuming that open diff is there and just hitting enter:

opendiff tool

This looks better than edit the directly file in the editor. The tool will be different depending on your Operating System, my case is Mac OS X then this is the default tool. Just arrange some lines and finish.

And:

Yes, we have completed our Feature Branch Workflow. If you use Bitbucket web page or Github web page for make merges is more easy and intuitive. I will talk about merge with bitbucket or GitHub in another post.

User Branch Workflow

User Branch development isn’t recommended for any. Just is to create a branch for every person in your team and all of them do merges to master. It’s also highly recommended to merge from the master te person branch. I worked before with this system in a big company with a little crazy Lead Developer. It’s not a bad idea if you are small teams (two persons), but with big teams it’s insane.

No examples here, just wanted to comment on the option.

GitFlow

GitFlow borns with nvie post.

He explains a way to organize branches to work. It’s easy, it’s organized, it’s cool, it’s fantastic, terrific! Nvie divides work into two main branches and supporting branches. Let’s see how it works.

Main Branches

After you init your repository and add some code you need to add one branch called to develop. You will have two main branches:

  • master: master branch will be the production branch. The code here is the same as will be on the production server. Every time you merge code from developing to here means you need to upload code (or push-pull) to production.
  • develop: this is the main branch where code comes to test before production. No one uses this branch, the code only come from merges.

It’s easy to understand. The Master branch is production, develop is where we test code. When you think the code is correct in development it’s time to merge to master and upload to production.

Supporting Branches

Are three types of auxiliary branches:

  • Feature Branches: Every time you need to make a new feature you can create a feature branch. You can name wherever you want, but in EBAVS/ we name with feature-* convention:

Is important to use –no-ff option. This means no fast forward. Fast Forward loses history when you do merge. Is important to maintain history.

  • Releases Branches: Releases Branches is where features go, you can prepare here a production release. They born in develop branch and You can name with a minor or revision number. After you finish release, you can merge with the master branch directly, create a tag with revision, merge release into develop and finally remove the release branch:

  • Hotfix Branches: Hotfix branches are branches that born from the master branch because code needs to fix urgently. After fixing the code you can merge again to master and develop. Naming is with revision number:

 

Finally

This tool is powerful, you can use it to organize your code or to ensure that you can develop in a quick and safe way. But if you use it in a bad way could convert into pain. GitFlow it’s a good workflow we can use actually. Maybe are others, but this one fits perfectly in our day to day coding.

This article is dedicated to Alex, that asks me how to create a basic CRUD from a database without development, this is called Scaffolding.

For me, Scaffolding is one of the most amazing techniques that people don’t want to use. Exist a major reason, that reason is every time someone accesses the URL and execute the code, a huge process begins asking for the database and constructing the CRUD from zero.

Exist a lot of frameworks with Scaffolding in PHP, but I prefer CakePHP by its simplicity. Other languages like Python with Django and Flask or Ruby On Rails have their own mini scaffolding.

A little Terminology

Actually, the last version of CakePHP doesn’t support Scaffolding, they remove it in the 2.5 version (actually the last version of CakePHP is 3.3).

Before to begin I want to explain some of the vocabularies here:

  • CRUD: means CReate Update Delete. Actually when developers talk about CRUD refer to the pages needed to list records from a database, form to create new records and form to update records.
  • Scaffolding: Technique that creates CRUD list and forms on the fly and shows it.

Ok, continue explaining the difference between the two main techniques regarding this. The best of both is CRUD generation. CRUD Generation executes one code that explores the database and generates the PHP files needed to access a database. Scaffolding does something similar, explores database and create CRUD on the fly. This is the reason that needs a lot of resources.

If you have a consistent database and don’t need to change anything I recommend that you use some of the CRUD generators. Two of the best for me:

We need Data

Now I want to begin our amazing scaffolding project. First of all, I need to create a database. I will begin to create 2 tables. One of the articles and others from categories of articles. Something simple.

I followed the model convention name of CakePHP:

https://book.cakephp.org/2.0/en/getting-started/cakephp-conventions.html#model-and-database-conventions

I don’t want to enter to explain databases, I suppose that you can figure out how to create your own database and tables and connect to a server. Anyway, here the structure:

 

Install Cake

It’s time to install CakePHP. You can choose to download or use git. I prefer git but maybe you want to download:

Git

I create a directory and enter it and clone:

With -b ‘2.4.9’ in clone, we are telling that only want this branch or tag. If you look VERSION.txt of CakePHP you can see version:

Download

You also can download it directly from GitHub. Follow the next link and click the green button called Clone Or Download and then click Download ZIP. Decompress the file in a directory and continue.

Github Cake PHP

 

Try It

If you are using Apache in your environment, all works fine and you halt next step.

NGINX

In another hand, if you work with nginx you need to configure your server to make a good environment for CakePHP. Follow instructions in CakePHP Cookbook:

Book Cake PHP Installation

Trying

Then, if you load now your CakePHP URL you will see your first big-screen :)

screen-shot-2016-11-15-at-11-25-17

 

This is correct, CakePHP is telling us that all is correct but a database isn’t we need to write database config.

Configure Cake

First, we need to connect to a database. This means that we need to create a configuration file. We have one sample file in:

Rename it to

And open it, search for the next code and fill it with your data (is important that uncomment utf-8 if you use accents):

A configured database, the next step, begins the big and complex scaffolding code.

Creating Models

Now it’s time to create the models’ files to tell CakePHP what tables are involved. Create a file:

And write (or paste) the next code:

Save it and do the same with Articles:

And code:

It’s done, we have models.

 

Creating Controllers

It’s time to create Controllers. Controllers are files that control the execution of an application and ask models for data and send to views. In CakePHP also are mapped to URLs. If you want to access to domain.tld/products you need to create a ProductsController. In our case, I want two URLs, one for Articles and the other for Categories. Create file:

And now the most complex and difficult to read code:

The property $scaffold is the most important, tell CakePHP that this controller is a Scaffolding controller.

Now for categories:

and code:

It’s done. Scaffolding it’s working. You need to access the domain.tld/articles and CakePHP does the work for you, scaffolding in action.

Scaffolding

Scaffolding List:

Scaffolding List

 

Scaffolding Edit:

Scaffolding Edit

You can browse for categories in the domain.tld/categories

Improvements

If you browse a little bit, you notice that category isn’t shown in Articles Scaffolding, only show ids. This is because the models need to know the relations between tables. Only change models to:

With $belongsTo and $hasMany properties, we tell to Cake the relation with tables. Remember that if you don’t follow conventions this relation won’t work. In Articles is important the existence of category_id, with another name the relation will be more complex. You can see relations here:

Book CakePHP Models

Finally, I show you how can use Scaffolding with CakePHP. But remember that this is hard work for servers if you use a lot of tables and users, and is better to use CRUD instead.

In 2016, Betahaus asked us to develop a basic Workshop on WordPress to teach members about coworking. The movement was called “Members teach Members”. In this scenario, Víctor Santacreu prepared a workshop defined in two masterclasses: 2 days, four hours by day. The workshop is divided into 25% theory and 75% of practice. 34 students.

 

We prepared a presentation divided into two days.

The skeleton was:

  1. What is WordPress and what is it for?
  2. Features
  3. Installation environment
  4. Download and Configuration of a theme. What is a theme?
  5. What is a plugin
  6. Widgets: what are and their function
  7. Navigation menus
  8. Pages, Posts, differences between them – also categories and tags-
  9. Shortcodes: what are and examples
  10. User management and roles
  11. Creation of forms: using a plugin
  12. FrontPage / HomePage: the difference between them and what is for
  13. Improve performance: cache plugin and technical explanation
  14. Web upload to production

 

On the first day of the workshop, we taught the first 9 points.

The students are interested in How to install WordPress, what are the differences between posts and pages? We learned a lot about themes, installed one and configured it. We explained what and why plugins are important and also a little bit of the history of WordPress.

The elementals concepts of this class: WordPress, posts, pages, categories, tags, plugins, widgets.

slide-wordpress-workshop-ebavs

The second day was a little more complex and difficult.

We explained what’s the difference between Homepage and Frontpage, configure both of them and put it online altogether. We continue on the basis of caching and why is good how to measure page speed and we see a difference between load page without cache and with a cache.

Finally, we move our project to production: migration BBDD, upload to real.

Thanks a lot for this opportunity Betahaus, was really amazing to teach people and learn from them.

 

Git is a powerful tool that can help to manage code. But sometimes we don’t know or we are scared about the features aren’t know. At least is our code and don’t want to lose any line of them.

Following the previous git post: Basic Git commands, we talk about branches.

The branch is a powerful feature of git. If like we copy all code to a new directory and begin work there. But the main difference is that git knows how to join or merge these two directories without broke or lose any line of code and all in the same directory ;)

Then, we want to show how to manage branches and easiest that is.

First of all, we need to make a dir and init a new repository:

Now it’s time to create some code:

It’s time to see branches and create new ones:

Now we have two branches. Made some changes to hello.php, and test what happened:

Time to see differences:

We are in master and time to merge branches, now we say: merge second into master:

Merge two branches we don’t need the second branch, time to remove:

This kind of work with git gives us the opportunity to work in different code branch with different features, it’s like work in different directories without worry about mix code later.

 

EBAVS/ Try to work hard with the latest technologies. We work with git for several years and we learned a lot.

This is a simple reference guide with commands that we use day to day from the beginning of a project.

 

Initialising Repo with Git

First of all, we create a project (actually we download skeletons from a composer, but this is another history or post):

Then we initialise the git repository. This is important because git makes their local repository for local working:

Working with Repository

When you initialized we can begin work, then create a sample file for testing:

then add simple code:

now add this file to a repository:

or

Now we have a repository with some of the code. It’s time to move this code, we have code added but isn’t in the repo yet. Write:

The files are committed to a repo, are stored in this and assigned a short guide identifier 6f30a7f for us.

Go to change index.php and see what happens in the next commit:

And change to:

Look what we add -a parameter. This means that we change a file. If we only add files don’t need -a parameter.

We have our application ready to store on the remote server. We could make a remote in GitHub or in Bitbucket. I Have a preference for bitbucket because I can make private repos for free. But GitHub is good too.

When we make a repository, in GitHub for example, they make a new URL for the repository, the URL construction is:

https://github.com/user/repo.git

A user is your username and Repo are the repository name. For this example a real URL could be:

Example Git EBAVS/

Then is time to add this remote repository to our local repository:

We have connected now our local repo with our remote repo, time to move code to remote:

And we have our repo working.

Summary

commands that we used:

 

Update:

If you like it you can visit our next post talking about Git: