Month: May 2016

Normalize Your Website CSS

Normalize Your Website CSS

I have been wondering back then when I design a website for serious work for the first time. It seems that website theme out here has a similar design but still maintain its compatibility with many browsers.

And what make me more curious is that when I browse the CSS style on their design, it seems that they are replacing a lot of style from the previously defined style. It makes me curious because why not just change the previous style rather than replace it?

It as if they have some sort of template or something and then they replace it with their own style.

And my question is unanswered for a year until I work for WordPress design later. I never design WordPress theme at this time so I can’t help to learn it from the default theme that comes with WordPress. And then I meet with the answer when reading the CSS that comes with the themes.

CSS themes that come with the WordPress has pretty and well written if I may say. I’m struggling with this since forever. I don’t know how to make CSS file more readable, at least I don’t have any idea how to do that. It gave me an idea on how to write it nicely and now I use the same writing style or structure they use in CSS on WordPress default themes.

Back on topic, it seems that my assumption is pretty much correct. They have some CSS template or some kind of base style. But rather than using them to design itself, it normalizing default style for HTML element so it can have a consistent look on different browsers.

Like button for example, on Chrome default button is pretty much square bit silver gradient background and gray border. On safari, the button has round button with a blue-white gradient on the background. To fix this, you must define more CSS so it looks consistent on both browser like for example by defining button is always has a gray background and darker gray as the border.

To make it more efficient, you can create your own CSS template or collection or normalizer (whatever you want to call it) that act as the default style. If you found any inconsistent HTML style, you can just add it to the template.

Like zoom: 1; fix for example. You use it to fix IE zoom bug. It general and common fix and mostly you will write it on all of your website design anyway. With CSS template, you don’t have to write it again and again. Think of it as default style to make the HTML style consistent across the browsers but you can replace it with your own CSS.

Maybe some of your website design still need to be fixed individually even if you have CSS template. At least you don’t need to do the work you have done many times like fixing IE zoom bug.

There is one problem tough. To have many collections of fixes like that you need many experiences on website design and many hours to write the collection. There is some alternative by using CSS that made by other people such as framework like bootstrap or some of your choice.

No matter what you choose, I think it better for you to use collection from what people make and share rather than define your own. It will save plenty of your time.

CSS Framework

You can choose anything you like. If I have to use the CSS framework then I will recommend to use bootstrap since they are pretty much provide many style for you.

bootstrap

I personally don’t really like CSS framework. They are hard to change since they modify the default style too much. It so much works to completely change CSS framework style.

If you don’t plan to define your own style or modify it too much, then I suggest you use the CSS framework rather than making your own. It doesn’t require much work but you got a nice and consistent design.

The downside is, your final design may not really too far or too different from the CSS framework you use. Basically, the Look & Feel will pretty much give away that your design is using some kind if template. And the size of your CSS size is big since there are styles in the framework you don’t use.

Or if you want to define your own style but only want to have a consistent look on default style then you may use the next solution.

CSS Normalize

I prefer this solution and always use it. It will normalize the default HTML element style and make it consistent across the browser but don’t change it too much. It just fixes inconsistency look on a different browser by defining default style in the CSS. With this, you can define your own CSS after the normalize one.

So even if I use this CSS normalize, it won’t feel like I use some sort of framework or parent theme as my base CSS style. It requires more work since it will only define the default element style but at least you don’t have to define your own fixes like IE zoom bug for example. And it size is relatively quite small since it will only define default CSS style.

You can download Normalize CSS or define your own normalizer. Either way put it on your CSS as the first and default style and then you can define your own style after it.

css normalize nicolas

If you choose to download it, it supports most major browser like Chrome, Firefox, Opera, Safari6+, IE8+, etc. You can read it more on their website and it seems that many companies have been using it as their website CSS base. So I think it worth to check it out.

That it for now, if you have any question or suggestion you can write it in the comment bellow. Thanks for reading!

 

htaccess for Friendly URL on Web

