Showing posts with label web-development. Show all posts
Showing posts with label web-development. Show all posts

Saturday, September 21, 2013

Including a file via Javascript (with jQuery)

When the website you're developing is big enough it will be most annoying to copy paste the "header" and "footer" code parts every time on every page. If you are using a server-side language like PHP you really don't have a problem - just do

<? include('header.html'); ?>

But what if the site you're developing has very many pages but they are all really simple - to the point that you can't really justify using a server side language? Common issue.

With javaScript you can't really include a file but you can "load" a file into a div, paragraph, or whatever else. When it comes to javaScript, I ALWAYS use jQuery for web-page development. So we need to include that first.

<html>
    <head>
        <script type="text/javascript" src="inc/js/jquery.min.js">
        </script>
        <script>
            $(function(){
                  $("#headerDiv").load("header.html");
              });
        </script>
    </head>
    <body>

        ...
        <div id="headerDiv"></div>

    </body>
</html>

Simple, clean, nice, makes me happy... if it is not working for you I'm going to guess that you are using Chrome and developing locally. It's a Chrome thing - they don't let you do that for security reasons. Just upload your file to the server and test it out - it will work like a charm (in Chrome, too).

What's even better, you can keep your site menu in a separate file as well - this way if the customer requests some changes or asks to add a menu item or you simply made a mistake - you will only have to edit the menu file instead of each and every of the 100 pages you have.

You can argue that the menu might be slightly different on every page - the current menu item needs to be highlighted / different from others. also not a problem - include your menu file, then use .addClass().

I always use Twitter Bootstrap as well, so for me i just do .addClass("active") on whichever <li> I need. You WILL have to add id-s to each and every menu item to do this correctly. It's a really small trade of in time compared to what you would spend if you weren't doing things in this sort of way.

Wednesday, April 3, 2013

Product Naming and Domain Parking

So, you decided to name your company / product / app / website / brand etc? You've been told by everybody how important the name is, given a bunch of vague unhelpful advice of how it should be something memorable, strong, fashionable, short, expressive, awesome, modern, 'edgy', and many other adjectives found in the language? Aside from that you've given it a lot of thought and want it to be "you". Something unique, and related to you in some way. You sit and think about it day and night, right down names on walls because you ran out of paper around the house / office, it comes to you in a dream and in the morning you wonder what drinks you had or what did you have before falling asleep to come up with such horrible idea.

Anyway. The point is you put a lot of thought and effort and time into naming your precious. And YES finally! You got it! It's just right! Sunshine and joy, good mood, cheerful singing, the world is at your feet. You get your cup of coffee and go to godaddy.com, asmallorange.com, or any other hosting spot. You type in myPrecious.com and that smile is wiped off of your face - the name is taken. You say "fine. I'll try this one". Nope that's taken, too. You try .net .org, ... .tv! (you're desparate!) taken... taken. TAKEN! You wonder who has thought of that name that you love so much. You go check out the page and oh what a surprise it's not being used - it's parked. Pay somewhere between $500 and $1.500 or hey $25.000 and that domain will be yours. The other 40% says "hey, if you want this domain click here or contact derpderp@domainnamesiwant.derp." Eventually, you will come across a couple of websites that use a similar name as you had originally chosen for a really horribly "designed" page that actually has nothing to do with the word.

From this point you have a couple choices.

Look around you, pick an object, type in that, if it's not taken - hey it's all yours. Name your precious creation ForkOnAPlate or GlassOfMilk or laVase etc. To anybody who questions you tell them they are not artistic enough to comprehend (and in your mind say "you're not autistic enough to understand").

Or make up a name that means absolutely nothing just put in random letters or close your eyes and type something.

Or, open a dictionary, find a verb that you like, skip a letter or two, or misspell it in a fancy way, let your imagination loose. One of them should work.

Anyway, the point is it's hard enough to find a name, and it's even harder to find a domain name that's not parked or in a very rare case used by somebody else. So next time you make fun of product names or laugh at how they have nothing to do with the product / website / brand, understand that people just didn't want to spend unreasonable money on buying out a... name.

