I have a lifetime of looking at this, as natural as can be in Dev Tools.
<div>
<span>Hi :)</span>
</div>
I am enjoying using Web Components, but what I don't like is this, forcing me to essentially click twice as often.
<cool-div>
#shadowroot
<cool-span>
#shadowroot
"Hi :)"
</cool-span>
</cool-div>
Do I have any options to make this a bit easier to work with in dev tools? I mean a good start might be as simple as expanding cool-div would expand its #shadowroot so that I don't have to click twice but ideally also getting rid of the fact that I can fit half of the vertical content on my screen. I'd take any tips that make it a bit less awkward.
Thanks.
Related
I have successfully implemented horizontal scrolling on wikiprop.org but the example I followed has this inertia/momentum effect, where you can swipe and it’ll continue scrolling and gradually slow down—as is common across the web.
Why doesn’t my horizontal scroll do the same? On my machine, at least, the scroll feels “sticky” meaning it doesn’t continue scrolling to a gradual stop when I do the “fast swipe” gesture.
Much appreciate any support, and please let me know if this is not clear enough.
I looked at your site in Chrome with the developer tools opened. If you look at the following screenshot, you'll see that Chrome is only rendering some of the CSS. It appears you wrote your styles using SCSS and an error occurred in the pre-processing step. Since browsers can't read SCSS, you can imagine all the possible issues that might arise.
I am working on an ePub3 and I created an interactive document that requires the full page to really look how it should. Unfortunately when I compile it with Readium to test the functionality in the ePub it shrinks it to one half of the viewport and leaves the other half empty (because it is, after all, a book).
I googled around and messed with the CSS and DOM and I cannot figure out how to remove that extra, unused page and make the one page with the interactive app take up the entire viewport.
Does anyone know if this is even possible? I know it might be pushing the standards of the ePub, but this app is a huge part of the ePub.
I appreciate any advice that can be given!
This is a reader-specific display function (not an ePub3 function), so you won't be able to control it. It is similar to what happens on most tablets if you turn them to read in landscape mode... The thing is, many readers don't read in this mode but some do, and you wouldn't want to take that ability to choose away from them.
If you are doing this in a reflowable book, I would suggest having the App be on it's own fixed layout XHTML page so that it is full-screen (on tablets) at least. You can do this by creating the new XHTML page and putting a link to it.
The best visual solution I can see in Readium isn't really a solution, but you should just go to "settings" and read in single page mode and possibly have a tooltip recommending that to readers when they get to the app.
Best of luck!
I've recently found that most of the measurements I thought I knew were actually different from what I thought they where due to browser specific defaults. I assessed that all my knowledge of my visual inspections were relative...item A is 20px so I can see that Item B is 22px. However because of browser hidden defaults...this method doesn't work too well. How can I know what absolute pixel count is.
Currently, I just created a 20px by 20px ruler in a graphics editor with tick marks.
Attached here
Now I can move this around by using absolute positioning and measure things. However is there something built into the development tools to do this. I'm using Firefox 10 right now.
Thanks
Chrome's inspector tool shows the dimension of any element that you happen to hover over. However, if you must remain loyal to Firefox, Firebug can show the exact dimensions of any element upon hover as well. When you open up Firebug, click "Layout" in the sidebar to the right. Then, when you hover over an element, the dimensions will appear within that box (no clicking necessary). Not exactly as intuitive as Chrome's inspector tool, but it works regardless.
Are you just looking for a tool to easily measure heights and widths without messing around in Firebug?
I'd suggest this add-on for Firefox (also available for Chrome): Web Developer
If this isn't what you're looking for, can you please clarify?
Edit: If you can't install software or add-ons, use the no-install Firebug Lite
there is a sweet measurement tool called "measure it." you can find it HERE. that's the best one i have found so far.
another thought... you could check and make sure all of your different browsers aren't at all zoomed in... view actual size etc...
also - are you using a "reset" of any kind ? if not - you could check out the meyer reset - or normalize... or - the freak reset... (that combines both).
I'm working on a new web site that currently is configured as a full height (that is, 100% available browser window) application. In terms of layout, it is something like this - http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html.
Our web site does nothing with the actual browser window size, like switch browser into full screen mode. It only uses the available space.
Operationally, this is going to be a semi-internal data entry application. Almost all pages are data entry forms or summary pages
Personally, I think makes a very nice looking app. However, some of the other developers are comparing this design with content in scrollable tags to be the same as iFrames. And as such should be avoided.
Is there any background / best practices information about designing a web site this way?
I personally love sites that choose to do this; I think that it's a great way to use up the available real-estate that you have. My one piece of advice would be to add a min-width and a min-height to your page so that you don't have to worry about your site breaking if the browser gets too small. This will not only improve the overall user experience, but will also prevent future headaches when trying to get your design to work in obscure dimensions.
It looks fine, and at first looks more like a 'real' app. The only weirdness with this sort of thing is that on OSX you get a bit of a bouncy effect when you hit the top and bottom because of the rubberbanding on the scroll. If you aren't sure what I mean, grab an iPhone/iPad/Mac and scroll up and down past the top or bottom of the content.
In reality it shouldn't be too hard to enable or disable this feature, so why not start with it, then revaluate once you have gotten going.
There aren't any good practices or background information that I know of on this subject. Just follow the normal rules of thumb, if it looks good, is light and loads well, and it is usable, why not?
I hope the question police have something better to do while I can get some much needed information.
I try to do my HTML and CSS on firefox using the Web Developer Toolbar addon. It saves a lot of time but I have a very simple question. I have searched all the options in the addon. Is there a way to get this thing to pop-out like firebug. Cause it takes up half the screen while doing the page and that becomes a pain really fast.
I know its a very simple question but if you can help me out, thanks!
I played around with it and it seems you are right. It doesn't have a "separate window/tab" feature. But here are two thoughts for what they're worth.
I assume you have dual monitors cuz of your question. There's a [position] icon next to the "Edit HTML" and "Edit CSS" tabs. (it looks like a lil window with a green arrow. Click on it to reposition the editor to the left or right of your browser, then minimize FF and stretch it across your monitors :D haha! but seriously, I tried it and it works perfectly!!
Lame answer: If that doesn't suit you, ask Chris Pederick on the WDT forum: http://chrispederick.com/forums/
Good luck!!