Specific troubleshooting about life and its connection with the Internet
In: Design| English| Fireworks| Tutorials| Web design
9 Feb 2010I was playing with a nice photo I’ve found in Flickr and while editing to make it look nice in a light background I came up with a very simple but sleek grunge effect. Here’s the result (click the pictures to see them in full size):
It takes 2 minutes and you just need two layers. Let’s get started!
Find any picture that has nice contrasts.
Decrease the saturation (Filters > Adjust Color > Hue/Saturation…) of the picture to remove the color (-81 in my example). I’ve leaved a bit of color because it gives this “old” effect.
Increase the contrast (Filters > Adjust Color > Brightness/Contrast…) without any fear (in my example it’s 63). But not too much. You can play a bit with the brightness to balance it.
We are done with this layer. Right click it and Duplicate it. Hide the bottom one (click the eye at the left of the layer).
Add Glaussian Blur (Filters > Blur > Gaussian Blur…) to the new layer (15 in my example).
In Blend mode (it’s a dropdown in the Properties toolbar at the bottom, next to the transparency dropdown), select Darken.
Unhide the first layer, it should be at the bottom.
That’s it! The final result looks like this (click the image to view it full size):
Although it’s true that Fireworks is quite limited compared to Photoshop and it doesn’t have the same community as Adobe’s big one, the speed and ease of use of FW makes it the perfect tool for beginners to semi-professionals with a nice and sweet learning curve.
Images in this post are licensed under Creative Commons Attribution Share-Alike Non-Commercial.
Original: mac as music studio by shapeshift
Result: Grunge effect Photo Tutorial in Adobe Fireworks by Xavi Esteve
In: CSS| English| Front-End| JavaScript| Tutorials| Web design| XHTML
20 Dec 2009Check if element exists
if ($('#infobox').length) { /*exists, do things here*/ }
Change attribute
$('#name').attr('title', 'Hello!');
Change content of a container
$('#main').html('<p>Lorem ipsum</p>');
Change page title
document.title = 'Hello!';
Add content before/after
$('table>tbody>tr:last').after('<tr><td>This is now the last row.</td></tr>');
Add or remove classes
$('#main').addClass('red');
$('#main').removeClass('blue');
Check if element has class
if ($('#main').hasClass('green')) { }
GET with parameters
$.get("page.php", { action: "edit", id: 38 },
function(data){
$('#infobox').html(data);
});
Do something with every matching element
$('table>tbody>tr').each(
function (intIndex) {
/* Modify all table rows */
});
Check if even or odd
if ($id % 2) { /*even*/ }else{ /*odd*/ }
Force string to integer
parseInt(var);
Filter words, numbers or symbols
$(this).attr('id').replace(/[^0-9]+/, '');
Timer
setInterval(timer1s, 1000);
function timer1s() { /*run this every second*/ }
Here’s a little list of music blogs that post about new songs that you can listen in situ and download the track if needed.
Music genres: electronic, folk, funk, jazz, pop, reggae, soul
Update freq: unknown
Mp3 downloads: Yes
Chilled music you have never heard about from.
Music genres: indie, pop, electronic, folk
Update freq: occasionally
Mp3 downloads: Yes
This is the personal blog from Leonard where he posts some of his latest discoveries in music. Very nice taste.
Music genres: house, techno, dance
Update freq: every day
Mp3 downloads: Yes
An electronic music blog updated every day. It is not in english but it has the option to googletranslate it.
Music genres: indie, folk, electro, hip-hop
Update freq: 2-4 days
Mp3 downloads: Yes
Electro music blog.
http://letssexyfighting.blogspot.com/
Music genres: indie, electro, pop
Update freq: 1-3 days
Mp3 downloads: Yes
http://discodust.blogspot.com/
Music genres: indie, folk, electro, hip-hop
Update freq: 3-7 days
Mp3 downloads: Yes
The only thing I don’t like about this blog is that it starts playing music automatically.
Check the comments for more Music Blogs and feel free to note down any recommendations (provide music genres and update frequency).
Here are some useful tips I would like to share about my experience in the jobseeking world and what I have learned to create an online reputation as a front-end web developer and designer and to place myself in this huge, ever-changing and thrilling market. I have been working closely with recruiters from around the world for more than 2 years, freelancing for several more and lived some time with an IT recruiter who gave me great advice.
Your website should be simple, fast and intuitive. Page should load in 5-10 seconds as maximum, make no more than 10 requests (at least until the DOM is loaded) and weight less than 500KB. As an example, my main page takes 2,5 seconds to load, makes 10 requests (including Google Analytics and Clickheat JS files) and weights 320KB.
Although these requirements, you should have a strong and unique design so experiment with several designs and the best way to code it.
If you are looking for a job as an individual, go for yourrealnameandsurname.com. No discussion on this. Having your name in the URL will increase your professional reputation while making you more visible and easier to find. If you have a common name (search your name in Google) then get your domain and variants ASAP.
People looking at your personal website are usually recruiters, managers or professionals that don’t want to read extensive essays or learn something complicated. They just want to know more about you and they may just need one thing. Some may have read your CV and are interested in viewing your portfolio or download the most recent version of it, some may have just visited a website you have created and want to find a way to contact its creator.
As per the KISS principle and usability standards, users should be available to reach your portfolio, contact information and CV in no more than one click from the start page.
Should contain between 4 and 12 recent websites/projects/templates each of them containing:
Try to keep it up to date with the best projects you’ve ever participated in and describe the different areas of expertise of each being as varied as possible.
Provide at least two different ways to contact you: e-mail, phone and/or online form. Let the user decide which one they prefer.
Provide a direct link to a Word Document (.doc) file. Most recruiters prefer reading Word documents rather than PDFs. Extra point in providing a PDF version of it, your resume will be more visible to web spiders, PDF libraries and recruiter research tools.
You need to upload your CV to all the job boards you find available or useful. Although updating your CV in all these sites is a tedious task, you should always keep the CV as updated as possible, at least the one hosted in your website.
It is very helpful to add a note at the bottom of your CV stating something like “Please get the latest version of my CV from mywebsite.com/cv.doc“.
Don’t extend it too much, two lines of text are enough. Describe yourself a bit, your hobbies or what are you up to at the moment. Try to be passionate and positive.
There is no hurry on these, and they’re not strictly necessary. But they will help spread and create you a strong name around the Internet.
If you like writing, linking to a professional blog of yours is a good way to let interested people know more about you. It also gives an idea of what you like/dislike, your communication skills and your passion in your job. Keep the blog restricted to work, do not talk about how much you hate chickpeas.
Extra point if your blog follows the same design patterns as your personal website since it creates correlation.
Links to professional networking sites are great ways to increase your professional network. Even if you just visit professional networks once a month or never, it is a great point in having them.
Whenever you receive an e-mail from an agent or relevant employer, check if they have their profile linked in their signature and send them a connection request.
The most important professional networking sites you should (at least) have a profile in, are:
This is a tricky one and needs to be chosen carefully. A picture of yourself increases confidence in your possible next client or recruiter. It also helps to customize your website and give a more personal feel.
Spend your time in deciding which photo you want to show. Should you be wearing a smart suit? Should you smile? Indoor or outdoor? Black and White or coloured photo? That depends on what impression you want to give. In my case, I choose to show a quite casual picture of myself by following these key points:
Remember to retouch your picture as much as you want (increase contrast, add some neat filters…). It is also a great way to demonstrate your Photoshop/design skills.
Design is very very very important even if you are a back-end developer. There are basically two options:
Once you have finished with the mockups or a quite decent wireframe, get some real people and have them do the test.
Although your target users may probably be agency recruiters and CTOs, you should test the usability of your site with people from different sex, age and profession. The easiest way is to get one of your parents/sons, your brother and another friend.
Some useful questions are:
All of these questions should be answered in less than 10 seconds. Expect unfamiliar users to take longer than what you would consider usual. This simple test should take no longer than 10 minutes.
The most important thing you need to know: the traditional resume structure does NOT work for web developers.
Now that you know that, get yourself a whole day, weekend or so and start creating it from scratch.
Structure the CV in order of relevance to the reader:
Do not add a picture of yourself in the CV.
Do not write your age, it is not relevant at all and some people (non experts) may disregard you just because of being too young or too old.
Keep it improving, correcting and adding things you learn from interviews.
Won’t talk much about the typical things you need to do, but think this is necessary to highlight:
Sadly, you will need to have an answer prepared for the typical ones. For the other ones, just try to be as abstract and unexpectable as possible. Focusing on being practical and not serious or dramatic.
If you are not familiar with any of the terms used above, Google them right now! The terms I have used above are in no way complicated and every interviewer will expect you to know them. If they ask you a question about the DOM and you don’t know what that means, you are doomed.
Once you get your site up and running, advertise it! Paste your URL in your e-mail signatures, put it as a status message in your favourite chat services and add it to your Facebook, LinkedIn, Delicious, Twitter and other networks.
Post dedicated to Ahmed and Yaser, hope you find it useful
There are two kind of commands in Tremulous. The chat commands like !help, !register, !info… and the console commands like \team, \disconnect, \m, \me, \follow, \kill… and of course \donate, \share and \callvote.
These last ones, the console commands, need to be performed through the console (the console is a kind of MS-DOS that scrolls up and down) by pressing the key at the left of number 1 (it may differ depending on your keyboard setup).
Ooooh! Yes I know what’s that! You want to play hummies but it’s full. And people keep entering before you can even click. Here’s the trick:
Do a bind for it: \bind k "team humans"
And keep pressing the key twice per second. You can even declare it in-game through the console.
Ok, so you can’t get your rifle. Whatever you do, do not ever say “can anyone join aliens?“, remember that there is a bunch of starving people also waiting for someone to go aliens. Saying that will denote your impatience and will reinforce other spectators to keep waiting until YOU join aliens. If anyone of them was about to choose aliens, he/she’ll wait.
Most people want to win, so say things like “aliens are pwning humans!“, “this map is for aliens“, “human team is feeding lol“, “hahah aliens are near s3” or “aliens are owning this round“.