htaccess for Friendly URL on Web

Have you ever wonder how to change your website URL to be more friendly and pretty one? Like for example, you can see at this site, I use URL like this:

http://www.hernantas.com/2016/05/page-name

Rather than

http://www.hernantas.com/?p=123

I’m sure the first one is friendlier and prettier than the second one.

But the question is, how do I do that? Not for the WordPress one, but for general one like the website you created by yourself.

Normally, when you write URL like this:

http://www.hernantas.com/subdir/subdir2

Your server will access subdirectory subdir/subdir2 from your root server directory. So if you want to use friendly URL, you must write index.php file in each directory you can handle. This isn’t possible in practical use and inconvenient. With .htaccess or server configuration, you don’t need to write it in each subdirectory instead, just write one in the root directory and it will handle all of the user URLs.

There is couple way to do this, but I will use the .htaccess one since it simple and don’t modify server configuration.

Requirements

First, you must have a Web server. (Duh)

Not joking. I have been asked by people who think that website exists just with HTML, CSS, image, and JS. Well, that actually quite true, though. Since the server-side script is just generating that type of file so it can feel like dynamic site rather than static.

I’m sure you already know this but make sure that you have a Web server and it is running correctly and smoothly. And make sure your Web server has to allow override or .htaccess will be ignored. You can see how to do that on apache site.

So, How to do That?

First, open your website directory. In the website directory, create a new file called .htaccess. Edit that file and copy the script bellow to your new .htaccess file.

The first line of the script above is to enable rewriting configuration file. We need to do this since we want to rewrite rule on server configuration so we can redirect any requested URL to the single file.

The second line one is the condition of the rule we will make. It will rewrite the URL except for the file or directory is written in the condition.

The third one will rewrite server rule that any requested URI will be handled by index.php file. With this configuration override, URL like this:

http://www.hernantas.com/subdir/subdir2

Will be translated to:

http://www.hernantas.com/index.php/subdir/subdir2

But don’t worry, it won’t change anything on the user browser. It will only affect the server. I’m sure it is simple enough and don’t really need too much works.

That it for now, if you have any further question or suggestion you can write it on the comment bellow. Thank for reading!

Twitch Problems, As Viewer

Twitch Problems, As Viewer

I have been using Twitch quite frequently in the last couple month. It’s quite different from Youtube because what you watch is real-time action with a delay for seconds or minutes.  That mean any mistake made in the live stream can’t be undone or edited. But hey, that what make it different from Youtube. You can enjoy the real-time interaction between streamer and the viewer in real-time. And I found that it’s quite enjoyable.

twitch-home

In this post, I won’t write on how great twitch is or its strength compared to the other site similar site. Rather, I want to discuss any problem I discover when using it. Just like any other great product out here, Twitch has some issue and always will, but not something too serious, just inconvenient. And I will discuss that in this post.

Before we begin, I must warn you that this isn’t some hate post about Twitch or something like that. Just my analysis for the Twitch and what can be improved to increase user experience to the Twitch user. Not all of the issue I write in this post has a solution, at least for now.

So, with that in mind, let’s get started.

Chat Move Too Fast

Chat in Twitch channel, especially the popular one is too fast to follow. The more popular the channel is, the faster chat moving. People like me, who like to follow the conversation and enjoy streamer and viewer interaction, can’t keep up and enjoy that kind of thing. Mostly, the viewer just spams the chat and streamer just quick-filter and ignore most of the chat.

Not that it’s streamer or Twitch or viewer fault . It just the weakness from live streaming. I don’t think there is an easy way to fix this so I doubt it will be addressed anytime soon.

In a nonreal-time video like in the Youtube, comments can be ordered by top comment or newest. This is good since we can just get smaller comments to read, even tough some top comment usually contain hate or flame or spam comment. I know it’s not perfect, at least it a solution and it can be improved.

But Twitch chat? I don’t think you can fix this with the same way you fix offline content like on Youtube.

Boring Ads, Its Too Few

Ads or Advertisements especially the video one is pretty annoying. They disturb the viewer when watching the video. It’s fine if it in the beginning, but when it in the middle of the video, you can get interrupted. Just like TV.

I hate ads and don’t want to watch any ads. But it not like I don’t understand why they put ads and blame or dislike them for that. It just I personally don’t really enjoy watching with ads in it. That why even if I hate it I don’t use Adblock to block them. Well, I still use them for annoying and disturbing or shady ads, but mostly I don’t use them at all.

But the ads in twitch is too few. Sometimes I can watch the same ads 5 times in a row. This is, of course, bad for the user. It will make the user think the ads played too often. Even if you play them every 2 hours, users can become really aware of them if they meet the same ads too often. Heck, I’m sure they remember and can say all the word that said in the ads.

No Old Stream?

Twitch removed the stream that more than 2 weeks old by default unless the streamer set the video to be highlighted. I don’t know if this is because they can’t store that much video or because they think twitch is more like live video streaming rather than like video streaming like youtube so it’s fine to remove very old videos.

Either way, for a user like me, who watch a video so much that it become my TV rather than actual TV and want to watch the older video since the streamer I watch don’t stream that long. At least not as long as I play the stream.

I don’t blame them since they have a life too, but I want to watch more. So I watch their old video to compensate that. But I can’t since Twitch remove the video that more than 2 weeks.

This is not experience breaking, but it would be nice if they don’t remove them. I’m sure I’m not the only one who do this.

Buffering Problem

This one of the thing I found really weird. I have a decent internet connection, not too good but good enough to be able to stream video without any hiccup. But I still have a problem with Twitch.

I don’t know why but high or source quality is not available for me because it always buffering. FYI, Twitch High resolution is only at 720p. I can play 2K videos without any problem on Youtube.

I have an idea why this happen but I’m not too sure since I don’t really test it with a proper test. But I think that the problem is not about the internet speed, rather than internet latency. By latency, I mean that how long it takes from my computer to sent request to receive the response from the server.

How do I know this? I tried to increase my buffer size when streaming and this problem has gone completely. No buffer, no hiccup. Just smooth stream video. If my internet speed is the problem, even if I increase buffer size there is no way it won’t buffer since it can’t keep up with the video. But if I increase buffer and it can be fixed, then there is something in the

But if I increase the buffer size and it is fixed, then there is something in the stream process that makes downloading slower or don’t have enough time to download it. The only thing that comes to my mind is response speed.

I don’t know if this true or not, but this issue really exists

Heavy CPU Usage

I only realize this problem recently since I think that nowadays every render thing like image, video, or animation use hardware acceleration to increase their performance. Surprisingly, Twitch didn’t use hardware acceleration, at least not for the core process like rendering.

How do I know? See this CPU usage in my PC.

twitchUse

Almost 50% for a single video? I don’t believe it will use this much resource to render the video unless they don’t use hardware acceleration.

I have been making my own video player back when I was in high school for fun and I know how heavy it is to play high-quality video. But then I improve them when in college to use hardware acceleration rather than a normal render. The result  is pretty much I can say it doesn’t really use CPU resource. It still does of course, but it so small that it not that noticeable.

As far as I know, Twitch is using flash for playing it videos. But I think that Flash is using hardware acceleration to render so I don’t think this is Flash issue.

According to this Reddit post, there is 2 class you can use in Flash to render video. “Video” and “StageVideo” class. Class “Video” one is too complex to be fully optimized using hardware acceleration. It can but not all. “StageVideo” can and mostly guaranteed to be hardware accelerated. I don’t know why, but it seems that Twitch choose it better to use “Video” rather than “StageVideo”.

This way, the only way for it to be fixed is using a different client to stream to twitch site like livestreamer, or wait for Twitch to fix it.

I think this is all the problem I find and encounter while using Twitch. Once again, this post is not some hate post or critic post to blame or something, just some kind of analysis on Twitch.

If you have any further question or suggestion, you can write it in the comment section bellow. Thank you for reading.

