TIL How to compile a .less file into css.

I’m so suspicious about LESS for css. But I hear only good things about it. It can’t be that bad, right?

My biggest concerns is that you compile something suspiciously like CSS into CSS. Can you gain anything at all in doing that? In almost all of the examples, you end up with less CSS, than you have LESS. Take the bootstrap.less for example, the framework from twitter, where 105kb of less ends up with 94kbs of css. Isn’t the point of the mix-ins and operations that you can re-use your code. Shouldn’t a few lines of LESS produce MORE CSS? It just seems inefficient to me.

But I can accept that file-size is not the point. My HOPE is that the point of LESS is that it makes things easier to maintain.

I tried to compile the bootstrap.less into css using WinLESS, which crashed, pretty violently, some kind of null error (I use a Japanese programming environment, so all error messages doesn’t make sense to me, but it seemed pretty bad.) Then I tried with SimpLESS, which failed almost as hard, but at least pointed out a error in my bootstrap.less. (So much for GUI’s).

Then I tried looking for plug-ins for my favorite texteditor (Sublime Text), and found https://github.com/berfarah/LESS-build-sublime. Which also failed compiling. But after updating a dependency (http://www.dotlesscss.org/) manually and editing the sublime-build files to get the correct path to my project (I hardcoded the path, so god may have killed a kitten on my behalf today), finally the less-file complied. And I ended up with a beautiful css file with only 4000 lines.

My projects has always been on a smaller scale. So I have a hard time seeing how one could possibly end up with even 1k lines . And I get chills down my spine if I get near 500 lines of css. Maybe less is just overkill for projects of my size. Or maybe that’s just bootstrap. I still plan to learn it properly. But that is good enough for one day.

Still no internet. But Im getting fiber at least. 9th of april. good times.

I’ve been working so hard on a crawler – load URi, parse HMTL, save cookies and authorization cookie, send POST data, just to log in and parse some data.

After lots of trial and error, I found my answer in the microsoft library. (Also using htmlagility to parse the html.)
http://msdn.microsoft.com/en-us/library/system.net.httpwebrequest.cookiecontainer.aspx
C#:

private void button3_Click(object sender, EventArgs e)
{
UpdateUi(State.CONNECTING);
string html = getHtmlFromUri(txtUrl.Text);
doc.LoadHtml(html);
authToken = doc.DocumentNode.SelectSingleNode("//input[@name=\"authenticity_token\"]").Attributes["value"].Value;
textBox4.Text = HttpUtility.HtmlEncode( authToken );

html = postAndGetHtmlFromUri(txtUrl.Text);
textBox4.Text = html;
UpdateUi(State.CONNECTED);
}

private string postAndGetHtmlFromUri(string s)
{
Uri uri = new Uri(s);
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(uri);
request.Method = "POST";
string postData = ""; //authenticity_token=" + authToken;
postData = "authenticity_token=" + authToken + "&uri=%2F_admin&account=XXXXXXX&password=XXXXXXX&commit.x=0&commit.y=0";
byte[] byteArray = Encoding.UTF8.GetBytes(postData);
request.ContentType = "application/x-www-form-urlencoded";
request.ContentLength = byteArray.Length;
request.CookieContainer = new CookieContainer();
request.CookieContainer.Add(cookies.GetCookies(uri));
using (Stream dataStream = request.GetRequestStream())
dataStream.Write(byteArray, 0, byteArray.Length);
try
{
using (HttpWebResponse response = (HttpWebResponse)request.GetResponse())
using (Stream responseStream = response.GetResponseStream())
using (StreamReader reader = new StreamReader(responseStream))
return reader.ReadToEnd();
}
catch (WebException e)
{
return "error: " + e.Message;
}

}

private string getHtmlFromUri( string s )
{
Uri uri = new Uri( s );
HttpWebRequest request = (HttpWebRequest)WebRequest.Create( uri );
request.ContentType = "application/x-www-form-urlencoded";
request.CookieContainer = new CookieContainer();

using (HttpWebResponse response = (HttpWebResponse)request.GetResponse())
using (Stream responseStream = response.GetResponseStream())
using (StreamReader reader = new StreamReader(responseStream))
{
cookies.Add( request.CookieContainer.GetCookies(uri) );
return reader.ReadToEnd();
}

}

Sometimes I have to fight so hard for the motivation to do anything at all.

If I set up a goal for the day, and put things on paper, it usually helps.
First. I must keep running my math experiment for my little study group. It’s pretty simple. I keep giving them ten math exercises a day. I use khan’s academy. And I time them. And I hope to see a speed improvement in about one months time. Is that too unreasonable?

I should buy small rewards for participating, to keep THEIR motivation up.

I have this game idea… (Well, who doesn’t have.)

After looking at too much Ookiku furikabutte, I had this idea for a baseball RPG. And as always, as long as you have the idea in your head, it’s the perfect game. It’s fun. It has rewarding strategy and decision making that are fun and on a scale that has never been seen before. In reality it’s never that easy.

The basic concept is that you play as a catcher and team manager. You start out with a small money pool enough to recruit one pitcher. Think of pitchers as Pokemon’s. You have to care for them and make them grow stronger. Or sacrifice them when not needed anymore. I’ve never played Pokemon or baseball, but I’m assuming that much might be true.