It's really bad out there and nobody is doing anything about it. In my opinion parking should be illegal and monitored by hosting providers. But of course it brings in money to providers so why should they move a finger? The system works fine for them and brings in extra money. And why would they spend time and resources on something that's sort of profitable for them?

On the other hand, if there was a domain provider who would forbid domain parkings, it would probably get all the clients from all the other ones that don't. It would take just one to do that. They could even up their hosting prices - and balance out their no parking policy. Eventually all the other providers would end up with name parkers and no other business, bad reputation, and hopefully either go out of business or change their policy to no parking as well. Sure wouldn't happen overnight but hey would work and pay off eventually. And we would stop having ridiculous brand names and have less chaos, less headaches, less stress, sunshine and singing.

Where was I? Oh, yes. Perfect world. It could and should happen though. I think, a lot of people never give any thought to this problem until they come face to face with it. Then, as soon as they settle for other bad options they forget that there was a problem at all and don't want to so much as raise a finger and do something about it, talk about it, start a petition, raise awareness, or anything else that people do. But first step is realizing that there is a problem that needs solving. A problem that shouldn't have been there in the first place. I bet if somebody went out to all the stores bought out all the milk, and started selling it for $500 per carton or say to the highest bidder I bet people would not be too happy about it and not tolerate it. So ask yourselves why should domain parking be tolerated?

Tuesday, March 5, 2013

Implementing RSS feeds on a website

Nowadays, regardless of a company or a person wanting to have a personal homepage they will still have a facebook page, twitter, blog, or something else - somewhere where they have been and will be posting updates and news about their product or services. That is also referred to as news feed or RSS (Rich Site Summary).

So, it makes a lot of sense to take that feed (or feeds) and implement them on the website under News section - this way the client won't have to worry about updating their website and can just keep posting where they are used to - everybody is happy - client doesn't need to learn anything or do anything and proceeds with his usual routine. And less work for you as a developer/webmaster - you don't have to go update the content.

Most websites make it pretty simple - you just find the RSS button and get the link. Facebook however does things differently. You can go here:

http://developers.facebook.com/docs/reference/plugins/like-box/

by default data-stream=true which means you will get all the posts feed. And you can adjust the width... but it's still not really good for most case scenarios. The result is shown right there next to the inputs - It looks like a scrollable iframe, you can't get rid of the borders or change anything about the styles.

Instead you can use this link:

http://fbrss.com/

It will give you lists of all the people you friended and all the pages you've liked. So go find the page you were looking for and click the link on the right side where it says "RSS some page". Great. Now copy the address from the address bar - just put it in notepad or somewhere else for now.

Now go here:

http://www.jquery-plugins.net/FeedEK/FeedEk.html

As you could've guessed from the link it's a jQuery plugin. Download it (will be a  .rar - you will need a 7zip or a similar program to open it. There is a link to a free 7zip program right there on the page).

Unzip it. Put the JavaScript file into your javascrip folder and include it on your page, and do the same with the stylesheet - or if you already have a stylesheet just copy-paste the styles into your own file (you can do that with the js file as well). They are very small and lightweight. Make sure to have jQuery included (which you should regardless of what page you're making...) and it must be 1.9.1 version or higher.

Copy-paste this code in the <head> ... </head> portion of your page preferably right before the closing </head> tag.

<script type="text/javascript">
        $(document).ready(function () {
            $('#divRss').FeedEk({
                FeedUrl: 'http://rss.cnn.com/rss/edition.rss',
                MaxCount: 5,
                ShowDesc: true,
                ShowPubDate: true,
                DescCharacterLimit: 400
            });
        });
    </script>

Go get the URL you pasted into your notepad at the beginning of this. replace the URL that appears in red with your own (the one in notepad where I told you to paste it ;) ).

And now wherever you want on your page the feed to show just make an empty div with the correct id:

<div id="divRss">
</div>

You can mess around with styles and parameters, add or remove stuff and customize it to your liking - I'm not explaining that - you will figure it out on your own :)).

This will work anywhere literally - your page can be a .html. So, even if you have the smallest hosting package out there this will still be usable and will work just fine.

