{Carrer web log}

Clear Flash Ads with one line of jQuery

Tuesday, March 19, 2013 { 2 Comments }

Few years ago I made ClipR distraction free readability bookmarklet based on jQuery. One of first things that ClipR does is trying to eliminate all Flash from the website.

That is done with just one line of jQuery:

$("iframe,object,embed,input[type=image],ins").hide();

With little help of Ben Alman’s bookmarklet making tool we can transform this simple jQuery into a bookmarklet.


ClearAds - Drag or Save this link to your bookmarks


Use this bookmarklet to eliminate all annoying flash ads from any website.


Cheers

Writability - Write in your browser

Thursday, January 31, 2013 { 9 Comments }

Yesterday I stubbled upon one incredible post about One line browser notepad by Jose Jesus Perez Aguinaga there are also some very useful and helpful comments on his blog post.

The idea is using your browser like minimal distractions-free writing editor.

The great thing is you can work locally even without internet. You don't need additional apps and other fancy stuff just you and the browser. Naturally there are no privacy issues because you work locally inside your browser.


I've started from the basic Jose Perez solution and some comments of other people and I combined that with my knowledge from my previous web typography projects like (Better Web Readability Project - CSS Library, Azbuka - CSS Typographical Base Rendering Library, Clipr - bookmarklet for better reading and the final result is Writability.

Here it is Writability - Minimal Distractions Free Browser Text Writing Tool

Just put this code inside your browser url tab:



You can use additional formatting like bold, italic in some browsers (Example you can use Cmd+B (bold), Cmd+I(italic) on Safari for Mac)

I've tested this solution on Safari, Chrome, Firefox for Mac and Firefox for Windows.

Here is how this solution works on Safari:



Comments or suggestions?

Custom Logo Land - Logos for Startups

Wednesday, November 28, 2012 { 4 Comments }

For several mounts I've been working on my new project http://www.customlogoland.com/



Custom Logo Land is collection of 51 simple handmade logo templates that are easy to personalize. All 51 logos cost $99.

Why I made this project?

In the past I needed Logo for some of my open source projects, apps and demo templates but I want prepared to buy expensive logo for every single project. That is why this project is born, affordable logos for everyone.

I think there is real need for logo templates that are generic, versatile and can be used multiple times in various projects.

I think that this project can be ideal for:

- People who are making startups and need something inexpensive or the idea is "under development" and they need present the initial project to potential investors.

- Developers who are making WordPress, Drupal, Joomla templates and they need a Logo for their demo template.

- Logos for developers for their open source projects.

- Logos for app developers.

- Logo for your clients with low budget.

- Or you simply like some of the logos and you think that it can right for your project.

You can use the logos endless times for your personal or professional project and you can even sell one of the logos in the template and make money.




Any question or comments?

Link http://www.customlogoland.com/

One Line CSS Mobile Framework

Thursday, August 30, 2012 { 3 Comments }

In the last couple of months I've made few Android Apps with web technology HTML + CSS + JavaScript and PhoneGap to package the apps for the Android Market.

Designing for Android is really challenging because you don't have standard screen dimensions like for iPhone or iPad so making px perfect design is practically impossible in Android.

The need of having fluid design in Android in several cases made me think how can I made simple and effective CSS layout that I can be used like a baseline in my future apps.

I was simply trying to make one column layout with fluid body and fixed margins.

If you have some experience with CSS you will know that mixing px and fluid layout is always hard to achieve with CSS.

How can this be done in CSS?

Probably there are several solutions for this problem but I wanted to implement the solution that will work in almost every browser. Naturally we need this solution only for the Mobile Browsers.

The solution is: width:auto;

.row { margin: 10px }

You don't believe me that this will work?

>> Here is the demo


Let us examine the code:

/* You don't need to specify float:none because is default, but in some cases you need to overwrite some previous float */

float:none;

/* The default state of the width is auto, you don't need to write this except if you want to overwrite some previous width statements */

width:auto;

/* In we want later to use position:absolute starting from that element we need: */
position:relative;

/* We can use px,ems,% for the margins */
margin:10px 20px;

/* And we can also add padding, border and rounded corners and other things .. */

padding:10px;
border: 10px solid #ccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
clear:both;

Problems with this solution:
If we have images they in some case break out from the layout.

To fix this problem we can use:

/* float:left or right */
float:left;

This solution can fix the image problem but will open another problem in some cases (little text) the layout will not take entire screen.

Other solution:
Using max-width and min-width with that is bigger than the biggest image. This solution will work but is not handy.

The final solution:
overflow: hidden;
You can read more here.


>> Here another demo

We can use this solution not just for android but for every other phone with decent HTML, CSS support.

This solution also works great with mobile Responsive Layouts.

>>Here is the Responsive Layout Demo1

>>Here is the Responsive Layout Demo2


>>Here is actual Android Working App build with this CSS Solution.

Conclusion:

Building layouts for mobile phones in most cases is one column grid if we don't know the size of that device like in case of many Android Phones it can be smart to use elastic column with px margins.

To achieve that in CSS we have this bulletproof solution:

.anynameyoulike, ul>li {
width: auto;
float: none;
overflow: hidden;
margin:10px;
}

You can also add padding, borders, rounded corners, shadows …

This solution also works for making Responsive Layouts.

Let me know if you have any questions, suggestions or comments.

URL to QR Bookmarklet

Monday, June 11, 2012 { 14 Comments }

I thought that it can be handy to have some way to copy web browser url to mobile browser url without wasting time and auto sanding emails. The simple solution can be making the QR code from the current domain and scanning that QR your mobile phone.

I made simple bookmarklet that takes the current web browser url and inserts the QR photo inside the browser. It only takes one line of jQuery code and the simple web services read more here http://www.webmaster-source.com/2010/10/11/generate-qr-codes-on-the-fly-with-the-google-chart-api/

Here is the code used for this bookmarklet(jQuery):



Or pure JavaScript code:


Save some precious time and use this bookmarklet:

URL to QR - Drag or Save this link to your bookmarks


To remove the QR code from the web page simply Refresh the web browser.

If you don't know what is Bookmarklet here is the Wikipedia link

Update: thanks to Gergely Iharosi for the Close Button https://gist.github.com/2909104

Semicolon Drama ; {

Friday, April 20, 2012 { 0 Comments }

De gustibus non est disputandum - “There is no arguing about taste.”

You made semicolon cry:


Ej, JavaScript community we should argue about more important things. Don't you think?

Hand Drawn Icons 1.1 Update

Wednesday, April 11, 2012 { 0 Comments }

Today I published the new update of Hand Drawn Icons with 26 new Icons.

The Icon Set now contains 310 hand drawn icons.

Also I updated the Balsamiq support file.



http://www.handdrawnicons.com/

Enjoy!