kemayo's avatar

kemayo

I broke this site
375 Watchers30 Deviations
161.1K
Pageviews
Want to know how to play Minecraft? My kid made a VERY EDUCATIONAL and NOT AT ALL HILARIOUS tutorial for you.

Join the community to add your comment. Already a deviant? Log In
A not uncommon source of requests for help with journals/comments/etc on DeviantArt is:

How can I talk about HTML markup without all that stuff you try to do to help me with markup getting in the way? I don't want things to magically become markup, or get turned into links, or anything like that.


The solution to your problems is the completely made up and non-standard tag: <bcode>

Anything inside a <bcode> segment will be escaped and URLs won't become links. (The only thing difficult to talk about is </bcode> itself.)

For instance: <img src="https://www.google.com/notanimage.gif">

Was literally: Screenshot 2014-10-11 15.39.53 by kemayo

Editing to add: this may get a little messed up if you're using Writer and you expect it to work across paragraphs. It'll work most-reliably if you're using the raw HTML input via ctrl-e.
Join the community to add your comment. Already a deviant? Log In

%hashtags

1 min read
We launched part of tags: the bit where you can edit the ones based on your former keywords.



This is sort of a hard sell. We've put out the bit which requires people to go and clean up their tags... without having launched any of the bits which actually give them any benefit for having done so. Awkward!

In conclusion:

Join the community to add your comment. Already a deviant? Log In
Super Austere Cat by fartprincess

Super Austere Cat by fartprincess

...that is all. :D :D :D :D

Join the community to add your comment. Already a deviant? Log In
First, a quick primer, which probably consists of information that most of you already know.

So, you want to write an article with cool CSS, and you want to make it work nicely when it's displayed on the tiny screen on your smartphone. Tricky! However, with media queries it becomes pretty easy. By writing

.text { color: blue; }
@media only screen and (max-width:480px) {
    .text { color: red; }
}

...suddenly you have blue text at normal resolutions, and red text on a smartphone. Or on a browser which has been resized down to be really narrow.

In fact, try it out on this article! If you resize your window right now to make it narrower, it should magically invert its colors. Madness!

As an example of where this might be particularly useful, let's consider the #hq site update articles with that big ol' sidebar.

It looks like:

Untitled by kemayo

If we add this CSS:
@media only screen and (max-width:480px) {
    .sidebar { display:none; }
    .text { padding-left:33px; }
    .gr-box { background-image:none; }
}

It can now look like:

Untitled by kemayo


This is awesome, and makes writing skins targeting multiple resolutions far easier. Unfortunately, dA skins don't support it. It'd be a pain to add in support for writing arbitrary media queries, because our CSS parser just plain isn't set up to handle it at the moment.

So we're adding in a way to target mobile resolutions with a special class.

Instead of @media only screen and (max-width:480px), you'll add a class selector like .da-media[mobile], and it'll be magically transformed onto a media query wrapping that rule.

The above example becomes:

.da-media[mobile] .sidebar { display:none; }
.da-media[mobile] .text { padding-left:33px; }
.da-media[mobile] .gr-box { background-image:none; }

Right now [mobile] is the only media type supported. We may add others in the future, which is why we decided to have it explicitly stated in the current code.

A few things to keep in mind:
  • It's called "mobile", but that doesn't mean it'll only trigger when you're viewing the mobile version of dA. Anyone with a narrow enough browser window will see it. You can even watch it switching back and forth by resizing your window.
  • "Narrow enough" in this case means 767px. We might choose to tweak this value in the future, if it seems to make sense to do so.
  • This still won't help with pages like the blog index page, where you can have a pretty wide screen and still be forced into a narrow column.
Enjoy.


Join the community to add your comment. Already a deviant? Log In
Featured

Not quite self-promotion by kemayo, journal

Escaping your troubles with bcode by kemayo, journal

%hashtags by kemayo, journal

Important testing by kemayo, journal

Media queries and you by kemayo, journal