Of course, if you know PHP or some other server-side language you can make it even better. There is a pretty good tutorial here:

http://nouveller.com/web-design/how-to-easily-display-a-facebook-page-feed-on-your-website/

If you do it with PHP you can easily get all of the posts and paginate it and make it pretty and put it in the format you want but if you want something small and easy to do the one I described should be sufficient.

Saturday, February 16, 2013

Knockout

http://knockoutjs.com/

This is an amazing and powerful tool based on jQuery. Definitely worth the time investment to study. Especially now that web stuff seems to be moving towards heavy-handed client-side and just passing everything to server through Ajax and getting it back the same way.

This together with Twitter's bootstrap will allow for building professional looking, easy to use, and easy to maintain websites in a very short period of time.

And I bet it will be just as good for windows 8 app development... that I still didn't have the time to get into.

Monday, February 4, 2013

Professional books

Good books are so rare. I understand that by the time the book is written the software or technology has moved forward so much that the book becomes slightly outdated when it's finally released. Of course, a lot of times it doesn't matter that much. Most books offer additional data on their website's or blogs. And even if they don't - there are always a lot of articles on the web that will tell you what exactly changed and how it will affect your work.

But despite of this it's so difficult to find a book that's not written for beginners or intermediates. And for some reason more than any other computer literature programming books are just really heavy with introductions and dedications and unnecessary information. And it goes on for like 20 pages!

And the other thing is people writing books even for beginners always assume that their audience is not just a beginner in that language but new to the whole concept of programming in general! So another 20 pages are dedicated to loop constructs and if statements. Would be nice to just have a short syntax and maybe a short explanation if even that. I mean if a person doesn't get if else they can either a) google it or b) seriously reconsider their career choice. And sure we all have to start somewhere and beginners' books have their place. But in my opinion it would be better to have books on programming in general for beginners where all of that would be explained in detail like what classes are and what binary code is.

And there are excellent books on that subject - like Charles Petzolde's "Code: The Hidden Language of Computer Hardware and Software". That book must be the very starting point for any beginner programmer.

The other thing that really irritates me is how some simple things are explained in great detail over and over. Seriously, it's a book! Go back and re-read the first time the issue was explained if you don't get it! And then more complicated things are just explained in a couple words like oh by the way there's this thing that you can use here's one example. Next topic.

And it's so easy to pick up really bad manners from wrong books. Somebody who is new and doesn't know any better will adopt the techniques from the book and do it that way for a while. Like validation for instance. If you get a book on PHP most of the time they won't tell you that for the user's sake you should do it in javascript and THEN do it on the server-side before putting it into a database. No, if you get a book on a specific web language 99% of the time it will tell you how to do everything in that language and at best say "you could also do it in javascript but let's not worry about it right now".

I think for web-development it's crucial to give the whole package. Though the compound books that cover more than one language or technology are usually even worse. Which again goes hand-in-hand with the scarcity of books for professionals rather than beginners.

I guess what I'm saying is there need to be more books really teaching people the art of programming, the advantages and disadvantages of doing things one way or another, and listing some essential libraries and plugins. I mean seriously why would anybody in their right mind not use jquery? if you're spending 50 pages on javascript dedicate at very least a paragraph of what jquery is and that it's the way to go. It's just like at my university when we first started HTML class they were making us write things in notepad so that we would know all the tags and their properties by heart. Then next semester they gave us dreamweaver and told us to forget everything we learnt before because you don't need to know anything by heart. It's not a history class it's programming. Syntax is necessary but you can always look it up. The thing that important is to understand why and how, the abstract ideas, the logic behind it all.

Of course, it's easy to criticize others' work especially not having written any books... but it's just frustrating sometimes. Most of the time I personally use the book as a starting point for something I know nothing about and then learn through error and trial and googling the subject matter. Just keep in mind that you're not the only person in the world who ran into a question or a problem and there are a lot of forums where you may find the answers. It's always about asking the right questions. Like one of math-teachers used to say "fully understanding the problem is 50% of its solution".