We Keep Coding

Generate a diagram or schema that shows the relationships between all the files in a website

The last 9 months, I've been working on two big websites with PHP and Javascript without using any framework.
Every time I wanted to modify a page or fix a bug, I was spending:
10% of the time on finding the PHP file with the html content
20% of the time on locating the CSS and JavaScript files it is using
20% of the time on locating the PHP classes it's using and the functions and variables it's inheriting
20% of the time on locating all the scripts that are being called through ajax calls.
And only 30% percent of the time to actually fix the problem.
So, I wanted something that for every file that I want to modify within a project, after indexing all the aforementioned, it shows a list with all of these relationships on a diagram/flowchart along with the corresponding links to these files.
After a lot of Googling I couldn't find anything that directly solves this problem effectively. Right now, except for just opening all the includes inside the PHP file one by one, I am using Google Chrome's Inspector to quickly locate the includes from the Network tab or even add my whole Workspace in the Sources tab in order to apply CSS and JavaScript modifications directly from there. The problem with this, is that I don't have any options for locating any server-side code(PHP). Also I don't want to be dependent on any specific Web-Browser. Lastly, this solution doesn't provide me any graphical representation of the website's schema, something that's really important for understanding in seconds the whole structure of a webpage that you are going to modify for the first time.
I know that this question sounds a little off-topic but I couldn't find anything on the Web (maybe I didn't use the correct search keywords?) and I feel like it's something that a lot of developers struggle with sometimes so it could be really helpful if it's answered and stay visible. Even if I am missing the point due to luck of experience and there is a different approach to this kind of problems, I don't think I am the first one and It could be also good to be clarified for all the others out there.

I can't help you with the diagram part of your question but I understand that your problem is indexing.
You could use sublime which more or less work with all the operating systems and at the same time it's quite light. With it you will have indexing as you can see here.

jQuery DataTables altEditor issue

I've been trying to get this free alternative editor I found here to work but it keeps on blowing up on me because I am terrible at javaScript. Been debugging, reading documentations like mad all day but my scrub mind is out of ideas but I'm still trying anyway.
I deleted some of the stuff it had in there like ajax to server,the ID row, because I don't need those, I just want to be able to insert, edit, and delete rows in the table while keeping the <option> dropdown and pattern validation.
I prepared a jsfiddle with my exact setup here. Any hints/help will be greatly appreciated.

