Tag: web

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

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!

Avoiding SQL Injection in PHP

Recently, I’m reviewing some web project that made using PHP. It nice website, responsive and can support both PC and mobile display. But, it seems that they didn’t keep security in mind when they develop that website.

By security, I didn’t mean that unauthorized people can access certain login-only page or something. But it seems that they still trust user input naively.

Of course, they still have some sort of validation, but it only work on username or password. I still can do some SQL injection as long as it wasn’t username and password. I can input thing like this:

And when I asked if they know that their website has this kind of vulnerability, they said they don’t know. Security is overrated huh.

But I’m amazed that they didn’t have any security issue to this day. I guess they are quite lucky.

So, how we avoid this kind of problem? I know some ways to fix this kind of issue, and they are pretty much easy to do.

Avoid Using SQL Special Char

This makes sense since the cause of this kind of issue is because user input contain SQL special char and it makes your SQL syntax bugged. You can use any validation to only allow some character to be passed like alphabet or number only. Maybe with some kind of regex validation like this:

The code above will only allow the username to be an alphabet, number, underscore or hyphen and must in 5 to 16 character length.

I think that this is what I do when I started doing web programming 7 years ago. I naturally thought that to avoid this, I just need the user to not input those problematic characters.

But even if I tell you can avoid SQL injection using this kind of method, I won’t recommend it for you to rely on it. Sometimes, you can’t really avoid inserting this special character to your database.

It’s better to use the next solution.

Using Mysql Escape String

One of the fixes you can do is using mysql_escape_string or mysql_real_escape_string, or similar function on MySqli. As far as I know, this is the most common and most known way to avoiding SQL Injection. This will let you avoiding SQL special character like apostrophe (‘) and quotation (“) mark and you can use it like this:

Now you can avoid any kind of SQL special character in your SQL syntax. The downfall using this code is that you need connection to your database server first. This can be inconvenient if you are using this method before you have connection to your database server. I have this code snippet to mimic how

I have this code snippet to mimic how mysql_real_escape_string work and avoiding special character and you can use it on your project if you want:

You can make this as global function or static method or whatever method you prefer.

There is some important thing you should know, in the previous version of PHP I don’t know which version. There is a bug in mysql_real_escape_string escape routine and it become unreliable to escaping SQL special characters.

So I recommend you using the next method for avoiding SQL Injection.

Use SQL Binding

This one is my most recommend method to avoiding any issue like SQL injection. By using SQL Binding like mysqli_stmt_bind_param, rather than replacing, escaping and securing the input string, it let you bind your input to be passed when using mysqli_prepare. And it not really that complicated too, look at the code bellow:

You just need to prepare your SQL syntax statement using mysqli_prepare and then bind them to your input variable using mysqli_stmt_bind_param.

If you use any kind of class to warp database function, you may find this method to be unimplemented because mysqli_stmt_bind_param accept dynamic number arguments but you can’t really create a method that accepts dynamic number arguments.