Create Clean Branch in Git

Create Clean Branch in Git

Normally, whenever you create a new branch, you need the original branch and then you branch them. The problem is, they have a parent branch. The commit history from the original branch will be carried to your new branch too. This is intentional and not the git issue. That how git branch supposed to be work.

SourceTree new Branch

Normally, you don’t need to create a completely new branch. Rather, you create a new repository. It new project anyway, so it best to use a different repository. Or maybe just change it gradually.

But, sometimes you need or want to create a completely new branch without any parent but still in the same repository. For whatever your reason is.

You may don’t know this yet, but git has a command to checkout new branch without any parent. It called the orphan branch. With this command, you can create a completly new branch and its root won’t have any connection to the other branch. But it will still have previous files in the repository directory. Don’t worry about that, you can remove it later after the checkout process is done.

So in short, what you want to do is to create a new orphan branch, clear the file and remove file history and then add the new file for your new project. Here is how to do it.

First, create a new orphan branch. It has the same command as git checkout but with the --orphan parameter.

git checkout --orphan <newbranch>

Second, you want to remove any old file in the repository directory. Either you delete it using file explorer, command or by any method you prefer. If you are using git rm command, it may look like this.

git rm --cached -r .

Dot “.” character at the end of the command is intentional. That mean it will remove any files from the current directory which is your repository directory. -r parameter mean is it will remove recursively to ensure any files is deleted.

And that it. Simple right?

If you have any further question or suggestion, you can ask me in the comment bellow. Thank you for reading!

Playing Torchlight II Again

Playing Torchlight II Again

Recently, I got the urge to playing some Hack & Slash Action RPG games like Diablo or Torchlight. I miss the feeling of grinding, build, raid, spell spamming, etc from that type of games. I know some activity like that can be boring, especially grinding. Urgh, who like grinding in video games. But still, I miss it.

TL2 banner

The problem is, which games should I play?

I have been playing the original Torchlight and the second one, on Steam of course. I don’t really want to play it again since I have been playing it too much before, more than 200 hours. There is so much great game out here, playing and dedicated myself to only one game is kind of boring and tiring.

I play both original Diablo and Diablo II but I never play the third one, Diablo III. I want to try and play it, but it really expensive. If it on Steam, I definitely buy it. Other than that, well, maybe later. I didn’t buy it back then since the review and people said that it not that good. But now I heard that they update it regularly and it becomes good enough.

Either way, I still want to play it. Curious you know.

For now tough, since I only have access to Torchlight II, I can’t help but play this game again. But now, I will play it with a mod and custom class.

I use this Steam Workshop Collection called Torchlight II Expanded Experience Collection. If you still have any interest to play Torchlight II again and want to mod it, you may want to check it out. It no vanilla breaker mod, so you can still feel like it was Torchlight II but with more stuff in it and some changes there and there.

TL2 Expanded Experience

And I’m surprised, the game become so much harder. Too much I think. You can’t help but do cookie cutter strategy early game.

And the trap. Before you can just ignore any trap, they didn’t really deal too much damage. But with this mod collection, you definitely want to avoid any of them. Poison will deal huge damage every seconds. I try to use a potion to prevent my health to reach 0 but its healing point is even with the damage it deals. So if there is an enemy and it damaging you, you can’t really heal your health, except using skill or spell or a second potion.

Still, I’m happy with it. It just too boring before since I can just play it easily with my Berserker. But I can’t do that anymore. I can if I lower the difficulty, but I don’t want to. After I got the taste of playing on the harder difficulty, I just can’t come back to the easier difficulty. The game will become too boring.

Just like before, after playing it several hours, I get the same feeling when I play this game when it first released. It’s too normal. It is hard to describe how I feel about that. Not too good but not too bad either. Hard to say.

Still, it the only game I have with that genre. Maybe I should try other game like Diablo III or Grim Dawn for the next game.

Some Youtube Annoyance

Some Youtube Annoyance

