After hurting my eyes and wasting my time by watching videos of some dude moving squares around on the screen, back and forth, over an over, because they suck at [drawing tool name here]… here’s my golden spiral (more precise than fibonacci’s)

After years of inventing my semantic seo-friendly rating stars system, I realized one of the most impressive rating stars systems out there were having loved because they just SHOW THEM BIG, as any other end-user website choice: Today an image covering the screen with a button in the middle is “a good design”, and flies all go feast with them.

So here is my revamped version of my Rating stars, using no images, scripts, divs, canvas or nothing else other than css and fonts.

Responsive Rating

3.5 out of 5

(stars) [speak by themselves]

Hover the stars to see what screen readers and search engines see

Resize the screen and the stars will resize as well. No JS. Pure CSS. Including the gradient!

Please if anyone is being pushed by NetworkSolutions (web.com) to buy SiteLock to fix the hack on your shared account, DO NOT buy it, because it won’t work. Read below (and let me know, by replying here)

And please comment here so we can stay in touch for a future lawsuit?

Last week NetWork Solutions (Web.Com) suspended one of our client’s account because of the SoakSoak hack.
They took the time to make a LONG email, explaining WHY they are giving us the names of a few files infected, not the file list, but every time you request the lift of the suspension, the answer with DIFFERENT filenames. A big company like them should have all hacked files in a black list already… but instead of telling you, they partnered with SiteLock. The problem is IT WON’T WORK. I’ll explain you why below.

The problem is SiteLock HASN’T SCANNED IN 4 DAYS, and it won’t.

The first scan still shows “pending” 4 days after the setup. I was told it’s because “I have to verify it”, but I have no idea why the PHP depends on the frond end to run. It might just be useless. And since the site is suspended, it can’t verify your ownership for a second scan, although the FTP credentials were passed from NetworkSolutions.

So Web.Com is SELLING (they bill you under Network Solutions) SiteLock, WHILE IS USELESS for the case.

I contacted NS and they said they’ve been instructed not to offer SiteLock anymore, but I guess that’s the lie for me, because it’s in the notes of my previous call.

Please let me know if you are offered SiteLock for this (or other) subject of suspension. That way we’ll have proofs of them doing it on purpose.

Opposite excuses by their reps show they sell it on purpose:

  • They stated not to profit from that, but the bill comes from them.
  • The first email said there were INFECTED files (didn’t say “some of your files”) so they KNOW they are not just your stuff. They KNOW HOW and WHICH files are infected
  • They first rep stated the email advicing “…or using SiteLock to remove all infected…” was automated… but the third email DIDN’T suggest installing SiteLock. Either it’s taken out automatically because the sale was complete, or the email was manually edited.
  • The last rep apologized by the bad information the others provided me, and admitted the email was edited manually. So they COULD have pasted the whole list of known hacked files…
  • The first rep told me they KNEW the infected file is sending the emails (I pointed out the mentioned file was a JOOMLA file, this website runs on WordPress). The last rep even mocked me “Unfortunately hackers do not make the subject of the email say what file is sending it.”

I can’t stop myself from playing with photography and some other tricks from web 2.0 on this WordPress website with lots of custom development tips and php programing functions to bring you some humor :)

Photo_Retouching_Batucada_Bridge

 

You don’t need a plugin, or template to add your custom error page. WordPress already gave you a nice (still buggy) WYSIWYG editor, and many other tools to make pages useful (more…)

This animation DOESN’T use Rotatation at all. Nor 3D/2D transformations.

Why aren’t there yet “animator” apps or online tools to animate objects along a path without canvas or JS?

Time ago I contacted a few key people, those who take good ideas, make an API or mixin for others to enjoy it, enjoy the fame themselves and don’t try to make money with it.

None of them even responded. I wonder whether they are building their own app/script?

How can it be possible with pure CSS?

If you convert hand-drawn strokes or any other curve into 2-node bezier curves, and extract separate x and y translation-over-time curves, you can make them into easing functions, getting a tranlation across the screen using just timeframes.

If you’ve ever seen a vinil router, the head only moves in the x axis – it would make the x easing –  and the roll only moves back and forth – making the y easing. Bot move in their own axis, and yet they draw CURVES, without rotating the media, just by accelerating and descelerating over time.

Those movements can be separated into easing functions, like an image is traced, and each curve can made into a bezier easing function.

The technology to convert curves into vectors is open source. The technology to split them into 2-node bezier exists too. What are we wating for?

Sometimes it’s not enough a simple “text-decoration”, specially in the new kind of text-only giant hero ass message that the trend bootstrap implanted in our brains (I hope it passes soon!).