Fortunately, there is some kind of workaround using ReflectionClass`. which you can do it like this example code:

With the code above, you can pass many arguments with an array. You just need to define your arguments order as if they are an array, and pass it using invokeArgs.

I think that all you need to know about how to secure your website from SQL injection. One tips I want to give is that don’t trust any kind of input that inputed by the user. You don’t want to learn this the hard way.

If you have any question or feedback, feel free to write them in the comment bellow. Don’t worry, it’s free. Thank you for reading.

How to Run .phar Files

Couple days ago, when I working on a web project for some developer company. They ask me if I can tell them how to create API documentation like the one I use in my own framework. By API documentation, I mean like this one

MangaReadDocs
My personal project 🙂

They know that I use apigen to generate the documentation but they don’t know how to use it since it not an executable file like exe or bat which you can just run on click.

I know there is a documentation on how to use it. In the documentation, it says that there is 2 way to run which you can do with an ease, one with composer and one with .phar. But it seems that they are not clear enough for a people that aren’t familiar with it.

In this post, I will only write about how to use .phar since it mostly pretty simple. And it’s not specifically only for apigen but you can do this with other .phar file too.

What is .phar file?

PHAR (PHP Archive) as the name suggest is an archive file which contains PHP application in single file. Usually, PHP application always has multiple files which you must copy all of them if you want to run the application.

This can be inconvenient since missing one file mean your application can’t work properly or even won’t run at all. To fix this, we can use PHAR file to combine all our PHP files into one file with extension .phar.

Different from general archive file like .rar, .zip or .7z which you must extract the file first before you can run the file inside it, you can just run your PHP application without extracting the phar file.

So, in short it will make your life easier.

Requirements

PHP

First, you must have PHP installed on your PC. If you are on windows, you can use web server package like xampp or wamp. Either way, you must have it installed and it can be used to run a PHP website.

But be careful, some people tell me that some web server can’t work or can’t recognize a .phar file.

And that all the requirement as far as I’m aware. You don’t even need the web server, as long as you can run PHP.

Running PHAR file

It’s simple, really. You just need to run your .phar file using PHP. Like this:

Yeah, just like that. Easy right?

That it for now. If you have any question or suggestion, you can ask me in the comment bellow. Have a good day!

Regular Expression Online Tester

If you are working on your own Regular Expression or Regex/Regexp in short, you may often found that it pretty confusing to make one by yourself. You need a lot of trying and tweaking before it can be used for your project.

For you who doesn’t know what regular expression is, in short it was special text string to describe search pattern. For example, this code bellow is checking if the text you want to check only has alphabet letter and number and at least 3 character short.

It may confusing at first because of there was a weird pattern in those code. But if you can understand it, you may found that really useful and maybe you use them in every application you made.

Since making regex is a lot of trying to find the right syntax, you really need tools so you can do a testing a lot faster. That why there was online website that you can use for this purpose.

regex101

There are a lot of them on internet, but I like to recommend you Regex101 because it help you make regex a lot easier. And if you don’t fully understand about regex, there is an explanation and help for your regex syntax on that website.

regex101_desc

As you can see from the screenshot above, it explains what my syntax and what it do. So rather than try to run or even compile your code each time you want to change your regex syntax, this would be really helpful and save some time in your life.

Hope this help.

Regex101 – [Link]

Twitter has Poll?

Surprise. Maybe for all of us. Twitter now has a poll button, same as facebook or google+. Previously, you may use an external site like Straw Poll or your own website to do this.

twitter_poll

Now if you want to ask for a public opinion you can use twitter poll for that. This is one of feature you will like if you are a poll creator. Because as far as I know, twitter is a great place to ask for public opinion. Sadly, twitter only has 2 option answer.

twitter_poll_create

Yup, only 2 option can be made per question. Which is quite annoying considering poll usually have more than 2 option. Basically 2 option is only available for question that the answer is yes or no. So if you need to create poll with 2 more answer, then you may consider old way to do that. There is great and simple poll creator outhere.

Is there possibility for Twitter to increase poll answer more than 2? I don’t know yet. But for now, I think i will stick with old way to ask a public opinion.

 

Trello is Celebrating 10M Users!

Trello is currently celebrating its 10M users. If you don’t know or never heard what Trello is, then you should check it on their website. In short Trello is a collaboration tool that organizes your projects into boards. And one of my favorite project management tools.

trello_celebrate_10M

You can get 1 month free Trello Gold by sharing what you use Trello for on the celebrate page. I will provide the link bellow so be sure to check it out if you are one of Trello user. If you aren’t one of the users, you can give it try and get a month free gold membership.

Trello Celebrates – [Link]

Trello Website – [Link]

Twitter should stay at 140 character limit

I found out today that twitter is planning to extend it 140 characters limit. It seems that a lot of people are supporting the changes and of course, there are people that think twitter should have stay at those limit like me.

I think that limiting character to 140 may be annoying, but it taught me to practice few principle to make my writing better. Well, my writing is still crap but at least it better than before. Here is some of the principle I learn because I must writing short text but still convey my message.

Defluffing My Writing

A writer like me (if you can consider me to be one of them) love to write words as many as they can. Of course, this can lead to a lot of unnecessary words or what some people might call “fluffing” or “padding”. This may make content longer, but I don’t think this was really good because I found that people doesn’t really love to read fluffing content. It makes the message you want to convey lost in the content you write.

Write More Clearly

A 140 characters is really short and it hard to convey my long message with those limit. This force me to tell the reader the point fast (no fluff word) and I have to make sure it clear enough so my reader can understand what I want to write.

But it still social media thought. Nobody cares about what you write there. But hey, at least it a great place to practice, right?

Proofread More

Twitter actually make me proofread more. Because of how short the tweet is, it actually motivate me to read them again. First, it just short text. Second, reading them all would only take 3 seconds. It tricked my lazy mind into believing that would be an easy task. Well, considering proofreading a blog post that can be as long as 1000 words.

Conclusion

While I think twitter should have stayed at 140 limits, I hear that it was inconvenient to write a descriptive text with 140 limits on a language other English. My friend that live at a different country and has its own language say that sometimes it hard to convey his message on their language rather than just write them in English.

But for me, the most important thing is to make your writing as clear as possible so the reader can understand quickly.

 

Is IFTTT Useful?

IFTTTT or “If This Then That” is web base service application that allow you to create conditional action automatically called recipe that will do an action if the condition is meet. You can create a recipe that if you post something on facebook it will automatically post it too on twitter, tell you what weather each morning via email, download your facebook photo to Dropbox, google drive or one drive when you upload one or change twitter profile picture when you change facebook profile picture. This is really useful if you do multiple similar actions on different service. But is it really useful?

This question comes to my mind when I was reorganizing IFTTT recipe and turn off useless recipe that I create before. And it turns out I don’t have any active recipe left. Nothing. This feel weird actually. When I first discover IFTTT, I think this service is really useful and essential for me because I have to do one action and it will automatically do other action for me. So what wrong with it? Well for me here are some of problem that make me think IFTTT is not for me.

Look at this channel list

IFTTT Channels

There’s nothing wrong with it, of course, many online services supported and they are rather popular so many people use them for sure. But almost all of them can’t be used by me because I don’t even have the tools to use that online service. And most channel that I use and can use is rather useless too. Why? Because there’s built-in functionality on it own so I don’t need IFTTT to do that for me. For example if I share Instagram photos and want to share them to facebook, twitter, Tumblr or anything else, there’s button in Instagram to share on other social media. I definitely don’t need IFTTT to do that automatically.

So, IFTTT is useless?

Not really. It may useless for me, but for people that do many things on online service that can and should have been done automatically would be helped with it service. It great app but not for all people especially for the current me. Maybe I can use IFTTT effectively in the future or if I’m moving overseas.

IFTTT – [Link]