Managed to figure it out myself.
This jsfiddle is an updated version that works.
This diff shows the modifications I made compared to the original.
What is the point you ask?
The point is to be able to validate stuff before adding/editing them, to have a neat dropdown select, and to be able to send the data from the table itself as a JSON string in a "Column Name" : "Cell Data" format so that I can json_decode($_POST['table'] and use a nice associative array to add the data to my database.
Why?
Beats me, do what you want with it. I plan to use it to send a list of addresses one way only to the server.
Why not use the official editor?
Because I can't justify the price for my meaningless project and I hardly need 10% of what it offers.
Big thanks to Kingcode.com where I found the free datatables editor alternative and KasperOlesen for making it more awesome.

Altering a page from another site

Sorry for the vague question name - didn't know how to phrase it.
I have built a PHP engine to parse web pages and extract phone numbers, addresses etc.
This is going to be used by clients to populate an address book by simply entering a new contacts web address.
The problem I am having is useability:
At the moment the script just adds each item (landline number, fax etc) to a different list box and the user picks the correct one - from a useability standpoint this is hard work (how do you know which is the correct contact number without looking at the site)
so my question (finally!)
How would achieve the functionality of
http://bartaz.github.io/sandbox.js/jquery.highlight.html
On someone else website (I have no problem writing this functionality).
FOR CLARITY**
I want to show someone elses site (their contact page for example) on my site BUT I want to highlight items I have found (so for example add a tag around a phone number my php script has found)
I am aware that to display a website not on your domain an iFrame would be used - but as I need to alter the page content this is useless.
I also contemplated writing a bookmarklet that could be run on that page - but that means re-writing my parsing engine in javascript and exposing some of my tricks to make it accurate.
So I am left with pulling the page by cURL and then trying to match up javascript files, css files etc. that have relative URLs
Does anyone know how best to achieve this - and any pitfalls that might befall me.
I have tried using simple html dom parser - but it is tricky to get consistency and I also dont know how having two sets of tags, body tags etc. would affect sites.
If anyone has managed this before and could point me to the tools / general methods they used I would be eternally grateful!
PLEASE NOTE - I am very proficient with google and stack-overflow and have looked there first!

The ideal HTML solution
The easiest way to work around the relative paths for an arbitrary site would be to use the base href tag to specify the default relative location (just use the url up to the filename, such as <base href="http://www.example.com/path/to/" /> for the URL http://www.example.com/path/to/page. This should go at the top of the head block.
Then you can alter the site simply by finding the relative parts and wrapping them in your own tag, such as a span. For the formatting of these tags, the easiest way would be to add a style attribute, but you could also try to insert a <style> tag in the <head>.
Of course, you'll also need to account for badly made webpages without <html>, <head> or <body> tags. You could either wrap the source in a new set of these tags, or just put in your base and style tags, hoping that the browser will work out what to do.
You probably also want to make this interactive, so you should also wrap them with some kind of link, and ideally you'll insert some javascript to handle their actions by ajax. You should also insert your own header at the top of the page, probably floating at the top, so that they know they're using your tool. Just keep in mind that some advanced pages might then conflict with your alterations (though for those cases you could have a link saying 'is this page not displaying correctly?' to take the user to your original basic listbox page as a backup).
The more robust solution
Clearly there are a lot of potential problems with the above, even though it is ideal. If you want to ensure robustness and avoid any problems with custom javascript and css on the page you're trying to alter, you could instead use a similar algorithm to that used in text based browsers such as lynx to reformat the page consistently. Then you can apply your algorithm to highlight the relevant parts of the page, and you can apply your own formatting as well without risk of it not displaying correctly. This way you can frame it really well and maintain your interface.
The problem with this is that you lose the actual look of the original page, but you should keep the context around the numbers and addresses which is the important thing. You would also then be able to use some dynamic javascript to take the user to each number and address consecutively to improve the user experience. Basically, this is rigorous and gives you complete control over the user experience, but you lose the original look of the website which may or may not confuse your users.
Personally, I'd go for the second option, but I'm not sure if anyone's created such a parser before. If not, the simplest thing you could do would be to strip the tags to get it as plain text. The next simplest would be to convert it into some simple text markup format like markdown, then convert it back into html. That way, you'd keep some basic layout such as headings, italicised and bold text, etc.
You definitely don't want to have nested body tags. It might work, but it'll probably mess up your formatting and be inconsistent across browsers.
Here's a resource I found after a quick Google search:
https://github.com/nickcernis/html-to-markdown
There are other html to markdown scripts, but this was the more robust from the few I found. I'm still not sure though whether it can handle badly formatted pages or ones with advanced formatting, try it out yourself.
There are quite a few markdown to html converters though, in fact you could probably make a custom converter yourself quite easily to accommodate your personal needs.

Maintain height of the website

I have a client who wants to do a website with specific height for the content part.
The Question:
Is there any way that when the text is long / reach the maximum height of the content part, then a new page is created for the next text.
Within my knowledge, somehow I know this can't be done.
Thanks for helping guys!

You will probably want to look into something like jQuery paging with tabs
http://code.google.com/p/jquery-ui-tabs-paging/
Unfortunately you would need to figure out the maximum number of characters you want to allow in the content pane and anything after that would need to be put into another tab. You can hide the tab and use just a link instead.

Without more knowledge on what you're development is, this is a difficult question to answer. Are you looking to create a different page entirely, or just different sections on a page?
The former can be done using server-side code (e.g. Rails), and dynamically serving out pages (e.g. Google results are split across many page).
The latter can be done with Javascript and/or CSS. A simple example is:
<div id="the_content" style="overflow:hidden;width:200px;height:100px">
Some really long text...
</div>
This would create a "scroll" bar and just not disrupt the flow of the page. In Javascript (e.g. JQuery), you'll be able to split the content into "tabs".
Does this help?

(Almost) everything is possible, but your intuitions are right in that this can't be done easily or in a way that makes any sense.
If I were in your position, I would go up to the client and present advantages and disadvantages to breaking it up. Advantages include the fact that you'd be able to avoid long pages and that with some solutions to this problem, the page will load faster. Disadvantages include the increased effort (i.e., billable hours) it would take to accomplish this, the lack of precedent for it resulting in users being confused, and losses to SEO (you're splitting keywords amongst n pages).
This way, you're not shooting down the client's idea, and in the likely case the client retreats from his position, he will go away thinking that he's just made a smart choice by himself and everyone goes away happy.
If you're intent on splitting it up into pages, you can do it on the backend by either literally structuring your content into pages or applying some rule (e.g., cut a page off at the first whole paragraph after 1000 characters) to paginate the results. On the frontend, you could use hashtags to allow Javascript to paginate the results. You could even write an extensible library that "paginates" any text node. In fact, I wouldn't be surprised if one didn't exist already.

image protection in rails

I am looking for ways to protect my product images and I don't know if there's anything out there better than what I've already found: disable right click, use a transparent image in front of your picture and watermarking. Obviously none of them is perfect but I was curious if someone came up with a better solution to this problem.
Also is there any rails plugin to aid with that ?
Thanks

I really, really hate blocking right mouse click. It reminds me nineties when on right mouse click you get message that coping of this site is forbidden ;).
You can't protect your picture. For me the best way is just to put some copyright information and that's all.

