Sin categoría

Webpack 4 Boilerplate configuration with Babel, Bootstrap 4, Sass and Webpack Server

Yes, I know, there are a lot of repos with Webpack configuration to start with our projects, but beyond of that, this a boilerplate made from scratch following mainly this great post of Margarita Obraztsova where she explains how to configure Webpack 4 and that helps to have a major understanding of how packages and Webpack works.

The idea of create this repo is to learn how the configure all this technologies to develop further projects using the latest technologies and have a better understanding of how works all together, and not just make copy/pate of Stack Overflow.

I hope that this help somebody like the Margarita’s post did with me 🙂

Repository available in:

Webpack Boilerplate

Advertisements
Sin categoría

Customize styles of Contact Form 7

In my last project I had the need of customize the messages success and fail of Contact Form 7 and after using this usel post of Isabel Castillo (Style The Response Messages For Contact Form 7) I could make it it.

Now, I want to share some changes that I made to the Isabel’s solution like a class for the email send error and another one for the inputs hints.

/**
 * @author: Wilhelm
 * WP iconset https://developer.wordpress.org/resource/dashicons/#analytics
 */

/* Input hint */
.wpcf7-form .wpcf7-not-valid-tip {
  padding-left: 2rem;
}

/* Error */
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng {
    color: #d8000c;
    background-color: #ffbaba;
    border: 0;
    padding: 10px;
}

/* Success */
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #4F8A10;
    background-color: #dff2bf;
    border: 0;
    padding: 10px;
}

/* icons properties */
div.wpcf7-mail-sent-ok:before,
div.wpcf7-validation-errors:before {
    font: 26px/30px dashicons;
    margin-right: 16px;
    vertical-align: middle;
}

/* WP Dashicon check icon for success */
div.wpcf7-mail-sent-ok:before {
    content: '\f147';
}

/* WP Dashicon no icon for errors */
div.wpcf7-validation-errors:before {
    content: '\f158';
}

To load the Dashicons of WordPress icons in our theme I don’t use the Isabel’s solution of load the icons using the function wp_enqueue_style( ‘dashicons’ ), instead I load the Dashicons like I explained in my previous post How to use dashicons in your wordpress theme

functions.php

//Enqueue the Dashicons script
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

 

Development

How to use dashicons in your wordpress theme

Dashicons are the official icon font for WordPress and that you can use it in your theme, if you don’twant to use fontawesome or another icon set this is a good alternative.

To use it on you theme just add Dashicons on your functions.php file

function.php

//Enqueue the Dashicons script
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

You can refer the icons in your CSS like:

style.css

.my-class {
content: "\f147";
}

To see all the set available visit the WordPress Developer Resources

Development

Simple AJAX call with Fetch API

Nowadays a lot of people make AJAX calls with JQuery, I know people that just download JQuery just to make this kind of calls to RestAPIs(I was doing it not much time ago) and is not really necessary download a whole library to make this kind of calls especially if the page download time is a important issue.

If is not with JQuery what alternative do I have?

Well, since 2015 their is a light and native(for browsers) alternative called Fetch API.

Fetch API allows us to make AJAX calls using another feature call Promise, for a better definition I will quote to Sandeep Panda:

Fetch is a new, simple and standardised API that aims to unify fetching across the web and replace XMLHttpRequest. It has a polyfill for older browsers and should be used in modern web apps.

How it works?

Here is a simple example:
JSON Example Data

{
"user": {
"name": "Wilhelm",
"email": "email@domain.com"
}
}

HTML and JS code

References:

Development

How to make a template message for Git commits

At work finally I am using git properly(Or I think), I mean, now I understand how to use branches anytime that a new feature shows up or a bug has to be solved, and how I mentioned at Twitter I know that we are in 2017 and I should been using git since a lot time ago but since I’ve take new jobs I really have the opportunity to use git at my new jobs.

Every time I notice more and more benefits about use git, for example, I just notice that you can create a message template for any time that you make a commit. Thus this feature allows you to keep a standard for your team of codeers when they need to write a commit message, like have s title, description and issue address by.

This post shows how to configure your repo to create a commit message template so you can have a standard for your commit messages.

In the root folder of your project create a .gitmessage file and add the next content:

Some awesome title

Why:

* ...

This change addresses the need by:

* ...

Now using the console in the root of your project folder type:

git config commit.template .gitmessage

Yaaaay! Now you are ready to make c00l messages anytime you have to make a commit.

Tip: You can set a template message globally just typing –globally before commit.template

git config --global commit.template .gitmessage

To unset the global template commit type:

git config --global --unset-all commit.template

References:

Development

Another greeting, now from Express

I have made a little stop about learning to React to dig a little bit now in Express.

Like I mentioned in a previous post I have decided to get an update in the Frontend technologies and Express is one of those that is important to know in nowadays, so It’s time to know how it’s works and start to build a simple app.

Like always Google is your friend and there you can find a lot of tutorials about how to make an Express app, I have read only two tutorials (you can find them futher below), one is at MDN (Mozilla Developer Network) and the other at Close Brace. Both tutorials are very easy to understand and follow, if you ask me wich one to choose to start I will tell you with the tutorial in Close Brace and then jump to the MDN tutorial.

Why? Well the code Close Brace gives you a clear understanding in how Express works, then the MDN tutorial will give you a extended tutorial by steps very well documented with links to official docs and recomendations.

Also I have uploaded the tutorials to Github if you want check the examples that I have made with the tutorials mentioned above.