Have you been to Arctic?

I haven’t been to there. But my code is there. A few weeks ago, Github had a Arctic Code Vault Project. It perserves a lot of Open Source projects for future generations.

I had contributed some of famous projects, like gaia of Firefox OS, jest of Facebook, and my owned project OpenCLGA. So, I got the Arctic Code Vault Contributor badge at my Github profile page:

Requirements

Recently, John Hu would like to work on the font design and creation. At first, I chose the Inkscape to create the SVG font because it has a good SVG font editor. After a few days, the Inkscape cannot open the file properly. That file is created by the Inkscape. I cannot believe it. Why does the Inkscape have this kind of issue. So, John Hu decide to create some simple tools to generate a square box for the font template. The requirements are:

• It must be in the center of the screen.
• It must be a square box.
• It must be adaptive to the screen size. The square box should fill the screen, the width/height is equal to the short side.
• It must be a pure CSS settings without any JavaScript calculations.

I googled centered square box or adaptive square box. I found this post: https://spin.atomicobject.com/2015/07/14/css-responsive-square/. Nice idea. I can finish an example to fulfill these requirements.

How to Do It?

See the Pen Responsive centered box by John Hu (@john-hu) on CodePen.

There are a few tricks at this example:

Horizontal Center and Vertical Center

The horizontal center is the simplest one, just use text-align to a block container. But the vertical center is relatively hard. We use a lot of ways to deal with it. Recently, John Hu likes to use the flexbox to center them. We can see the .container class at CSS section uses justify-content: center to center the items in the main-axis which is the horizontal and uses align-items: center to center items in the the cross-axis which is the vertical. Please note we don’t change the flex-direction which has row in default. So, if we change add the flex-direction the direction of of justify-content and align-items will be reversed.

Square Box

John Hu learned this tricks at a few years ago. We need to create a box whose width is the same as height. It would be very easy to set both width and height. But how to do it if we only want to set the width and let height adapt its width. The tricky part is at the padding-top or padding-bottom. We can see the definition of percentage value at MDN doc:

The size of the padding as a percentage, relative to the width of the containing block. Must be nonnegative.

If we sent the value 100% to the padding-top or padding-bottom, we can have a square box. So, we can find the .square and .square:after using this trick. We use the after pseudo element to display as block which has 100% width by default. And we use padding-bottom: 100% to make the .square to be a square box. Then, according to the post, we use position: absolute at the .content area and let it be 100% in both width and height.

Fit in the Screen Adaptively

We can use the new CSS length unit vh and vw to have the size based on the viewport size. At first version, John Hu uses the orientation media query to detect the short side. After checking MDN length doc, we can use the vmin to know the short side of the viewport. That make the example simpler. We can find the width of the .square element is 80vmin which is the 80% of the short side of the viewport.

No JavaScript

Yes! We don’t use any lines of JavaScript to finish this example. We can find the full codepen here: https://codepen.io/john-hu/pen/MWgrEdV/

Requirement

I brought a new small PC, Surface Go, for quick writings. My idea is to write some articles at this PC and mobile phone. So, the software requirements are:

• It must support Windows. I don’t want to install native Linux on a Surface Go device because most of the hardware we cannot use, like touch screen, surface pen, etc.
• It must support Android and Mac OS. My main computer is still a MacBook Pro and my main mobile phone is still an Android phone. So, the app must support these three platform. That would be greate if it supports iOS.
• It must be private because I want to write primitive or naive ideas and I don’t want others to see them.
• It should support rich text format, like HTML editor, or Word. I may need to format the text as a header, bullet item, etc.
• It should be small and easy to open
• It would be nice to support mark-down

Unfortunately, I didn’t find a good writing software. So, I keep use Google Keep as the writing software. At lease, it support 4 of 6 items. If you know one, please tell me through my email.

Web App

It’s long time that I don’t use a Windows box, about 11 years ago. I totally forgot how to use it. After some googling and configuration, I found a ancient feature that runs a web as an app. This was a cool feature call active desktop. It was invented at Windows 95 and IE 4.0. I didn’t use it before but just heard of it. IIRC, it didn’t have a lot of users. Fortunately, All chromium-based browsers support a similar feature, create shortcut, which runs a web as an app. We can find it at the Option menu / More tools / Create shortcut:

After a shortcut is created, we can find the web is running in the chromeless mode:

Fullscreen

At Android app, we can use a fullscreen editor to write a short story which gives us focus. But at the browser version, it has a small editor dialog. That’s too bad:

I go to Chrome Web Store to find a tool to make it fullscreen. Ha ha.. There is one extension which can make the editor in fullscreen, called Google Keep - Full Screen Edit. After installed it, the Google Keep web app can support fullscreen editing. That’s awesome!!

It is nice to have a talk at PyCon 2017 Taiwan. If you are around there, please come to join us. The talk held by John Hu is “OpenCLGA - Run Your GA on Top of PyOpenCL”. It is about a new Genetic Algorithm implementation based on OpenCL. With OpenCL, OpenCLGA can run on top of all devices you have, including GPU, CPU, DSP, etc. We had also finished an example to run the GA across multiple computer with multiple computing devices, like Nvidia GPU, Intel GPU, Intel CPU, etc.

The URL of OpenCLGA is at https://github.com/PyOCL/OpenCLGA.

“Write Once, Run Anywhere” is a magic slogon from Java. In theory, OpenCL should have similar characteristic. But, it doesn’t. There are few reasons:

• OpenCL doesn’t have byte-code module. We should generate mediate code on the platform we want to run. This one should be easy to conquer.
• Memory model are different across GPU and CPU. We are newbies to OpenCL. We found that the same code with different platform, Intel and NVIDIA. Intel gives us OUT_OF_RESOURCES error, but NVIDIA doesn’t. You may wonder that how large the memory is. In our PC, it has 8GB main memory which can be used by Intel CPU and 4GB display memory for NVIDIA. This PC has dual GPU, Intel HD Graphics 530 and NVIDIA 950m.
• Barrier behavior are different. In the code here, we have a early return which is before a barrier. The NVIDIA platform gives us result, but Intel just gives us segmentation fault. The correct behavior is segmentation fault because we doesn’t make sure every work item passes the barrier.
• Work item size are a big question. As item 2, we have two GPU, Intel HD Graphics 530 and NVIDIA 950m. The work item size of Iris is so small comparing to NVIDIA 950m. This doesn’t make sense. Because Intel HD Graphics 530 supports OpenCL 2.0 which can access main memory directly. It should have the same behavior of Intel CPU but it doesn’t….

We are still searching for the answer for the above questions and inconsistency. If you knows the answer, please don’t hasitate to tell us.

BTW, we do not say that NVIDIA is superior but the inconsistency of OpenCL at different platforms.