Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

This Week I Learned - 2017 Week 30

Last week ramblings or if you like it, even more lengthy rants.


Two things I've learned for the past month. If you're not in the best state of health, both physically or mentally, maybe you should just stop doing any works and take a day off. And if you're not aware, wastage can happen if we don't resist and succumb to the temptation in this consumption-driven society. Impulse or curiousity purchases could be the two leading causes.


Thought Writer. An minimalist writing interface to capture your random thoughts. The main purpose of any blogging tools is to capture your thoughts and yet many blog engine (Blogger especially, yes we know that Blogger is a legacy product waiting to be discontinued) failed to use this simple idea shown below.
data:text/html, <html contenteditable></html>


Reducing instant gratification or just stop using Internet so much (due to dopamine rush). There are several well-thought comments on reducing this behaviour.


The Clean Architecture. So many different names but basically all are referring to the same thing. Everything old is new, everything new is old.


Buying PSU? Full list with filtering or by different review sites or database. Or checking the tier list and the white list. Too many choices? Saw on someone's forum signature, go for these brands and models instead.

  • EVGA GS/G3/G2/GQ/B2
  • Antec High Current Gamer/Seasonic M12/S12
  • Cooler Master V-series
  • XFX/Seasonic anything bar the XFX XT
  • Corsair RMi

Culture differences when comes to work. Either way, without any monitoring and moderation, people will either game the system or just pushing the boundaries.

This Week I Learned - 2016 Week 42

Last week post or the whole series.

Interesting week indeed. It has been a while since I last encountered so many different type of personalities who want or don't want to be a developer.

As usual, what have I learned this week? The usual stuff.

If you're running on GNU/Linux and want a way to manage different Windows OS through Vagrant, you can try this Vagrantfile. Installation and setup is pretty much straightforward, just make sure the Vagrantfile is downloaded. Unfortunately, the login still fail to work.
$ sudo install virtualbox vagrant
$ vagrant plugin install winrm winrm-fs

$ mkdir vagrant_win
$ cd vagrant_win
$ wget https://goo.gl/ATpaEY
$ IE=Win7IE8 vagrant up

Sanic, Python 3.5+ asynchronous web server. The discussion at HN seems rather interesting. While this is nothing new, asynchronous database layer like asyncpg seems rather userful to improve your DB query speed.

Issue with Babun's memory conflict after Windows updates? Try rebasing, not that Git rebasing thought. Cygwin still is the better and prefered choice for Unix experience in Windows. Yes, I know there is Bash on Windows.
1) Exit babun.
2) cmd /c %SYSTEMDRIVE%\Users\%USERNAME%\.babun\cygwin\bin\dash.exe -c '/usr/bin/rebaseall -v'

Customozing HTML's file inputs. Probably the most comprensive guide on different techniques to change the default behavour.

Web framework benchmarks. The Round 10 has one of the best humourous write-up.
The project returns with significant restructuring of the toolset and Travis CI integration. Fierce battles raged between the Compiled Empire and the Dynamic Rebellion and many requests died to bring us this data. Yes, there is some comic relief, but do not fear—the only jar-jars here are Java.
What happens when you rename a branch in Git? Plenty of things. First, you rename it locally. Next, you rename it remotely (is the same as remove the old branch and add a new branch). After that, either you update your upstream URL or checkout a fresh copy of the said new branch. Lastly, you may needs to batch update your commit messages.
$ git branch -m new_name
$ git branch -m old_name new_name
$ git push origin :old_name
$ git push --set-upstream origin new_name
$ git filter-branch -f --msg-filter 'sed "s/foo/bar/"' master..HEAD

The database schema for StackOverflow is publically accessible. I was surprised that it's such a straight forward design and nothing fancy at all. Well, is just a CRUD app with some additional tweaks here and there. However, the ranking formulae is far more interesting when compare to different algorithms used by other popular forum-like sites.

So may ways to iterate through the Perl's array. Implementation 1, 4, and 5 is what I normally used but the 5th method is still my favourite.

Source code syntax higlighter through Javascript? Just found out today, besides highlight.js, there is also Prism.js. The former seems to have more languages support but the later is used for quite a few popular projects.

NBA season going to start soon, maybe is time for me to learn some Statistics through certain API? Can't wait what surprises the 2016/2017 season will give us.

This Week I Learned - 2016 Week 38

Last week post or the whole series. Interesting stuff learned this week.

Encountered this error message when checking a USB thumbdrive with `fdisk` command. The particular thumb drive was burned with an ISO file through the `dd` command.
$ sudo fdisk -l
......
GPT PMBR size mismatch (1432123 != 15765503) will be corrected by w(rite).
Disk /dev/sdc: 7.5 GiB, 8071938048 bytes, 15765504 sectors
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disklabel type: gpt
Disk identifier: 8C18967D-CB41-4EF1-8958-4E495054958D

Device     Start     End Sectors   Size Type
/dev/sdc1     64   17611   17548   8.6M Microsoft basic data
/dev/sdc2  17612   23371    5760   2.8M EFI System
/dev/sdc3  23372 1432075 1408704 687.9M Microsoft basic data

Follow the instructions given, running the device through `gparted` seems to resolve the issue.



Perl's hash initialization, referencing, and de-referencing. Seriously, I need to get this correctly and read more Perl's FAQs.
# Normal way, without referencing.
%foobar = (a => '1', b => '2');
say $foobar{a};

# Using referencing. More readable.
$foobar = {a => '1', b => '2'};
say $foobar->{a};

# Alternatively.
$foobar_ref = \%foobar;
say $foobar_ref->{a};

