Fonts look different between Storybook and the main application (Webpack's dev server). Letters seem to take less space width-wise, and they seem bolder.
Their computed styles are the same (compared by eye in Chrome's DevTools). They also both are wrapped in the same components, only the store provided to Redux differs (houses only 4-5 irrelevant variables).
What could possibly be making Storybook look different?
Main application:
Storybook:
Related
Am working on a project where complicated visuals are generated on a server in svg to be rendered on a browser. One problem I'm having involves text layout.
In some cases, I dynamically generate some text in an svg text element, but need to know what the size it will be when rendered.
There are some other stack overflow questions that are somewhat similar:
Measuring dimensions of svg elements in Angular
Measure SVG text dimensions without rendering
The difference here, though, is that those are done in the web browser, I'm trying to do this on the server, specifically in a .NET Core application running in a docker container, which would ideally provide only a minimal environment.
Thanks so much for help in advance.
I am developing an online assessment package for elementary grade math (K-6) Many questions will need to contain graphics such as shown on this image:
https://www.dropbox.com/s/xwsi91l3bp9t3de/samplegraphics.PNG
All graphics needs to be generated on-the-fly (apart from photos of real objects that are stored in a database) - so that unlimited number of problems can be created). Another requirement is that this works well on both desktop and mobile devices.
I am looking for an advice as to what language / graphics package would be best suited for this purpose. I would rather do everything in one environment. If some of the above can not be generated on the fly, I would consider (but not prefer) off-line generation of many examples that are then stored in a database.
I have considered the following
php+gd -- seems nice for manipulating images; however 3D not readily available.
jpgraph.net/features/gallery.php seems like a nice addition for spiffy graphs
There also seems to be a 3D rendered for php phpclasses.org/package/3364-PHP-Compose-and-render-3D-object-models.html -- my 3D requirements are modest (basic shapes, no animation)
JS with different plugins i.e. threejs.org/ for 3D - but this seems like an overkill for my needs
there is also js interface to html 5 canvas : calebevans.me/projects/jcanvas/
and this: keith-wood.name/svgRef.html
Google charts also seems very simple to use, but it doesn't provide everything I need
CSS3 - seems like it can do everything (??)
gnuplot (??) - not on-the-fly
Basically, I am looking for the easiest way to accomplish this, without reinventing the wheel - I am just not quite sure what the trade-offs of different approaches are.
I'm working especially with Java web applications (in which mostly with JSF, Java Server Faces). I'm less concerned with the rest of the technologies.
Since different web browsers function less or more differently from one another, any web application should be designed in such a way that it can be incorporated and executed in a defined way by most browsers (might not be all). Which points should be kept in mind to design a web application in such a way that it can function almost exactly on most browsers?
What are the major differences among different browsers which should be noted by web application developers?
you have to check all of these points befor developing web applications with any language...
Almost all web developers (ahem! – perhaps that should read “quite a lot of web developers”) are aware of the need to check how their site looks in a variety of browsers. How far you go obviously depends on the resources available – not everyone is in a position to check Windows, Mac, Unix and Linux platforms. The minimum test would probably be:
Firefox, as that has the best standards compliance and is the second most-used browser;
Internet Explorer for Windows – currently the most widely used browser. It is essential to check both versions 6 and 7 as version 7
fixed quite a lot of bugs in 6 but introduced a new set of its own.
(Microsoft is however still kicking developers in the teeth by not
making it possible to install both versions on the same computer; you
will either need two computers or one of the work-arounds available
on the net.) Version 5 should preferably also be checked; as of
spring 2008 the number of users is not yet negligible. However it is
now uncommon enough that you needn’t worry about cosmetic issues; as
long as the site is readable that should be sufficient.
Opera – growing in popularity due to its speed and pretty good standards compliance.
For some time I also recommended checking Netscape 4 as well, as it often produces radically different results from any other browser, and was very popular for a long time. However the number of users of this bug-ridden browser is now so small (under 0.1% and decreasing) that it can now probably safely be ignored.
Check printed pages
Print some of the pages on a normal printer (i.e. with a paper size of A4 or Letter) and check that they appear sensibly. Due to the somewhat limited formatting options available for printing, you probably can’t achieve an appearance comparable to a document produced by a word-processor, but you should at least be able to read the text easily, and not have lines running off the right-hand side of the page. It is truly extraordinary how many site authors fail to think of this most elementary of operations.
You should also consider using CSS to adjust the appearance of the page when printed. For example you could – probably should – suppress the printing of information which is not relevant to the printed page, such as navigation bars. This can be done using the “#media print” or “#import print” CSS features.
Some sites provide separate “printer friendly” versions of their pages, which the user can select and print. While this may occasionally be necessary as a last resort, it significantly increases the amount of work needed to maintain the site, is inconvenient for the reader and shouldn’t usually be needed.
Switch Javascript off
There are unfortunately quite a number of Internet sites which abuse Javascript by, for example, generating unwanted pop-ups and irritating animations. There are also a number of Javascript-related security holes in browsers, especially Internet Explorer. As a result a lot of readers switch Javascript off – indeed I often do myself. (I have a page giving the reasons in more detail.) Some organisations even block the usage of Javascript completely. Furthermore few, if any, search engines support Javascript.
It is therefore important to check that your site still functions with Javascript disabled. A lot of sites rely – quite unnecessarily – on Javascript for navigation, with the result that the lack of Javascript renders the site unusable.
Clearly if you need it for essential content, that functionality will be lost. But there is no reason why the basic text of the site should be unavailable.
Avoid nearly-meaningless messages like “Javascript needed to view this site”. If you have something worth showing, tell the user what it is, e.g. “enable Javascript to see animation of solar system”.
Switch plug-ins off
The considerations for plug-ins (such as Flash or Java) are very similar to those for Javascript above. Check the site with any plug-ins disabled. The basic text and navigation should still work.
Interest the reader sufficiently, and he might just go to the trouble of down-loading the plug-in. Greet him with a blank screen or a “You need Flash to read this site” message and he will probably go away, never to return.
Switch images off
If scanning a number of sites quickly for information, many readers (including myself) switch images off, for quick loading. Other people cannot view images. So switch images off and check that the site is readable and navigable. This means, in particular, checking that sensible ALT texts have been provided for images. (This check is similar to using a text browser, but not quite the same).
its worth to take a look at this link for more info
I normally work on more back-end stuff so I never really thought about it before, but yesterday I was working on a site for a friend and after some frustration it occurred to me that there's no reason html files are the only ones that can be dynamically generated server-side.
I see people talking about javascript solutions to work around limitations of CSS, but why can't the CSS be dynamically "hard-coded"?
I know I'm not the first to come up with it because after thinking of it I looked it up and there were several examples but not tons, and I'd never seen it mentioned here on StackOverflow either.
Are there downsides to this compared to say resizing elements with javascript before the page loads? Any other potential gotchas I should be aware of?
I'm doing it in Django, but the question pretty much framework/language agnostic.
Looking through questions in the dynamic-css tag here I found {less} for Ruby which looks pretty cool, but overall there isn't a lot of talk about css files generated server-side.
EDIT:
I think some people may be confused about the intent of what I mean by dynamic css. I don't mean that it changes based on user content or anything. This is an example I found of how to center an image:
img {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
That's all great but that means knowing the size of your image in the css. Furthermore it means a different entry for different sized images. If the height and width were variable and the size of the image was determined server-side then it becomes more generic and reusable.
I'm sure there's other examples of where that would be helpful, but not having worked with css too much, that's the first one that I had trouble with that worked nicely with dynamic css.
Furthermore if performance became a concern I'm sure it could be cached properly with a little bit of work.
I agree with what others have posted. HTML is generated server side because the content is dynamic and no one would go to facebook, google, youtube, or almost anywhere else if they always served the same html. Server-side generation lets you post and view content as it is contributed and improved by users.
CSS on the other hand, is rarely contributed by users, and if it is, they are called web-designers and just generate static themes or files and are paid by the site owner. There are some sites where this does happen, like csszengarden, but the files are still static. However, they key difference is that users don't feel like having their only contribution to a site be the position of elements on a page and different colors. One of the whole points of CSS is consistency. Heck, stackoverflow could change the css every time someone posted an answer, relocate all the buttons, and change the whole page to ltr instead of just serving different html. Saying this would be annoying would be the biggest understatement of the century.
However, I don't think that's what you were asking about. The big advantage of dynamic CSS is as you mentioned: you can dynamically hard-code it. dot-less-css has some great examples on its homepage. This lets you write CSS in a simpler intermediate form, with colors stored in variables instead of constantly repeated, nested rule, and others features to make coding easier. These are features which many coders would LOVE to have supported by all browsers, so some people answered the need and created their own frameworks to 'hack' it together. Kind of the many say JQuery is how javscript should have worked the whole time.
Are there downsides to this compared
to say resizing elements with
javascript before the page loads? Any
other potential gotchas I should be
aware of?
The biggest issue with dynamic resizing is that it's difficult and error prone. If you don't do it right it can be a pain in the arse for you and your viewers. If the cool dynamic factor is worth the substantial extra work for you, then go ahead and do it. How you choose to doesn't make a huge difference. Javascript is more tried and true, server-side dynamic CSS is another cool way of doing the same thing. It depends what you're confident with and how bold you are.
Are you looking for something like Sass? http://sass-lang.com/
CSS tends to be cached, so generating it on the fly would a) need caching of css turned off and b) generate plenty more server overhead.
I assume it's fairly common to generate the css link in html on the fly, according to which browser was calling, but still pointing to one of a selection of static css files.
Lastly, the real reason it isn't server generated is probably that it's usually written by a designer, not someone doing back-end code, it's just a question of roles.
I think it's quite a clever solution and though many will disagree, I hope that the future of css will look more like that. However, standards are really slow to change and though there are frameworks like less, they're not nearly prevalent enough.
In a sense, it is simpler to handle a lot of things with javascript. What I mean by this is that if you're already doing animations or other things with JS, you might as well do all your dynamic changes with it. Use a library like jQuery and it only gets better.
We've done a bit of CSS to support internationalisation. There are lots of small details in CSS that have to change according to the locale you're serving a page in: mostly background images (which we use a lot for navigation buttons, and therefore have text on) and widths of form labels (which have to be a lot bigger in German - although we should really use cleverer CSS to avoid having to size them explicitly). Rather than maintaining N different stylesheets, we have one, but dynamically fill in the variable bits from values stored in a database.
Are there any open source scripts that will allow you to enter a website url and it will generate a color palette based on your site? I would prefer something that ran on a typical LAMP stack. I've been able to find many websites that offer the functionality as a service but no downloadable scripts...
Update: I'm looking for the palette to contain the hex color values
Presumably easiest would be to render the page and count the pixels of different colors from a screenshot, because otherwise you can't tell which colors from the CSS file actually cover large areas. It's unlikely you could script this easily from command line but if you have a windowing environment, writing such a program wouldn't be too complicated. If you use QT, you can load the page into a QWebView, use QPixmap.grabWindow to get the pixels, convert it to QImage and then loop through the pixels counting them.
When converting the web page to an image, a big point to have in mind is that a user could send it to a malicious website to take advantage of a security problem in whatever rendering engine you are using, and even take over the server. Make sure to at least disable JavaScript and Flash, even though that will make some websites look different from normal. Otherwise it's far too easy to get the program stuck in an infinite loop even if nothing else.