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