SVG: Scalable Vector Graphics

Was messing up with a logo of my own. And I was able to come up with this:

Then I figured, there's SVG. And so I learned, and came up with this:

<svg width="150" height="150" >
<rect
x="0"
y="0"
width="150"
height="150"
style="fill:white;stroke:black;stroke-width:20;opacity:1"
/>
<rect
x="25"
y="25"
width="100"
height="10"
style="fill:white;stroke:black;stroke-width:20;opacity:1"
/>
<rect
x="70"
y="55"
width="10"
height="70"
style="fill:white;stroke:black;stroke-width:20;opacity:1"
/>
</svg>

Scalable Vector Graphics are fascinating!

Happy coding!

finding @media

i don't learn the usual way. i reverse engineer. first time i learned html 10 years ago was by doing view source - and i still do. it was both fun and productive for me. and so i did.

but it took me a while before i found what i was trying to look for (and i don't even know what i was looking for, trouble with reverse *engineering).

*now, i'm reminded of the movie: paycheck with ben affleck. it was about reverse engineering. it was a good one. you should watch it

going back...

i was looking for:

1. a website with rwd(responsive web design)
2. clean readable codes(codes that uses line breaks)
3. line that would make me think(this is the "i dont know what i was looking for" part)

and i found: 

1. foodsense.is
2. its clean css code
3. and that line that made me think: line 1185

@media only screen and (min-width: 768px) and (max-width: 991px) {

so, i searched high and low... and found:

That’s a media query. It prevents the CSS inside it from being run unless the browser passes the tests it contains. - Paul D. Waite on stackoverflow.com

here's a recommended reading to understand @media better, courtesy of w3.org

let me leave you at that and i'll go study some more..

looking back

a flash back: 2006 is when i started my own web design firm and had several clients: until i joined the workforce and submitted myself to the norm which is to have a 9 to 5 job. reason? who cares. i just want back.

that time i ended as an advocate of standardization to eliminate the use of <table>. and to my surprise, what i have been fighting for endured and won without me. lols

what made me want back?

"responsive web design - is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)." from wikipedia

so, if you want to follow me in my journey to html, css and java coding, sit back, relax and enjoy the read.

moving forward.

all roads lead to this article of ethan marcotte published last may 25, 2010, entitled: responsive web design.

let me brush up on my codes, write down some notes and play around with my fave tool: notepad++

start here

Journal of me learning html css and java for web design.