CategoryGit

Yet another “How to use SASS with WordPress” guide

Yes, it’s another one. If you lookup on Google there are are tons of articles about how to use SASS in a WordPress theme, so why writing another one?

Well, the answer is simple. Because I can. Because I am bored. Because I’m going to give you the sources with no fuss.

First of all, take a look at this repo.

As you can easily notice, it contains part of the standard WordPress folder structure and a bunch of other files. And trust me, I am not that kind of guy who adds files for nothing.

The main idea here is to have Gulp search and watch for our .scss files in the child theme folder and build the final style.css files every time something changes. Nice isn’t it?

Before we start we need of course to install some dependencies. Fire up the Terminal and run:

sudo npm install -g gulp

just to make sure we have Gulp installed globally (that’s why you need sudo for that). Then run:

npm install gulp gulp-sass gulp-clean gulp-autoprefixer –save-dev

 We’ll discuss about those packages later.

 
I have added a “sass” folder inside “twentysixteen-child” that contains all our SASS files.

The style.scss file is our main entry point and as you can see from the repo, contains all the boilerplate code required by WordPress to discover the child theme.

I tend to include a _base.scss file that contains all the basic dependencies like variables and mixins. Then in style.scss I append all the page templates, like _home.scss in our small example.

 

 

 

Now let’s talk about the Gulp configuration file. The first lines contain the dependencies we need in our tasks, gulp, sass, clean and autoprefixer (more on this later).

Then we have the paths we want our SASS compiler to run on. As you can see I am using the child theme path as a base concatenated to the others.

After this we can start with the tasks. The first one is responsible of removing all the files from the previous build (basically just one, style.css ).

Then we have the actual SASS compilation. I am passing to the sass() function an empty configuration object, but there are several options available, for example you may want to compress the result.

The “postprocess” task is responsible of every post-compilation step we may want to perform on the output css file. In our case, I am using a very useful library named Autoprefixer that adds all the vendor-specific prefixes. If you’re interested, there’s a nice article on CSS-tricks.com, you can read it here.

The last bit is the “watch” task. This is interesting: basically it tells Gulp to monitor our /sass/ folder and every time there’s a change, to run again the “build” task. That’s it!

Now all you have to do, if you’re using Visual Studio Code like me, is to hit cmd+shift+p  and type “Configure Task Runner”:

then pick Gulp as your default Task Runner. If you take a look at the tasks.json file in the repo, you will notice that I have added some more custom configuration just to instruct VS Code to use the “default” task as main entrypoint.

That’s it!

How I almost lost all my source codes.

Now sit down my dear and listen carefully, I’ll tell you a story about how I almost lost all my sources.
A while ago, I decided to give my marvelous Macbook pro mid-2013 an upgrade. I searched online a little bit and at the end I bought an SSD drive, a Corsair Force LE 240GB

“But 240 is not enough!” you might say.  “You’re right”. It’s not enough. 

I was not using the DVD drive at all so after a brief research, I found the right adapter and replaced it with the old 500gb Apple disk , leaving space for my shiny new SSD.

Everything was perfect, El Capitan was lightning fast, everybody was happy. But then came the day that I needed Windows. So Bootcamp joined us and new partitions started to appear.

180GB OSX Extended and 60GB NTFS on the SSD.
450GB OSX Extended and 50GB exFAT on the ol’ Apple disk.

Again, everything was perfect, El Capitan was still lightning fast, Windows 10 was running fine, everybody was happy.

I was running Windows from the SSD and all the programs were installed on the other drive, together with all the source codes. Yes, before you ask, I have a Bitbucket account. Yeah, a Github one too, but Bitbucket gives you private repos for free.

However, after a while, I realized that when Win10 goes to sleep mode some strange misbehavior appears, in the form of weird SMART messages when turning on MacOs.

Long story short, one day I rebooted from Win to MacOs and puff! the partition with all the sources was gone. Disappeared. An empty, dark and cold space.
I almost got an heart attack.

Disk Util, Disk Warrior, mysterious command line tools, I tried everything, nothing worked. After hours of researches and curses, I fired up Windows and did the only thing I had left:

chkdsk e: /f

That saved my day.

Moral of the story? Always backup your source codes, even the most insignificant snippets.

Building an Angular 2 + Typescript application template

Last time I showed you a way to create a Typescript application template. Now we can use that as a starting point for an Angular 2 application.

As usual, I have created a GitHub repo with the necessary sources and the list of steps to perform. At the end of the process, we’ll get our friendly web server showing a nice “lorem ipsum” coming from an Angular2 Component .

Also in this case the core of the system is gulpfile.js which exposes a bunch of tasks:

  1. ‘clean’ : as the name may suggest, this task is used to clear the www folder from all the external libraries, the transpiled .js files and sourcemaps
  2. ‘libs’: this will copy the depencencies to a specific folder
  3. ‘build’: this will execute ‘clean’ and ‘libs’ and then transpile the .ts files
  4. ‘default’: will execute ‘build’, fire up the webserver and watch the .ts files for changes

Worth of mention is also the index.html which contains the SystemJs initialization code.

Enjoy!

How to setup your environment to write Typescript client applications

Hi all! This time I thought it could be useful to write down a couple of notes about how to setup your development environment ( in my case the wonderful Visual Studio Code on Mac ) and start writing Typescript applications.
To be honest I am writing this only because my memory is becoming sloppy and I am getting lazier day after day 😀

I created a repo on GitHub with the list of steps to perform and an example project.

In a nutshell you have to:
1) create the project folder
2) install a bunch of npm packages globally and locally
3) initialize your project with npm init
4) start coding 🙂

You will find all the details in the Readme.md.

At the end of the process your dev environment will be configured to watch the /src/ folder for changes on .ts files, transpile them into Javascript and run a small web server.

Enjoy!

CQRS: on Commands and Validation part 2: the base handler

Last time we discussed how to use the Decorator pattern to validate our Commands. The approach works fine but while using it I started feeling something strange. It can be probably considered an elegant solution but there’s something missing, like a code smell.

What is the problem? Easy: how can you tell if you are really running the validation? What if you just “forget” to register the decorator? Nah, you need it.

Also, a better use for decorators should be all those cross cutting concerns like logging, tracing and so on.

Another very simple solution is to use a base class for the Command Handlers that takes an instance of IValidator as optional dependency and consumes it right before executing the command:

as you can see in this case the validator returns a “result” object that exposes a boolean status flag and a list of errors that may have occurred.
If the validation fails a specific exception is thrown, containing the list of errors.

If instead everything is ok, the protected method RunCommand() is executed, and that’s the only thing you have to implement in your Command Handlers 🙂

© 2017 Davide Guida

Theme by Anders NorenUp ↑