There is no way you can do that at all, that is just smoke.
When you uses images in your website, they are downloaded to the client and they can be found in the cache, even if you try to block the user from right clicking and saving it.
They can even look at your html/css/javascript find the location for your picture and put that in their address bar.

You can't stop people from pinching images on the internet, so don't waste your time trying. Instead use a combination of strongly worded copyright messages underneath the image, and only store low-resolution files on the server.
For a photography site I've built in Rails, I have Paperclip trash the original high-resolution photo after it has generated a selection of smaller thumbnails. Combine it with a watermark in a corner of the image and you should have enough to make it a pain to steal a high-quality image, while not inconveniencing users.
Frankly, if I was to visit your website and you'd disabled right-click, I'd be gone in a matter of seconds.

I was looking for something similar, but for random images. I have not found anything so I thought I'd contribute here.
My last solution, using signatures, is something that could be applied here, though with some modification which I have also included at the bottom.
We should differentiate between (at least) two things:
A. Prevent someone saving images from within their browser.
B. Prevent someone writing a script to rip all of your images automatically.
Solutions:
A.
Pretty much impossible and also not what you want. Imagine a website that hassles you when you try to use your browser the way it was meant to be used. Right you'd be unhappy. There are perfectly legitimate reasons for someone to want to save an image, the most basic and flattering one would be to use it as a wallpaper on their computer or phone.
The best solution would be to include a watermark. That way people are reminded of where the images are from and they can still use them for private things.
I think this general rule applies on the internet: if you don't want it to spread outside of your control and you receiving credit: don't put it online.
B.
This is a less nice scenario. The most basic thing I've once done to make ripping images somewhat harder is to a. use unpredictable urls to images and b. create a script on your server that when called will fetch an image from your file system and then output this image. For example: http://example.com/some_image.php The code is really simple:
<?php
$name = './img/ok.png';
$fp = fopen($name, 'rb');
header("Content-Type: image/png");
header("Content-Length: " . filesize($name));
fpassthru($fp);
Source: SO answer on the topic
So what I have done once is I created a script like above, but added a timing option in there so that calling it (from the same session) twice within lets say 10 seconds would return the same image. This way an automated script could only go as fast as 1 image every 10 seconds. Additionally you could make the url contain some sort of timestamp hash:
http://example.com/some_image_$(md5(Time.now + "secret")_Time.now).png so for example:
`http://example.com/some_image_aihfio1n...oi12nof_1396723820.png
What you'd do to check if fetching the image is allowed is:
You take the requested file name, strip off 'some_image' and then the md5 hash. You then check if the given time ('1396723820') is within now and 10 minutes (allow for fluctuation). Then check if the hash is correct for that timestamp + 'secret'.
You can see this as a signature that is sometimes used in digital communication, although very basic and not very strong or anything.
Using this method for your production images could be something like this:
http://example.com/some_image$(md5($image_id, "secret",$timestamp))_$image_id_$timestamp.png
$image_id here is some sort of static identifier for your image (file_name, id of the product in your db, etc).
Please anyone, correct me if my assumption that this makes it harder to predict file paths is incorrect. In the end, the first rule to creating encryption patterns is "don't do it". So is the second. But this is a fairly innocent one to play around with.

have a look on how commercial image suppliers (like iStockphoto.com) protect their images that and see if that fits your need.