CSS Grid Development Environment on Windows - css

I wish to upgrade my web site development environment. Currently using Adobe Dreamweaver (out of habit), but need to
Write HTML/CSS/PHP/MySQL code in an editor with syntax highlighting, code/tag completion, code hints.
have a browser window that reflects the code window results (on a save). So write HTML/CSS code, save it, and the browser window is updated
support for major browsers (choose the browser to be used in the display window)
allow adjust of browser window width to see responsiveness of my code
supports latest CSS, including CSS Grid and Flexbox
Windows 10 environment; not interested in adding Linux (WSL)
will consider an XAMP/WAMP environment for testing of PHP/MySQLi code locally
free or low-cost programs are preferred (I'm on a limited budget, but will spend the $ for what is needed)
An important part is things running in Windows 10 environment, and the side-by-side display of a code and browser windows in the editor.
I realize this might be an 'opinion' question (and will probably get some downvotes), but need to get some directions to look at. The googles haven't been helpful yet.

If I understand correctly you need a text editor that can help you to indent your code and highlight your errors ?
Try to take a look at https://code.visualstudio.com/. Vs Code Editor
You can find a lot of extension to help you write code and find errors

Related

JavaFX full screen problem on a CentOS without desktop environment

For my case I'm not able to give much detail for a start due to different reasons, but I decided to go straight to the point and ask. First I'd like to point out that this is a very specific question, to prevent unrelated general answers.
For a kiosk JavaFX 8 application that needs to be run on CentOS 6.10 without a desktop environment, but only with XOrg / X-Server for graphics support, there seems no way to prevent that an initial login window goes full screen. This login window's layout is defined via FXML as a medium sized rectangle which works fine on a desktop suited environment, without code differences. I have tried to call Stage's setWidth() and setHeight() methods (planning to try max variants soon) before and after showing it via show() method.
Does anyone have any quick idea about what issue could be causing this at first glance? I may provide other details on demand. Nonetheless, I will post any solution I come up with.
Thanks
EDIT: The current XOrg version on the affected machine seems to be xorg-x11-server-Xorg-1.17.4-17.el6.centos.i686
Problem (forced full screen windows) was caused by an existing invokation to dwm within .xinitrc file, used for a different existing application

Automate existing web browser session

How can I programmatically interact with an existing web page in a web browser launched in a standard way? For example I navigate to a specific page and want to be able to run a Python script that fills some edits or clicks some elements.
This should be possible at least through IAccessible2 for main browsers, but I did not find any pointers. To put it in another way, how do screen readers do it? And bonus question, is there Python library for it?
EDIT: I am looking for something more than user input simulation. I would like to programmatically read the DOM at least, write if possible. So far I have looked at code in NVDA which is very low-level and complex. Is there anything easier?
How can I programmatically interact with an existing web page in a web browser launched in a standard way? For example I navigate to a specific page and want to be able to run a Python script that fills some edits or clicks some elements.
The answer is keyboard/mouse macros if you have to visually see the browser as it happens. You can google macro programs for your OS.
But you most likely are looking for a headless browser such as PhantomJS, HtmlUnit, TrifleJS, Splash, and SimpleBrowser
Check out - https://saucelabs.com/blog/headless-browser-testing-101
When you mention 'interact with an existing webpage in a web browser launched in the standard way' you are talking about the DOM (Document Object Model).
Many QA environments are running testing scripts on code that has not been rendered by the browser into a DOM (you see the DOM when you inspect a page using your browser tools). When you use a headless browser it creates the DOM and then runs all the tests as if a human were clicking without having to visually look at it happen.
see - https://css-tricks.com/dom/
To put it in another way, how do screen readers do it? And bonus question, is there Python library for it?
Screen readers are interacting with the DOM at a low level. I do not know if there is a Python library. Most likely this would be overkill though unless you are building a desktop app that interacts with browsers like a screen reader does.
edit...
I did some more digging and found this article that is a much more verbose explanation of how screen readers interact with the browser/dom.
Also, there is a python API for manipulating the DOM and this library seemed popular.

using RStudio as an pseudo shiny app

This is a rather general, and curious question.
I am working on a moderately complex shiny app, using custom HTML and Javascript code (with menus and independent dialogs), using shiny as a communication protocol with the base R. Everything looks very nice, until I realised that RStudio itself is a web page (or am I wrong?)
The main reason to design a GUI in a shiny app is it's cross-platform, but it still needs to be opened in a web browser. Conversely, RStudio is also a web page but opens just like any other installed software. To me, it looks like a self-contained web browser with different menus.
Now the question: is it possible to use parts of RStudio in a different "app"?
For example, I would love to separate the code editor and the console from RStudio and use them in conjunction with other HTML and Javascript code to produce a GUI similar to RStudio but with different purposes.
To better explain why: RStudio is fantastic, but it has the one big disadvantage (no flame intended, others think this is a feature) that everything must fit in the same page. In order to make the code editor larger, one needs to shrink other parts of the interface. I would like to make them separate dialogs, creating divs when a menu is selected.
Thanks in advance,
Adrian
engineer from RStudio here. You are correct about RStudio itself being "a web page"; the whole UI is effectively done in HTML. There's even a version of RStudio which already runs in a web browser called RStudio Server.
There are unfortunately no extensibility points to do what you want. RStudio internals are largely anonymized and insulated from external access, which make them difficult to separate, re-use, or connect to other services. Here are a few pointers that may be helpful, however:
As a commenter pointed out, it is now possible to pop out the editor window.
You can make an RStudio Add-in which runs in a separate browser window when invoked. Depending on what you want to do in your separate window, you may be able to accomplish it with an add-in.
If you can't use add-ins, the easiest thing to do is actually to just change RStudio itself. It's an open source project, so you're welcome to hack on it and make improvements in reusability or UI flexibility. We welcome pull requests. :-)

Is it possible to "step through" a browser's applying of CSS rules for web development?

Is there a way or tool that could let me step through the painting of CSS rules, one by one?
Similar as one would do in an IDE with program code, but with CSS. (But I wouldn't preferably want to do it by taking the browser's source code and stepping through its underlying functions - I just mean stepping throug "updates" by CSS rules, in a form similar to a Web Developer Toolbar.)
I expect this is usually more tedious than useful, but in some cases it would really help, in web development, like debugging cats and owls or finding out how a particular effect is achieved.
edit to clarify, by "stepping through" I mean sg. like: potentially stopping the browser from painting another rule, after each end every rule I choose, before the next one is applied (each before the "final paint" of the page is finished), for inspection of what happens.
edit 2 after BoltClock's comment, I replaced the word 'render' with 'paint', to be more clear. Removed original to be uncluttered.
Beside already mentioned webtools i guess this is only possible if the complete source code of the browser is available so its possible to either locally debug or remote debug the browser application itself with breakpoints set to the interesting "toplevel" functions.
It is for example no problem to download the source of the Java based open source browser Lobo which can then be debugged like any other application directly from your IDE like eclipse, intellij etc.
I however dont think the complete source of products like the MS Internet Explorer will ever be fully available to allow you to debug its deepest magic (which in case of MS Internet Explorer probably also takes a livetime...).
So coming back to a browser that has source code available you can either:
Have the browser beeing compiled/ run inside a IDE and directly debug your local code
Have the browser running as application allowing remote debugging and the according source code as source for a remote debugger (mostly as well from within your IDE).
This way you can analyse the deep magic of such a browser where you see how the different resources like images, css etc. etc. are collected, validated, parsed, processed and in the end displayed.
Once the interesting functions are located and a good set of (conditional) breaktpoints is set this could be very useful when it comes to the behaviour of a specific browser.
If that however is too detailed for your context i guess there is no other possibility but to rely on the already given functionality regarding analysing the browsers behaviour like with chromes devTools or the Mozilla plugin Firebug. No doubt this will more and more be integrated in such plugins/ tools like the comment of user BoltClock suggests and it is always worthy to study the functionality of such plugins/ tools to take the biggest possible advance of them.

Flex printing on OSX pushes image off the page. How can this be fixed?

My Flex 3 app prints pages just fine from browsers on Windows using FlexPrintJob (not the browser print function). However, on OSX, the left and top margins show up larger and the page gets pushed off the right and bottom. Basically, the scaling is screwed up, and I can't see any way to adjust the margins in code.
Has anyone seen this discrepancy in Flex printing between Windows and OSX? Are there any known workarounds? I've searched all over and I can't find any good info on this (other than 12 unresolved printing bugs in the Adobe Jira DB).
And please don't say "don't print in Flex". I know Flex sucks at printing, but I have to use it. Thanks!
Edit:
PDF Generation is one route and while its a valid solution for some folks, I need to print directly. I'd like to see stuff like using regular Flash PrintJob, monkeypatches to FlexPrintJob, or just ways I can format my DisplayObjects before sending them to FlexPrintJob. None of the scaling options in FlexPrintJob work. My Flex Component is at 1.0 scale. I'm not sure what else I can do except for mess around with regular PrintJob. I'm putting a bounty on this for answers in this domain.
Switch to PDF generation. There are two ways to do this without having to purchase server-side licenses:
Use our library of Flex components - clear.swc, a part of open source Clear Toolkit available on Sourceforge. This process is described in Ch. 11 of the book Enterprise Development with Flex currently available as rough cuts on safaribooksonline.com
Use open-source library alivePDF.
Don't print by Flex PrintJob :)

Resources