Better way to copy demo code from docs.python.org

I read a lot of code in Python docs. So there comes so much demo code to run on my own way with modifications. So I have to copy those demo, but its format is like:

>>> transposed = []
>>> for i in range(4):
... # the following 3 lines implement the nested listcomp
... transposed_row = []
... for row in matrix:
... transposed_row.append(row[i])
... transposed.append(transposed_row)

Needs to be turned to:

transposed = []
for i in range(4):
# the following 3 lines implement the nested listcomp
transposed_row = []
for row in matrix:
transposed_row.append(row[i])
transposed.append(transposed_row)

This leads to a fix of removing “>>>” and “…” and also indentations and it takes time.

So I decided to create a Chrome extension to help me out. This is quite simple, that when I copy the demo code, it removes those redundancies and be ready to be run.

I use this regex to catch it:

/^>>> |^... |^...$/gm

The rest is so simple, just several minutes for a simple extension.

document.addEventListener('copy', function(e) {
    var selectedText = window.getSelection().toString();

    if (~selectedText.indexOf('>>>')) {
        var fixedCode = selectedText.replace(/^>>> |^... |^...$/gm, '');
        e.clipboardData.setData('text/plain', fixedCode);
        e.preventDefault();
    }
});

Source code: https://github.com/ducfilan/Copy-Python-docs-code-extension

Advertisements

How to access the web server in VMWare Fusion on its host machine

Currently, I am in a team developing a web application that supports IEs. My development environment runs under Centos.

Some UI problems appear on IE but not other browsers. This situation leads me to be in need of reproducing those problems on my development environment to confirm if my issues are fixed. I tried to install IE on Centos using Wine, but it doesn’t work properly.

So, I think if I could access the web server on the virtual machine in its host?

Below steps are what I did to make it works.

1. Set the Virtual Machine’s Network Adapter to Bridged:

2017-05-22_171609

2. Get the IP V4 of the virtual machine using the below command in Terminal:

ifconfig
eth1 Link encap:Ethernet HWaddr 00:0C:29:11:C1:E8 
inet addr:192.168.0.178 Bcast:192.168.0.255 Mask:255.255.255.0
inet6 addr: fe80::20c:29ff:fe11:c1e8/64 Scope:Link
UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1
RX packets:536823 errors:0 dropped:0 overruns:0 frame:0
TX packets:241377 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 txqueuelen:1000 
RX bytes:537011299 (512.1 MiB) TX bytes:27427710 (26.1 MiB)

Now you can browse your VM’s localhost outside of the virtual machine (your host machine) by replacing “localhost” by “192.168.0.178“.

Absolute position table with padding

Today, I have a task of widening the tables to match 100% browser width to view more contents while keeping other elements stay the as they were.

pjimage

The problem is, I have so many tables to do (about 20 pages including that kind of table). I am too lazy to edit all of those pages. It really takes time and potential to introduce bugs.

So, I choose javascript and CSS to help me out.

Firstly, those tables have the class named “table_wide”.

We will use the CSS absolute position’s power of ignorance. We can make the table to be absolute with 100% percent width. But the problem is, it also ignores padding or margin. So our table will be stuck to the left and right edges.

Well, challenge accepted.

Absolute position ignores everything but it has top, right, bottom and left instead. However, top, right, bottom and left are not adapted to its width. So we cannot use padding properly.

We will use what we have to acquire what we want.


$(".table_wide").each(function(){
var paddingInPx = 10;
var windowWidthInPx = $(window).width();

// Calculate the width of table.
var thisWidthInPercent = 100 - (100/windowWidthInPx*2*paddingInPx);

// Create an empty div to fill up the space the absolute table occupied in the past.
$(this).after('<div style="height: ' + this.offsetHeight + 'px;"></div>');
$(this).wrap('<div style="position: absolute; width: ' + thisWidthInPercent + '%; left: ' + paddingInPx + 'px"></div>');
});

.table_wide {
    display: block;
    overflow: auto;
}

Well done! Challenge accomplished.

Jsfiddle: https://jsfiddle.net/ducfilan/p961moLd/

How to debug/inspect your mobile web page on a real mobile device (with or without real device)

When developing web apps for with mobile support, we usually use Device toolbar (Ctrl + Shift + M) on Google Chrome Developer Tools. But, the problem is that sometimes our layout or javascript code work on Device toolbar but not a real device and there is no dev tool on mobile browsers.

Luckily, Chrome Developer Tools provides us a really useful tool to debug our web page on a real android device on our desktop totally like what we do on desktop web pages.

Installation and interacting with Remote debugging are described here.

In case you don’t have an Android device in hand. You could use an Emulator. It works perfectly with me.

I use Genymotion, it’s really fast and stable.

