HTML / CSS Editor with tabs on both sides - ide

I have searched high and low but never found something like this, so I have to ask!
When I edit an HTML or CSS file (say index.html) I usually try to take advantage of other people's ideas (I am a perpetual newbie-amateur), so I also open someone else's index.html to get ideas from (read copy-paste!).
Now I have two index.html files side by side and must take care NOT to inadvertently change the "other" file (that I'm copying from). Most editors allow you to show the full pathname to each file but for good reasons this is not always the best solution.
Things get worse when I edit several HTML and CSS files...
A good solution would be to be able to drag the "read-only" tabs to the right and leave the "working" tabs on the left side.
Is there an editor that can be configured this way?

Related

How to efficiently work with related files in PhpStorm/WebStorm/IntelliJ IDEA?

I used to put my CSS, HTML, and JS all in the same file just so I could keep them grouped, open all at the same time, close all at the same time, and just search for style or script tags to switch between contexts. Now I'm using some tools that require these to be separated into their own files, and I'm finding it frustrating to be switching between these files all the time efficiently.
I've searched the web and documentation extensively for some advice. I've found I can:
create all the files together with a multi file template
configure files with the same name in the same folder to be nested.
However, I still cannot figure out how to do anything like the following:
open all related files together
when I close one file, close all other related files
Switch to a specific related file with a keyboard shortcut in the current tab/view
Open or go to a specific related file with a keyword shortcut in the opposite tab/view
Are there any keyboard shortcuts, tools, plugins, or intelligent approaches to work with related files in IntelliJ IDEA?

Download pdf - accessibility for screen readers

I'm curious how to make an accessible button for screen readers which downloads PDF.
I know that there is an option using href and pass there an URL to the pdf file, and even a download attribute inside an anchor to open a download window.
But it's not a good way for a screen reader. The screen reader reads it as a link but actually, this is not a link because it triggers downloading a pdf file rather than redirect to another page. So this can be confusing for people with vision disorders who rely on their screen readers.
Is it a good accessibility way to create such a button? Or relying on <a href='path-to-pdf'>...</a> is completely enough and not confusing for people with disabilities ?
General answer and basics of file download
Both a link and a button are perfectly fine, it doesn't make much difference.
IN any case, it's very important to explicitly indicate that the link or button is going to download a file rather than open a page, to avoid surprise.
The simplest and most reliable is just to write it textually, i.e. "View the report (PDF)".
You may also put a PDF icon next to the link to indicate it, but make sure to use a real image, i.e. <img alt="PDF" /> and not CSS stuff, since the later may not be rendered to screen readers and/or don't give you the opportunity to set alt text (which is very important).
A good practice is also to indicate the file size if its size is big (more than a few megabytes), so that users having a slow or limited connection won't get stuck or burn their mobile data subscription needlessly.
It's also good to indicate the number of pages if it's more than just a few, so that people can have an idea on how big it is, and if they really can take the required time to read it.
Example: "View the report (PDF, 44 pages, 17 MB)"
Note that similarly, that's a good practice to indicate the duration of a podcast or video beforehand.
Additional considerations with PDF
First of all, you should make sure that your PDF is really accessible. Most aren't by default, sadly.
You should easily find resources on how to proceed to make a PDF accessible if you don't know.
Secondly, for an accessible PDF files to be effectively read accessibly, it has to be opened inside a real PDF reading program which supports tagged PDFs, like Adobe Reader.
The problem is that nowadays, most browsers have an integrated PDF viewer. These viewers usually don't support tagged PDFs, and so, even if you make an accessible PDF, it won't be accessible to the user if it is open inside that integrated browser viewer.
So you must make sure that your link or button triggers an effective download or opening in a true PDF reading program, rather than opening in an integrated viewer of the browser.
Several possibilities that may or may not work depending on OS/browser to bypass the integrated viewer. They have to be tested to make sure they work:
Send a header Content-Disposition: attachment; filename="something.pdf"
Send a Content-Type different than "application/pdf" or "text/pdf", e.g. "application/octet-stream" to fake out basic type detection
Make the link don't ends with .pdf
Use the download attribute of <a>
The most reliable are response headers. Most browsers don't rely only on file extension alone to decide what to do.
Either a link or a button is fine. The most important thing is that the user is informed about what the element does - i.e. it downloads/opens a PDF file. So, this should be reflected in the element's label, whether that is a visible text label or an icon that uses alt text or aria-label to explicitly describe the element's purpose.
I agree with Quentinc's suggestion to also inform the user upfront about the number of pages and size of the document - that's a nice touch that I don't see very often!
PDF accessibility is a whole other topic, but again as QuentinC points out, there's not much good in allowing a user to download or view a PDF that isn't accessible, so it's a good idea to ensure the PDF has been tested against JAWS/NVDA/VoiceOver/TalkBack to ensure it is readable.

PhpStorm Search Everywhere is not working, do you know the solution?

I don't know this is off topic or not, I'm using general channels. Is there a solution for Search Anywhere in PhpStorm. I work with Laravel but when I use the feature I can't find the file even though it exists.
Looking at your screenshot: based on the fact that ALL files in the project tree have that sort of "dirty yellow" background color... it looks like ALL of your files are considered excluded / outside of the project for some reason.
Most likely a user error of some kind. E.g. you may have opened it from a different path (i.e. when symlink is involved), may have c=misconfigured it later somehow (marked folder as Excluded by mistake or whatnot) or maybe even some sort of config file corruption (pretty unlikely).
Anyway, please do this:
Close your project
Go to the project root folder and delete your .idea subfolder (that's where your project settings are stored).
If you have that project still visible in the IDE (Recent Projects on the Welcome screen) -- you may remove it there as well (to avoid any possible confusion).
Now create a new project in PhpStorm from scratch using existing files: just use "Open" and point to the folder with your project.
Please check filter option. If you are doing file search then click on Files tab.

Edge Animate Automation

Most Adobe products have the ability to be automated using AppleScript or ExtendScript/JavaScript but I don't seem to see the same capabilities in Edge Animate. Maybe I'm just missing something. I'm looking to be able to do things like open the document, add images, save the document, etc. Has anyone been able to find anything like this? I've done a number of different searches to no avail.
I'm not exactly sure what you're asking, but I think you're talking about adding your own javascript, which can be done by clicking the curly brackets located next to any of the elements in the animation, or hittin ctrl+E to see the full code.
Second, in terms of opening the document, you should be able to just double click the an file that it creates, and saving the document is just like in any other program, file>save(as).
Adding images is as simple as file>Import (hotkey = ctrl + I).
not exactly what I was asking for, but I did end up finding a solution. I was looking for a mechanism to be able to control Edge Animate similar to how you can control InDesign, Photoshop, and Flash via VBScript, and JavaScript respectively. This allows you to do things like import images into your document from an external script, save the document, export contents, etc. In the end, I wrote some code that sends key-strokes to the application and that resolved the problem although not ideally, IMHO. Thanks for your responses, though.

Code editor with multiple categories of opened tabbed files?

Hi can anyone recommend a good, and ideally free editor that will allow me to group opened files based on a module or component I'm working on?
I'm learning joomla so I need one with php,JavaScript,HTML.
I'm currently using dreamweaver. It's great but I hate having to traverse through the file tabs which are usually hidden because I have so many files opened at once. I would ideally want something that will allow me to group these opened files almost like a folder structure where I can create a category for grouping the opened files together so as keep things that are related to one another close by.
Failing this please recommend what is the best approach when dealing with lots and lots of opened files.
I like how browser works because it allows me to open multiple instances and let me group the sites I want via tabs to each browser instance. Dreamweaver won't allow more than one instance. Is there anything out there that can do this?
UltraEdit gives tab a different color depending on the filetype - CSS are green, Javascript are orange, etc. I find this very useful. It also allows the tabs to spill over to several rows, instead of forcing them to one line like Dreamweaver.
If you do have to use Dreamweaver, you can use the file directory panel to traverse the folders on your hard disk. Double-click on a file in a subdirectory to open it, or switch to its tab if it is already open. The file directory panel is on the top-right by default, I think.