In those cases, an extra decoration could be used. In this case, ellegantly called with a .runaround class.

Havent’ you ever wished to be able to use user-uploaded images (not carefully chosen with extra background) as the backdrop for their titles, and yet make the text on top READABLE?… NOT using tex-shadow or a hard box? Not even a blurry box or gradient?…

What about a progressive blurry background like Photoshop’s lens blur, that is less-blurry on the outside but blurrier in the inside, right under the text, so the blurred part doesn’t mix with the straight edges but rather makes a nice bokeh…

What about making it animated on hover?

As usual, without extra markup (or I could make the blur even more subtle on the outer area where it merges with the un-blurred image) and without JS or SVG. Pure webkit and flex boxes, or you could do it with tables and inline-block, but I guess IE will hate that. Bleep IE though.

Try it at full screen, because the hover is on the whole row (it needs to affect the overlay too. Unless you want to US JS to affect the parent style/class when the text is hovered).

A few tips – so you don’t think it was easy:

  • There were needed two blurred images. So the large blurred is not merged directly with sharp edges, which makes it ugly.
  • The blur areas could be extended with ems, so it would change on window-resize, but since my image box is fixed height, I used pixels.
  • Resizing text with vw units will fail in pixel densities other than 1:1 if you don’t provide a reduction to compensate it for EACH existing screen density out there (Remember: 50%% of an iPhone screen is 320px, which in CSS will fill the screen!)
  • Each blurred image has its own overlay as an extra background-image gradient.
  • Each transition requires different delay and easing to ensure you won’t get a black blurry patch. Remember: except in linear transitions (too robotic to look smooth) 50% into the animation, no object is at 50% opacity, and the average between them PLUS the black overlays, gives unexpected results. It’s like video/audio mixer console faders: they transition with a smooth curve, but never linear, because the average of 50% + 50% is a washed out tone in video or too loud in audio.

Thanks to this guy, I was able to reduce website load, and stop wasting bandwidth in unnecessary quality our eyes can’t see.

Nowadays, screens have more resolution than you eye can catch, so you can increase the compression (reduce the quality) up to a point where you barely start noticing it (the only way to calculate it.

Copy this funciton in your functions.php file, and new photos saved by WordPress (thumbnails and intermediate sizes), will be created using your new settings.

// Changes compression for newly uploaded photos
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Testing different compression settings using WordPress uploader is a slow process, so I recommend you to try it in PhotoShop or any online photo editor first, and then using the value that suits your eye in this function.

If you want to squeeze more juice from WordPress, optimizing the compression settings even more, try this other function to select different compression settings for different image sizes.

If you need to re-create the existing images, you can use the plugin Force Regenerate thumbnails

Loading speed is reflected in PageRank, and clients always want BIGGER images, and MORE animate slides.

If you want to compete with other websites in every aspect, page load if one of the most important features that Google and other search engines take into account at the time of assigning a PageRank to your website.

And if you use many images in a Giant image slider (A.K.A Hero box) you’ll need to save some Kb here and there.

Sliders could take a higher compression to prevent bloating your website with un-necessary weight.

In this code, you just replace the conditional to your image size names, and the amount of compression desired. In my case, I divided it in “slider” or everything else.

Code By Ahmad M.

// Different compression for each size
// Thanks to 
add_filter('jpeg_quality', create_function('$quality', 'return 100;'));

add_action('added_post_meta', 'ad_update_jpeg_quality', 10, 4);

function ad_update_jpeg_quality($meta_id, $attach_id, $meta_key, $attach_meta) {

    if ($meta_key == '_wp_attachment_metadata') {

        $post = get_post($attach_id);

        if ($post->post_mime_type == 'image/jpeg' && is_array($attach_meta['sizes'])) {

            $pathinfo = pathinfo($attach_meta['file']);
            $uploads = wp_upload_dir();
            $dir = $uploads['basedir'] . '/' . $pathinfo['dirname'];

            foreach ($attach_meta['sizes'] as $size => $value) {

                $image = $dir . '/' . $value['file'];
                $resource = imagecreatefromjpeg($image);

                if ($size == 'slider') {
                    // set the jpeg quality for 'slider' size
                    imagejpeg($resource, $image, 30);
                } else {
                    // set the jpeg quality for the rest of sizes
                    imagejpeg($resource, $image, 50);
                }
                imagedestroy($resource);
            }
        }
    }
}

This will only change the new photos upladed after installing it. If you need to re-create the existing images, you can use the plugin Force Regenerate thumbnails

If you don’t need different compression settings, you can just follow another other function, to change WordPress image compression settings.

Ready to own a Social Blogsite?

Learn More