You can use any mobile browser and be able to debug your web pages on that browser.

You can install browsers to the Genymotion Emulator by drag and drop your .apk file to the emulator screen.

Or you can install Google Play Store and get them downloaded just like a normal device.

The processes are described here.

Goodluck!

zsh cannot execute global npm packages

Today, I installed an npm package globally, no problem here.

Screen Shot 2017-03-11 at 2.01.37 PM.png

But, when I execute the package, there comes an error:

~  yo
zsh: command not found: yo

So, it means that the system doesn’t realize the path to my package. I confirm by using:

~/W/C/htnmaruko  echo $PATH
/Users/duchoang/.rbenv/shims:/usr/local/bin:/usr/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin

So that, we need to export the path to where my package is lying in.

Because I installed by -g parameter, so it is lying in global npm. In my case, it is being in ~/.npm-global.

Steps:

1. Export your path in ~/.zshrc (in case of using zsh, otherwise using ~/.bashrc) by  print it to your ~/.zshrc or ~/.bashrc (in case of not using zsh) file:

~/.n/bin  printf "\nexport PATH=\"\$PATH\":%s\n" ~/.npm-global/bin >> ~/.zshrc

Or just editing with vi:

~  vi /Users/duchoang/.zshrc

2. Now, fire up the changes:

~  . ~/.zshrc

3. And finally, the problem gets solved, the result we have:

Screen Shot 2017-03-11 at 2.03.28 PM

Now we can get back to our work.

The git error: “gpg failed to sign the data”

Today, I need to commit some pieces of stuff to my GitHub repository, but somehow this error comes I don’t know.

It’s really painful.

error: gpg failed to sign the data
fatal: failed to write commit object

After some researches on Google, I know that Github has implemented something called GPG to sign and verify work from trusted collaborators, using public-secret key mechanism. (refer: https://help.github.com/articles/signing-commits-with-gpg/)

My below guide is used on MacOS. For other platforms, please refer this link for Windows and this link for Linux.

So, to solve the problem, I have to config gpg to be able to sign commits. Note that from now, I will use brew to manage my installations. To install and know more about brew, you could go through its homepage: https://brew.sh

Homebrew installs packages to their own directory and then symlinks their files into /usr/local.

1. We need pinentry to read passphrases and PIN numbers in a secure manner. (For more information: https://www.gnupg.org/related_software/pinentry/index.en.html)

~/W/G/TalentHub-solutions brew install pinentry-mac

2. We need gpg of course, I use gpg2

~/W/G/TalentHub-solutions ❯ brew install gpg2

3. Now we are ready to generate our secret key, I chose all by default.

~/W/G/TalentHub-solutions  gpg --gen-key

Screen Shot 2017-03-10 at 10.35.20 PM

4. Once you have a private key to sign with, you can configure Git to use it for signing things by setting the user.signingkey config setting.

4.1. Get your secret key:

~/W/G/TalentHub-solutions  gpg --list-secret-keys

You will see something like:

Screen Shot 2017-03-10 at 10.40.35 PM

Then, B069A034 is your secret key.

4.2. Config your signing key:

~/W/G/TalentHub-solutions  git config --global user.signingkey B069A034
~/W/G/TalentHub-solutions  git config --global gpg.program gpg
~/W/G/TalentHub-solutions  git config --global commit.gpgsign true
~/W/G/TalentHub-solutions ❯❯❯ echo "no-tty" >> ~/.gnupg/gpg.conf

5. Point out the pinentry program to gpg-agent.conf:

~/W/G/TalentHub-solutions  touch  ~/.gnupg/gpg-agent.conf
~/W/G/TalentHub-solutions  echo "pinentry-program /usr/local/bin/pinentry-mac" >> ~/.gnupg/gpg-agent.conf

Now you will be able to commit to your git repository.

An example of how Excel can boost your coding productivity

During my working time in software companies, there are ton of cases which the support of Excel helps alot.
Today for an example.

I have to add rules to validate many fields with the similar name like below:

  • open1post
  • open1person
  • open2corp
  • open2post
  • open2person
  • open3corp
  • …and so on…

I need to create some code lines like below:

  • $val->add(‘open1corp’, $multi_lang_items[‘lbl’][23])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open1post’, $multi_lang_items[‘lbl’][23])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open1person’, $multi_lang_items[‘lbl’][23])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open2corp’, $multi_lang_items[‘lbl’][24])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open2post’, $multi_lang_items[‘lbl’][24])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open2person’, $multi_lang_items[‘lbl’][24])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open3corp’, $multi_lang_items[‘lbl’][25])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • …and so on…

So, in excel:

  1. First column, I store a list of fields, name it “Form control name”.
  2. Because, a label is provided to 3 fields, for example: “open1corp”, “open1post”, “open1person” use the same lbl 23.

