Skip to main content

How to reduce the size of a word document by optimizing the images in 5 easy steps

Very useful in case you get a huge .doc / .docx full of images

Posted in Misc, Tutorials

Some time ago, I got a word document with around 36 MB and a request to resize this file in order to be lighter as it be sent via e-mail. The first thing I thought was the obvious: Why not compact the file? I use 7-zip, which is the best compression utility I have ever used. It did not work as expected since the file went down to 30 MB.

The problem 

When I’ve opened the document I could see that it had only 10 pages, each with 2 images. So it could be possible the images were way too heavy, meaning, not optimized for internet or text documents. Do you know those people who take a picture using all megapixels of the digital camera and start to send those 4 MB files to everybody? This was more or less the case.

The solution

It’s simple: All we need is to reduce the dimensions of the images in the word document. But I am not saying about simply resizing, but editing. By editing we will be able to reduce every of those heavy images into something more acceptable. For that, I will use my favorite image visualizer, the XnView.

So, with the word document open:

  1. Right click on the image, select “Save as picture…”, define a name and save itd

  2. Open the saved image in the XnView

  3. Click on the menu “Image” and then “Resize” (or Shift + S)

  4. Choose the appropriated size and press Ok. Here is a bit tricky since it depends on the width/height the image actually should have according to your word document

  5. Save the image (File -> Save or Ctrl + S)

I’ve used 800 x 400 with this image and its size decreased from 7 MB to 65 KB. Now it is only about deleting the huge picture from the word document and add the new resized one. The result is a document with 78 KB, which is much better to send around the internet.

Note: This problem is going to happen if you insert the images by drag & drop. If you use the menu (Insert -> Pictures) the image will go through a process of optimization and the document will not be so heavy.

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

Horizontal scrolling with jQuery

Learn how to easily make horizontal anchors with jQuery

Posted in Code snippets, Tutorials, jQuery, JavaScript

I've got a freelance job from a Brazilian company few days ago. The project is fine, nothing so different than the usual. Except for one thing: They want the page to scroll horizontally.

The clients are getting creative these days...

My biggest problem is the main menu: If the page would be normal I could use anchor. But I can't since anchors don't work on the horizontal.

Fortunatelly the solution is easy: .scrollLeft()

What .scrollLeft() does is simple: It returns the position of the horizontal scroll bar. And if we pass a parameter it will set the scroll bar where we want.

I have an example on how it's done. Let's walk through it:

HTML

Very simple, no problem at all. Only one navigation and a couple of divs just to give something to work with:

<header>
    <nav>
        <ul>
            <li><a class="nav-item1" href="#">Item 1a>li>
            <li><a class="nav-item2" href="#">Item 2a>li>
            <li><a class="nav-item3" href="#">Item 3a>li>
        ul>
    nav>
header>
<section>
    <div class="item item1">Item 1div>
    <div class="item item2">Item 2div>
    <div class="item item3">Item 3div>
section>

CSS

The CSS is very basic, just to give some formatting:

<style type="text/css">
    nav { position: fixed; z-index: 1030; }
    section { width: 3600px; top: 100px; position: relative; overflow: auto; }
    .item{ float: left; position: relative; width: 900px; height: 500px; font-size: 200px; }
    .item1 { background: #f00; }
    .item2 { background: #0f0; }
    .item3 { background: #00f; }
style>

Javascript

Since we have 3 items I've created a function which groups everything. In that way I am able to keep the code clean, without repeating important parts:

function horizontalNavigation(position, event) {
    $('html').scrollLeft(position);
    event.preventDefault();
}

And here is where the magic happens:

$('.nav-item1').click(function (event) {
    horizontalNavigation(0, event);
});
$('.nav-item2').click(function (event) {
    horizontalNavigation(900, event);
});
$('.nav-item3').click(function (event) {
    horizontalNavigation(1800, event);
});

See the working example.

There is only one problem with this code: What if I want to have a smoothly horizontal scrolling? For that we can use .animate(). Solution in bold bellow:

function horizontalNavigation(position, event) {
    $('html').animate({scrollLeft: position}, 800);
event.preventDefault(); }

See the working example.

As you can see it is not so complicated as it looks. Just a bit of work, but quite easy.

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

How to uncheck all radio buttons and checkboxes using jQuery

Learn how to use jQuery to reset all radio buttons and checkboxes AT ONCE in a page

Posted in Code snippets, Tutorials, jQuery, JavaScript

- UPDATE -

My friend Wellington sent me this code right after I've published this post:

$('input:checked').removeAttr('checked');

This should get all the checked items and remove the "checked" attribute.

- Original post -

Recently I have come across a very interesting problem in a project I am working on. I had to uncheck all checkboxes at once. It was fine by using a simple .each on jQuery. After that the requirements changed and I had to add radio buttons and they weren't working with the code I already had. That was fixed with one more line. Let's see how it was done.

Suppose I have 3 checkboxes and I want to clear all of them at once. Normally I would do something like this:

$('#clear-all').click(function () {
	$(':checkbox').each(function () {
		$(this).removeAttr('checked');
	})
});

Very simple, very generic and it works like a charm. However, suppose that I have to add some radio buttons. The code above will not work with radio buttons, as mentioned before. If you want to uncheck all the radio buttons and checkboxes you will need to add one single line (in bold):

$('#clear-all').click(function () {
	$(':checkbox').each(function () {
		$(this).removeAttr('checked');
		$('input[type="radio"]').prop('checked'false);
	})
});

According to jQuery website the .prop is gets the value of a property for the first element in the set of matched elements or set one or more properties for every matched element. In another words it will look for the "checked" property and, if you want, it can change its value as well.

Easy, simple and clean.

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

How to insert many records into the database using Entity Framework (bulk insert)

It's using SqlBulkCopy but as both Entity Framework and SqlBulkCopy belong to ADO.NET...

Posted in Code snippets, Tutorials, Entity Framework

Entity Framework (EF) is a Microsoft ORM which allows programmers to develop against a conceptual data model instead of developing anything inside the database. In this way any change done in this conceptual data model must be persisted as this is not done automatically. For EF we have to use SaveChanges.

To understand EF is simple: A SQL script is generated for every action done against the conceptual model. For example: In case we want to add some record into the User table. For that we would have to use the AddObject method and pass the properties of the User (name, surname, etc) along. Behind the scenes the EF will generate an INSERT and will execute it in the database with the properties of User.

And what about inserting 3.000 records at once?

In this case we have 2 options:

  1. We do a loop and use AddObject for every one of the 3.000 records (not recommended)
  2. We use a class called SqlBulkCopy (deeply recommended)

But why?

The EF doesn't have a native method in case we want to make a bulk insert but, as it was built on top of ADO.NET, there is no problem to use SqlBulkCopy. Not to mention the performance gain if we compare with the multiple INSERTs.

An example of SqlBulkCopy:

Let's just hope Microsoft will add a similar feature into the Entity Framework in the future.

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

How to drive a web developer crazy in 20 easy steps

Be sure this works all the time. But don't do it unless you want people to hate you

Posted in Misc, Career

Let me tell you something: Once upon a time, I wanted to be a biologist. That was a long time ago. Then things changed and I became a programmer. Not bad for someone who wanted to make research the whole day but did not have enough patience for the results.

Little I knew about the problems I would face as programmer. In addition, they are quite different when you move from desktop to web development. A very common problem for web developers is dealing with the design team. We understand they follow the requests of the client but in 100% of the cases they just think we can do miracles with their graphics while creating the website.

Rafael Mumme, from the .net magazine, wrote an amazing article about the 20 things that drive web developers crazy. They are so real that I’ve seen at least 20 of them in the last 2 projects I was working on:

  1. Add rounded corners to every single element on the page. While you're at it, add shadows and gradients too.
  2. Use the same PSD as a starting point for every project. Hide unused layers, but don't delete them. Make sure your PSD is at least 100MB.
  3. Use sIFR on every piece of text. Bonus points if you choose a font that's very similar to Arial.
  4. Never use the same dimensions on elements. Give each a different font size and colour (for black, use #000000, #111111, #121212 ...).
  5. Use a lot of breakout images with transparency. Web developers love graphics breaking out of boxes and columns. Bonus points if you add text wrapping around images.
  6. Add a modal window. At least half the site should happen in a modal window.
  7. Add a Facebook Connect button. It's just a button. How hard can it be to implement?
  8. Hide important PSD layers. Later, tell the developer that they missed a hidden element.
  9. Create buttons with rollover, active and clicked states. Then don't tell anyone you've done this. Create a separate file for them and send it on at the last minute. We love surprises.
  10. Tell the developer about some fancy functionality you read about somewhere on a blog. Then tell them to build it, because, if you saw it somewhere, clearly it's possible.
  11. Add a carousel. Oh yeah, and make sure it's a full-screen carousel.
  12. Use Lorem Ipsum instead of real copy. And make sure the reserved space is not big enough for real copy.
  13. Randomly merge PSD layers. Why not? (But don't merge too many. It'll take you further away from the magic 100MB target).
  14. Name all your files 'final', plus a date and a random letter (final-2010-12-01a.psd, final- 2010-12-01r.psd, final-2010-12-02b.psd).
  15. Don't worry about making changes once everything is signed off. When we're done with a page, send another, completely different version of it. And tell us that those changes are necessary and essential for user experience.
  16. Don't name or organize your PSD layers and folders.
  17. If you're designing a form, forget about error and success states. We'll squeeze that stuff in somewhere. We love guessing your intentions.
  18. When you're designing a website, don't invite any developers for brainstorming or design meetings. Make sure we're the last ones to see the layout. Show it to the client first, so it will be too late to introduce even a modicum of sanity into your work.
  19. We should hang out more, so during QA don't use bug tracking software. Come sit with us for an entire day and point out changes you want made over our shoulders. Use the opportunity for some impromptu design updates as well.
  20. And finally, this is the most important thing: don't learn anything about HTML, CSS, JavaScript or browser issues. The less you know about it, the more important we seem.

Image from ShinyShiny.tv

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network: