Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Usually when I convert PSD to HTML/CSS I use simple code editor (Sublime Text, Brackets) + emmet. Recently I tried to use Jade, because I've heard that it significantly speeds up the process, and it seems to me that it slows down the converting process. And here's an important detail - I usually convert one-page PSDs, so maybe Jade is more powerful when using for bigger projects?
The purpose of templates is to place content / markup / etc that are shared between multiple pages in a single place (mostly so that it doesn't need to be edited in multiple places when you change it).
If you are only creating a single page than using a template is pointless (unless that page has relatively complex sections of content that are repeated (e.g. a biographic profile consisting of a heading, an image, a list of data points, and some paragraphs of data, all wrapped in a collection of elements with certain classes applied to them).
The techniques you use to design the markup are immaterial.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I was wondering if there are any differences between CSS images and SVGs on your website.
By CSS images I mean images created with divs in HTML and styled in CSS (like this: https://codepen.io/andrewrock/pen/jOEZxrY).
Yes, CSS images are more time consuming, but apart from that they're both animatable, you can use CSS variables on them, make them dynamic with JS, ...
So what are the differences of those 2? (Performance, Rendering, ...)
There are countless reasons why you should use a svg instead of a group of html elements:
Creation
There are hundreds of svg editors that allow in a simple way to realize a drawing or an icon. This is not the case for html. So drawing a building icon in full css would be really painful.
Sharing
The fact that it uses a standardized file such as svg, allows you to export your work to other tools and easily be exploited by someone else. Use tricky css rules to manipulate some span or div can be difficult for a newcomer to your project to understand.
User experience
On a website that use svg, you will able to open it on a new tab or to download it. Thats very comfortable for an user for exemple. If you use html an user will not be able to manipulate and thats can be really annoying
Performance
Because the svg is called most of the time a file you can compressed it on your server to gain more space and performance with some tools like Appendix J
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Just came across a project that had custom-made tags.
Something like:
<buildings>
<building-1></building-1>
<building-2></building-2>
</buildings>
(This code doesn't do anything; it's an example)
(It's not mine) (https://codepen.io/perbyhring/pen/jpQwav) What is the use of this?
Those custom HTML elements have been introduced some time ago and should make HTML code more readable.
"Those elements provide a way to build own DOM elements but also have some drawbacks as simply defining and using an element called blue-button does not mean that the elements represent a button. Tools such as Web browsers, search engines, or accessibility technology will not automatically treat the resulting element as a button just based on its defined name."
Read more about them in the html standard.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
AFAIK people create their own table-like-components and the use of the good old HTML tables is kind of "outdated". Now I'm at the point where I would need a table for my vuejs application. I'm using bulma and the doc states this:
Table
The inevitable HTML table, with special case cells
The "support" badges below that title state that there isn't much support for it (only variables) and the text itself sounds like "well... since so many not-up-to-date-people want it, here, take it".
Should I rather go the "unordered list" way or something else? Like creating a component to represent a row and a component holding the table together? I'm not asking for vue specifically, but for a rather "modern approach" and how to do something like that properly.
The table element is still the correct way to provide tabular data in a semantically correct way in HTML. So if you use it semantically correct it is fine and not outdated per se.
However having that in mind, it might be a valid decision for you to go with new approaches like CSS Grid if that helps you to faster and more user friendly accomplish the creation of new Elements on your website, as the end-user should always benefit from your decisions.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am looking at some design option on recreating an existing generated website. The site currently has a number of UML class diagrams within it. The diagrams are generated with a corresponding imagemap, which allows the user to interact with different parts of the diagram.
An example diagram is available here : http://www.datadictionary.nhs.uk/data_dictionary/diagrams/diagrams/organisation_diagram_im.asp?shownav=0
Feedback from users have asked for features like :
Image Scaling
Image Panning
It appears that using Image Maps is considered a bit "old school" in HTML these days. If that's the case what are the alternatives?
You can use SVG for the same.. For SVG tutorials refer this or you can use HTML 5 canvas.
But HTML5 is still not supported on every browser so you can go for SVG. SVG might be costly in terms of performance in case of large number of objects.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I use CSS to stylize my pages. I use % style instead of using px values. However, since I need to add several elements of different sizes in different positions, I end up spending more time in designing the layout than the coding.
I tried using a WYSIWYG editor but it uses px style coding. Can someone help me with a solution so that I can design the layout quickly and proceed to real part? I use WordPad right now.
The best thing to do is practice more. Get better at coding them, and reuse parts from prior projects where it makes sense.
There is no WYSIWYG tool that will save you time, for most projects. They all write garbage code, because editing with such a tool is a bit ambiguous. It is up to you as a web developer to write your markup and styles in a way that will be interpreted correctly across many user agents.