Quick Tip: Cool features of Chromium DevTools

Chromium Developer Tools is a powerful suite with many features you probably didn’t know about. Here are three of them I find very helpful, but not so popular.

DevTools console output with style

When you output to the console, you can also style text. This is done by putting %c sequence before the styled block. There can be more than one such block. Then you pass CSS styles in the following arguments:

console.log("%cHello developers!\n%cThis is a sample message.", "font: bold 14px/1.35 Arial;", "font: normal 12px/1.35 Arial;");

Styling text in Dev Tools

Copy JavaScript content to clipboard

Dev Tools allow you to copy to clipboard the value of a variable. You just have to invoke the copy function:

var test = "Lorem ipsum dolor sit amet enim";
copy(test);

And now you can paste string Lorem ipsum dolor sit amet enim anywhere.

Make the whole website editable

This is not so much a tip regarding console, you can paste the code there. You can allow editing any text on the web page simply setting

document.body.contentEditable = true

Now you will be able to put the cursor inside every text block and modify it as you want.

GoogleTest installation and introduction

GoogleTest is one of the C++ testing frameworks. It is built following xUnit architecture, so you should be able to start quickly if you have had any previous experience with other testing suites. If you don’t, it’s high time to start testing.

GoogleTest Installation

We will use latest GitHub release (1.8.0). You need to download the ZIP and build the code. Then we make a static library out of it.

wget https://github.com/google/googletest/archive/release-1.8.0.zip --no-check-certificate
unzip release-1.8.0 && rm release-1.8.0
mkdir -p googletest-release-1.8.0/googletest/lib/
cd googletest-release-1.8.0/googletest/lib/
g++ -isystem ../include -I../ -pthread -c "../src/gtest-all.cc"
ar -rv libgtest.a gtest-all.o
cd -

Now we are ready to build code. Continue reading

Konstruisto: Weeks #8 & #9 – Added tests, first Blender model

Since the last post, I took some time to better prepare environment. That means there are no new features. I pushed only two commits, total 160. I did set up Google Test and modified makefile to include missing DLLs for Windows releases.

My first low poly model

I also started playing with Blender to make some models. It takes a lot of time and there are lots of new things to learn, but I managed to finish a simple hospital model. I don’t know yet what should be published in the repository for blender models and I didn’t decide on file format yet, so it’s not included in the repo.

I don’t publish builds this time.

Changelog

  • Set up Google Test framework
  • Fixed missing DLLs for Windows releases
  • First Blender model

Code repository

Go and see https://github.com/kantoniak/konstruisto. You can build from there or download binary release below. There are Star and Watch buttons in the sidebar (right).

WordPress plugins: Creating widgets

I noticed my series on WordPress plugins misses widgets. It’s a good fortune because I needed to show some social icons in the sidebar.

This is how the widget looks like.

You will find the source code in my repo: https://github.com/kantoniak/kantoniak-about-me, along with the link to vector icons made by Allan McAvoy.

Update: Plugin is already available here: https://wordpress.org/plugins/kantoniak-about-me/. To install it from the dashboard, go to Plugins/Add New, change search criteria to Author and look for kantoniak. Continue reading

How to submit to WordPress Plugin Directory

It’s the time to start uploading to extension gallery. We have created two plugins so far:

I will describe the process on the example of the second one. You can find it here: https://wordpress.org/plugins/demo-shortcodes/. To install it from the dashboard, go to Plugins/Add New, change search criteria to Author and look for kantoniak.

Plugin preview

Continue reading

WordPress plugins: Using shortcodes and popups

I made a plugin to render HTML before page content (see “How do I make a WordPress plugin?“), but I needed another one. This extension adds “see demo” blocks inside content. I just give links to preview, set image and eye-pleasing blocks appear in place of shortcodes.

The extension is available from a GitHub repository; you can go there to see every line of code. I will try to send it to plugin repository shortly.

Update: Plugin is already available here: https://wordpress.org/plugins/demo-shortcodes/. To install it from the dashboard, go to Plugins/Add New, change search criteria to Author and look for kantoniak.

Demo plugin preview

OK, let’s go! Continue reading

Use the make tool to speed up development

I’m happy to have a new contributor to my project, who did some cleanup to Makefile (thanks, @buoto!). I thought it’s a good time to write a few words on how the make tool works.

Windows users: to check if you have make installed on your machine type in your command line: make --version. If you don’t, I suggest downloading Gow, which will equip your Windows with most useful Linux commands. Windows 10 users can use Windows Subsystem for Linux feature (how to enable).

What is make tool for?

Reading my tutorials, you could notice I compile many of my examples by hand, i.e. I run commands like this every time:

$ clang++ -std=c++14 timepoints.cpp -o timepoints.exe && ./timepoints.exe

It takes time, is repetitive, it’s easy to forget some option or make a typo somewhere. Another problem is, the set of commands working on one machine may not work on another because of e.g. different OS installed. Continue reading