Youtube, the biggest video sharing website. Well, no need for me to explain. I’m sure you know about it.

I’m sure you enjoying watching video on youtube as it is, but I feel like it can improve a bit more. I’m using Youtube heavily, especially when I’m working. I don’t know why, but when I’m working, I feel more productive when I play some videos on my second screen. Even if I just listen to it.

Youtube_Home

Some important thing you must know before reading this post further. I don’t have any intention to do some bad mouthing or judge them or something like that, only discuss what Youtube can improve. Just a small minor detail that can be added without changing it too much. And I think it worth to discuss since they may be overlooked and small, but may can improve user friendliness.

So, without further ado, let’s start…

Reverse playlist

I wonder why, but they didn’t make this feature. Since they have playlist feature, why not make reverse order feature with it.

I’m not talking about playlist owner. I know playlist owner can change the order of the playlist via playlist settings like by date, by popularity, etc. I’m talking about in the normal user that play that created playlist.

For example, when you open some playlist, there are buttons to “play all”, “share”, and “save”. Why not add some more like “Play In Reverse” or “Play From Older to Newest” or something like that.

Youtube Live, Where Are You?

I know, just like Twitch, you can do livestreaming on Youtube. But suprisingly, many people don’t even know youtube can do that. At least according to people I know.

I know since I watch Youtube a lot and read the news about it. But it doesn’t get that much exposure on Youtube.

Look at twitch for a moment. What did you see?

Twitch_Home

You will see some featured channels that are live streaming at the moment or some featured games on the front page.

I didn’t mean they should copy or imitate Twitch. Twitch is video live streaming website and they offer live streaming as the main feature. They want to expose that main feature as much as possible, they want people to know about it. So, when people visit their website, people can tell that their website is some (gaming?) video live stream website.

Youtube is  video sharing website and that the main feature of Youtube. Of course, they want to expose that feature on the front page. And I think they do pretty good job doing that.

But what I mean is if you have some feature that people want to use often and know, don’t hide it. If people don’t know about some feature, it same as if it doesn’t exist in the first place.

If you need to open 2 page or more before you can reach the feature you want, I consider them as the second feature where users don’t really use it frequently. Like privacy settings for example or copyright claim. Most people don’t use that feature, maybe once or twice but not always. So they can be put on the second page like settings for example.

But live channel? I think you want to put that in front or expose them in the main page.

One of the reason is, they are live video. Whatever they are doing, they do it now (maybe with some delay). It has limited time to watch. If you miss it, even if you can play it after it ended, you may can’t get the same feeling as watching it live.

Second, at least you want to tell people that Youtube can be used to stream some live video.

This may need to do some major change to Youtube. But I think it worth to mention since Youtube already has this live stream feature and since it didn’t really well know, they need to tell the user more about it.

Default Resolution

Youtube can support many video resolution, be it high resolution like 2K or 1K resolution or smaller resolution like 480p or 320p. And it can be set automatically depend on your internet speed.

But here is one problem, there is no option to set default resolution.

Why is this a problem? Sometimes, when you play some video on the youtube, it fails to detect my internet speed connection and set it to low resolution. I can play 2K resolution without a problem. I don’t why this happen, though.

I don’t think there is an easy fix for this. Since when you load the page it may need all of the bandwidth. So it will put heavy traffic to my connection and fail to detect my actual speed. But at least they can let me set the default resolution for it. It may make the video loading slow at first when the page is still being loaded but at least I rather wait for 5 seconds for a video to load rather than watch it in lower resolution. I think, it not just me that feel this way.

Conclusion

I’m sure there are more feature people, some of them may need to change a lot of thing. But I think this kind of feature I write in this post can be added without too much change or work.

Well, some of them can be fixed with plugin though…

I’m sure there is more I can add but for now, I think this is small and the most important thing they can do to improve Youtube without doing too much change or work.

If you have any idea, question, feedback or request what to post next, you can write it in the comment bellow. Don’t worry, it all free. Thanks for reading.