Finding properties of the event target in Javascript.
$('foo').bind('click', function () {
    // inside here, `this` will refer to the foo that was clicked
});

How do you add a trailing slash if none found? Regex, regex.
$string =~ s!/*$!/!; # Add a trailing slash

Protocol-relative URL. While we're on HTTP protocol, it was made aware to me that the anchor tag should be the last item on the URL.

CSS image sprite technique using HTML unordered list. One of the issue encountered is if you have single line text link, how do you align the text link vertically in the middle? Make sure the `line-height` is equal to `height` for the `li`` element.

Git merge conflict? Just abort the whole process.

Similarly discard all changes on a diverged local branch, two ways. First method is to my liking.
# Method 1
$ git branch -D phobos
$ git checkout --track -b phobos origin/phobos

# Method 2
$ git checkout phobos
$ git reset --hard origin/phobos

Debugging Dockerfile. Something I learned this week but in a separate and longer post.

Starting a new software project but not sure about which technology stack to use? Read this slide as a guide.






This Week I Learned - 2016 Week 26

Last week post or the whole series.

What the difference for the Git config option of 'push.default'? To prevent yourself from committing and overriding local branches to remote branches, stick with 'simple' way of 'git push'.

Why you need to support Perl's PSGI?

One of the dilemma faced by any programmer, what should I program? (via Slashdot) Someone if the forum joked that "I know how to post a comment, but I don't know what to say." Funny indeed but true as well. Yes, you can learn one programming language per year, but in the end, it will be quite a waste if nothing is created.

12 years of web programming (via Reddit). Sad but true. Layer of layer of layer of abstraction which in the end, just to produce HTML.


Another approach of subroutine parameters validation in Perl. This is from REST::Client. "Tim Toady" at work here using Carp module.
croak "REST::Client exception: First argument to request must be one of GET, PUT, POST, DELETE, OPTIONS, HEAD" unless $method =~ /^(get|put|post|delete|options|head)$/i;
croak "REST::Client exception: Must provide a url to $method" unless $url;
croak "REST::Client exception: headers must be presented as a hashref" if $headers && ref $headers ne 'HASH';

Which Is More Readable or Preferable?

Going through my daily subscribed feeds, I've notice both the monitors were displaying two ebooks, published to the web differently. On the left, is the The Feynman Lectures, and the right, Learn Web Development: The Ruby on Rails Tutorial. Both are rendered using Georgia font but at different size and layout.

If you ask me, I'll prefer the left screenshot. Straight-forward, clean, good contrast, and make the best use of the layout. Good example of a good hypertext document in the Web.


Centering a div in 2014

Sad but true, yet in 2014, we still need to resolve to ridiculous hacks to center a bloody div tag. Changes in the web standard still moving at a slow pace, mostly due to the monopoly and high Internet Explorer browser market share.

Not to mention the fixed or sticky footer. Sigh.

Extract Hyperlinks Using Python and PHP

Is always a great fun if you can rewrite certain code from one programming language to another. I was looking at this short snippet of Python code by unconscionable which request a page and dump certain comments links.

Sample Python code reproduced here.
import urllib2, re
headers = {'User-agent': 'I promise I\'m not doing this a lot',}
req = urllib2.Request("http://www.reddit.com/r/BuyItForLife/search?q=headphones&restrict_sr=on", None, headers)
website = urllib2.urlopen(req)

html = website.read()

links = re.findall('"((http|ftp)s?://.*?)"', html)
for i in links:
    if 'http://www.reddit.com/r/BuyItForLife/comments/' in i[0]:
        print i[0]

My rewrite using PHP using file_get_contents and stream_context_create, something new for me.
<?php

$options['http']['header'] = "User-agent: I promise I'm not doing this a lot'\r\n";
$context = stream_context_create($options);

$url  = "http://www.reddit.com/r/BuyItForLife/search?q=headphones&restrict_sr=on";
$html = file_get_contents($url, TRUE, $context);
preg_match_all('/"((http|ftp)\s?:\/\/.*?)"/i', $html, $links);
foreach ( $links[1] as $link )
{
    if ( strstr($link, 'http://www.reddit.com/r/BuyItForLife/comments') )
        echo $link, "\n";
}

Comparison of both code snippet.
  1. Regex is simpler and more readable in Python. You don’t need to escape certain character (example is forward slash /) like in PHP. API is simpler and make more sense, result are returned instead of using callback in PHP where you have two sets of array.
  2. file_get_contents() is awesome and dangerous as well for reading both offline and online file. Nothing equivalent is found in Python.
  3. Finding and matching string is way more readable in Python.

Parsing HTML Document Using PHP Native Extensions

While there exists many third party libraries to parse and process HTML documents, these libraries are too bloated when you just need to write a simple single file script. Hence the question is it possible to parse HTML using native built-in PHP core extension ? Yes, through DOM and DOMXPath. However, it will take a while before you’re familiarize with both APIs.

Below is a sample code to download, parse, and print all links from reddit main page. Note that when parsing HTML5 document, you will encounter "Tag time invalid in Entity" warning as DOM will default to HTML4 Transitional DTD which does not contains newer HTML tag. Just use @-operator to suppress the warning.

<?php
$html = file_get_contents("http://reddit.com");
$dom  = new DOMDocument();
@$dom->loadHTML($html);

$finder = new DOMXPath($dom);
$links  = $finder->query('//a[@class="title"]');
foreach ( $links as $link )
{
    echo $link->nodeValue . "\n";
    echo $link->getAttribute("href") . "\n\n";
}