So that, we have to calculate the same number for each open[x][post_fix]. In order to achieve that, I used the magic of mod like below formula.

Note that, 19 is the row number of the first open[x][post_fix] item.

=CONCATENATE("$val->add('",[@[Form control name]],"', $multi_lang_items['lbl'][",ROW()-MOD(ROW()-1,3)+4-2*(FLOOR.MATH((ROW()-19)/3)),"])
 ->add_rule('match_pattern', '/^[0-9]*$/');")

And the result we get:
Excel productivity
That’s it, now we can copy those code to our IDE.

How to auto compile sass/scss files in Eclipse

First of all, sass/scss compilation needs Ruby to work with.

So, ok, we will install it.

But, we need to use system wide Ruby, ’cause I tried with rvm but there comes some problems:

/usr/bin/env: ruby_executable_hooks: No such file or directory

So if you use rvm, switch it back to:

rvm use system

Now go to:

https://www.ruby-lang.org/en/documentation/installation/

Then to make sure that Ruby is successfully installed:

ruby -v

It should have some information like:

[ducfilan@localhost]$ ruby -v
 ruby 2.1.8p440 (2015-12-16 revision 53160) [x86_64-linux]

Now come to sass:

gem install sass
# su in case of permission errors

Once again to make sure:

sass -v

Some information like this means we’ve successfully installed it:

[ducfilan@localhost]$ sass -v
Sass 3.4.23 (Selective Steve)

Ok, preparation is done. Open your project in Eclipse.

Right click on it > Properties > Builder > New > Choose ‘Program’ then Ok.

2017-01-25_140725

We need to fill out some fields:

  1. Location
    • Get the location of sass using:
      • which sass
  1. Working Directory
    • Relative path to your folder, with ${workspace_loc:/…} as root. Use Browse workspace to make it ez.
  2. Arguments
    • --update ${workspace_loc:/QTEC-Web/public/sass}:${workspace_loc:/QTEC-Web/public/css} --sourcemap=none --style compressed
    • With:
      • –update: Means compiling when your sass file is changed.
      • ${workspace_loc:/QTEC-Web/public/sass}: Your sass folder
      • ${workspace_loc:/QTEC-Web/public/css}: Your output folder
      • –sourcemap=none: No generating .map file
      • –style compressed: Output style

For example in my case:

2017-01-25_141341.png

After that, don’t close the configuration screen.

Switch to Build options tab and check only following files, uncheck all others if they are pre-checked.

  1. Allocate Console
  2. During auto builds

Now you’re done, edit an .scss file and you will see the message of writing .css file in the output screen. If not, you’re doing it wrong.

What to do if your Rails application cannot connect to Mysql?

When I use my Mac to continue developing my Rails application using Mysql as the database system. It first initialized and developed in Ubuntu.

After bundling tasks, I move to rake db:create to initialize my databases for development and test environment. But the problem comes out:

Mysql2::Error: Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'

Ok, cd to the

/var/run/mysqld/

Oh, there’s no mysqld.sock there. Ok, so there must be the error as above error message.

So, I was wondering where mysqld.sock is in my computer? I was installed Mysql through brew and able to connect to Mysql by Mysql Workbench with no problem. So let’s see some variables. Enter to the terminal:

mysqladmin -p variables | grep socket

Provide the password, and then you will see something like:

screen-shot-2016-09-24-at-10-16-58-pm

| performance_schema_max_socket_classes                    | 10

| performance_schema_max_socket_instances                  | -1

| socket                                                   | /tmp/mysql.sock|

Wow, there comes in the socket line the mysql.sock file location

We have to connect through it.

After some research, I know that Rails settings the socket in the filedatabase.yml.

So, it’s EZ now, just replace the new found path.

It’s ok now. I can continue my work.

Fixing rbenv not update ruby system (rbenv version different from ruby -v)

Recently, I faced with the problem of not syncing ruby version with my Mac.

My project requires ruby version >= 2.2.2 but default version is 2.0.0.

I haved installed ruby 2.3.1  on my rbenv (ruby version manager) and set it global, but when i bundle install, there comes some error liked:

activesupport-5.0.0 requires ruby version >= 2.2.2, which is incompatible with the current
version, ruby 2.0.0p648

Even rbenv version shows:

2.3.1 (set by /Users/duchoang/.ruby-version)

I checked back with ruby -v, it shows 2.0.0. Oh shit what happened?

I searched and they said that I have to install ruby-build, ok but after that I reallized that it’s not the cause:

brew install rbenv ruby-build

rbenv rehash

I reallized that I’ve switched to zsh, so instead of ~/.bash_profile I need to rerun the following command to ~/.zshrc:

$ echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.zshrc
$ source ~/.zshrc

done.