There is a bunch of available opponents, batters, which you can fight in almost any order. I’m still considering ways to unlock tiers of opponents or unlock new opponents if you beat some certain characters. At first I had this world map in my head, with different areas. But that stuff doesn’t intrigue me as much. So I’ll leave it for now.

The entire thing is built up around the shop and the achievements. I know everyone is not into that kind of gaming, but I am. :P The shop runs on in-game currency only. I despise in-game items that you can buy for real money and I also despise in-game advertisments. We gamers really have to stop buying games that only aims for our wallets. Send all those game devs a clear message. Quality in games should pay off. Not hidden micro transaction at every corner, DLC and 50% screen size assigned to ads.

Why does WP use both categorys and tags? How should I know what to use?

Do’s and Dont’s when you use css-sprites.

If you have many small images sprite maps are a must! CSS sprites are not that much work, if you do it right from start. You can easily go from 50 requests to 10 in a matter of a few hours,  I used fiddler2 to check requests.Great piece of software!

However. I went overboard. I only had eyes for the number of requests.

Next time I want to use CSS sprites, I should keep this in mind:
* Keep images I want to change often OUTSIDE your sprite map. It might seem obvious. But it’s so easy to only see your HTML-request count going lower. And not the extra work of maintaining a clumped up file.
* Keep page specific and global images separate.
If sprites is used only on one page, you don’t want it to load it on all pages. At first I didn’t give it a thought, and had to redo lots of it.
*
Group images with low amount of colors in one png sprite map.
* Photo like images (images with many colors
) goes in jpg.This should be obvious to anyone who knows the first thing about images.
* Photo like images with transparency. (32bit color pngs) makes for big file sizes. Those gave me trouble. For css sprites, you need to put those in a separate png, or the file size of your small images will see a huge impact.Or maybe just leave them as is. Especially if those are not in dimensions that will fill the entire sprite map. If you end up with lots of empty space in a png with large dimensions, file size might compress well, but it will eat memory for your users.
*Slideshows. Don’t bother making those into sprite CSS. I.e. Big banner with photos rotating. (My example 930×600 photos) If you take those photos and make into one big file, and then use javascript to transition between divs with CSS backgrounds. Your page will slow down, and probably be unusable on slower computers.
* Repeating images should be grouped with other images that repeats in the same direction. I.E. column backgrounds. To make them repeat as you wish, put them side by side. Horisontally repeating images such as button-backgrounds, or horizontal borders, needs to be put above and below each other.

sprite-global1.png   // PNG 8. Few colors.
sprite-global2.png   // PNG 32. Many colors + transparency.
sprite-global3.jpg   // JPG. Many colors. No transparency.
sprite-columns.png   // Column backgrounds needs help repeating, so keep those separate.
sprite-contact1.png  // Don't load sprites unless they are used on the page.
sprite-contact2.png  // I forgive you if you have just a few non global images.
sprite-contact3.jpg

And it’s hard to see why anyone would need three sprite maps for a contact page, but I think you get the point .

Running jquery (with cycle plugin) on a page that is already running prototype

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
              $(document).ready(function() {
                  $('#background').cycle({});
              });
  });      
</script>
<script type="text/javascript" src="jquery.cycle.lite.js"></script>

Embed pictures from picasa to your homepage. using php

        <?php
            function make_gallery($user, $album, $size){
                $rss="http://picasaweb.google.com/data/feed/api/user/". $user ."/albumid/". $album ."/?imgmax=800";
                $photos = simplexml_load_file($rss);  
                foreach ($photos->entry as $photo) {
                    $photo->registerXPathNamespace('media', 'http://search.yahoo.com/mrss/');
                    $thumbs = $photo->xpath('media:group/media:thumbnail');
                    echo '<a href="'.$photo->content->attributes()->src.'" >';
                    echo '<img src="' . $thumbs[$size]["url"] . '" alt="" />';
                    echo '</a>';
                }
            }
            make_gallery("username", "123456789123456789", 1);  // 0 = small. 1=normal. 2=large
        ?>

Credit for the line below. I would never had came up with that myself.

$photo->registerXPathNamespace('media', 'http://search.yahoo.com/mrss/');
Posted in php

After you’ve married in japan.

When you marry you get a spouse visa. You have to renew it, at first every year, later every third year.

When you have been in the country for five years, you get to choose to if you want a real citizenship, but according to Japanese law, you can only have one citizenship at a time, so you have to forfeit your native one, even if your country supports multiple citizenships.

You don’t have to become a citizen at all, of course, but then you have to renew your visa once every few years at the city office. That might sound easy, but it’s a pain really. Interviews and paperwork and you have to prove that you can provide for yourself and family, and you have no guarantee that they’ll let you stay longer at all. And of course, if you get divorced, you get thrown out. If you get in trouble with the law, you get thrown out.

Recently, all us foreigners with long term visa, got a mail saying the rules are changing. Nice colors and pictures and all (oh, someone has employed a PR firm!) , saying we can apply for five years at a time now! But reality is that now we have to report to the city office when we move or when we change jobs. So it’s more of a hassle now than before, and privacy got thrown out the window.

It’s a bit offensive to get such a “second-rate-citizen” label on you, but I personally don’t mind too much. No matter what country you go to, people have and will always have prejudice against foreigners. I just hope that this will show that foreigners behave. I HOPE foreigners behave.