HTML building blocks

html css with-video

![building](https://images.unsplash.com/photo-1453106037972-08fbfe790762?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=900&fit=max&s=ef88ca82b38a0181373327913684a0c0) ### Block Elements I like to think of blocks as containers. They contain text, images or other blocks. **Anything** can go inside of a block. Inline elements, inline-blocks and even other blocks. `div`, `article`, `aside`, `footer`, `header`, `main`, `nav`, `section` elements have only one characteristic: `display: block;`. Another common block is `p` or the paragraph tag. Paragraph tags typically have a margin bottom and are used to separate bodies of text. Be careful when using them. ### Inline Elements Inline elements are used to target words in a body of text. `strong` tag makes a text bolder, `em` usually used for _italitcs_ and `span` if you want to do something special, like change the color of the word or give it a background. There are a few css properties that inline elements ignore that apply to block elements, such as `margin-top`, `margin-bottom`, `height`, and `width`. But ironically enough they respect, `padding`, `margin-left` and `margin-right`. ### Inline-block Elements Inline-block elements combine the two above. You can place an `inline-block` element in a body of text and it'll be cool. It respects properties like `height` and `width` but will align itself with the `baseline` of the surrounding text. `img` tags are common `inline-block` elements. ### DANGER DANGER! It is not recommended to have `block` elements inside `inline` elements. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#Inline_vs._block-level): > Generally, inline elements may contain only data and other inline elements. So don't do it! Well do it, but you'll find weird behaviors across multiple browsers. A **common** mistake is when folks place images inside of links. ``` <a href="www.somewhere.cool"> <img href="kitty-photo.png"> </a> ``` Here we have an `inline` element wrapping an `inline-block` element. That's no bueno. To avoid bugs and odd behavior, it's good practice to turn those `anchor` tags into `block` or `inline-block`. To be honest, just turn it into a block. ### Now with video! I'm experimenting with screen casting. I made a video on this subject. Check it out: [https://www.youtube.com/watch?v=QJhbOnB0ORQ](https://www.youtube.com/watch?v=QJhbOnB0ORQ) ### Nerd out ( References ) - [MDN Block elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements) - [MDN Inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements)

Rails Cookies

rails security

![Cross on a hill](https://images.unsplash.com/photo-1448960968772-b63b3f40dfc1?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=900) [Photo by Luke Budimaier](http://www.lukasbudimaier.com/?utm_source=Unsplash&utm_medium=website&utm_campaign=unsplash) I misunderstood the difference between `Rails` `session` and `cookies` until this afternoon. **Wrong** I thought that `session` was a **secure** cookie unaccessible to the browser via dev tools and or javascript because it had a `secure flag` on it. **Correct** Rails 4 signs the cookie before sending it down to the browser and deciphers it when the browser returns the cookie back to the server. This allows the server / clients to keep a session. Before Rails 4 the session was just encoded via base64. I.e. anyone could decode it easily and manipulate a session cookie. Talk about awful. [Reference](http://stackoverflow.com/questions/19877820/difference-between-sessionfood-and-cookies-permanentfood) **Also Correct** The secure flag tells the browser to **only** send the cookie if the end point is encrypted (i.e. https / ssl) [Reference](http://resources.infosecinstitute.com/securing-cookies-httponly-secure-flags/) **Wrong** I thought the `session` cookie remained in your browser even when you closed your window / tab / browser. **Correct** Both `session` and `cookies` get canned when a user closes the browser, i.e. quits. The reason why I thought the cookies always remained is because I have set my Chrome browser to "Continue where you left off" on startup. If you want the cookie to remain you *must* give it a `expires` flag setting when the browser should invalidate the cookie. `Rails` has a nice feature that sets the expire date 20 years from now. More than enough if you ask me! [Reference](http://apidock.com/rails/ActionDispatch/Cookies/CookieJar/permanent) Remember kids never put sensitive data in your cookies!

Breaking the Mold

journey culture

![Tv in the grass](https://images.unsplash.com/photo-1438109519352-a52c41243c1a?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=900) [Photo by Pablo GarciaSaldaña](http://www.proyectohansbach.com/?utm_source=Unsplash&utm_medium=website&utm_campaign=unsplash) **TLDR:** Any time you join a new team, you have to let go some of your old habits and pick up some new ones. Yesterday I noticed something at my new job. I'm so used to moving fast and getting something to work that I was more willing to rip out a gem than to work through the problem. Let's add some context. I'm currently working on implementing a messaging system at [Binti](https://binti.com). To gain the most ground we decided to try out a gem called [mailboxer](https://github.com/mailboxer/mailboxer). To be honest their data model is a bit overly complex for what we needed. It's a mini app within itself ( technically it's a Rails engine ). Some simple questions forced me to write some long awful, buggy queries. For example, is there an existing conversation between these two users? At my last job, I care more about speed than maintainability. Ideas came in left and right and I needed to ship them yesterday. What I have to watch out for is taking the habits of what worked in my last job into my new job. That's part of the on-boarding process I suppose. Figuring out how to develop in the same rhythm as the rest of the team. I need to realize, I have the luxury of taking my time now. A good problem to have.


regex elixir

I started to learn Elixir. Mainly because Sean, [the veteran engineer](http://www.kaoruk.com/posts/12-30-2015-thanks-for-the-cut), is working on a project and was open to teaching me Elixir. Plus he runs [elixirschool.com](http://elixirschool.com), so you can say he knows a little bit about it. I don't learn best by reading, I learn best by doing. So I read through the *basics* section of ElixirSchool and then headed over to [Exercism](http://exercism.io). Exercism has common problems to solve in your desired language. What's great you get feedback from the community! I solicit some in the Elixir slack channel! Starting out, the problems are pretty simple. Mostly about string manipulation. Welp string manipulation typically involves regex. I'm no regex expert, in fact I'm pretty sure I'm still a newb. Time to level up! ### Unicode Characters Instead of using `~r/[a-zA-Z]/` you should use `~r/\p{L}/`. Why? Because the latter will capture letters beyond A-Z. Letters that appear in German, Freude schöner Götterfunken, or Russian, УХОДИ. Don't be an American programmer, be a world programmer! JavaScript unfortunately does not widely support Unicode, so you'll have to figure out another way. I don't know of that way....yet! [Reference](http://www.regular-expressions.info/unicode.html) ### Lookaround Let's say you have a string: `2A3B` and you're trying to split it to `[ "2A", "3B" ]`. HOW? Cause if you do `~r/\d+\S/` you'll get: `[ "", "" ]`. `Split` removes the matches and splits it on those matches. Welp you can actually match things in between characters. `~r/(?=\d+\S)/`, this will give you `["2A", "3B"]`, huzzah! You can also match things based on what's around it. Say you were trying to match the second p in Apple. `~r/(?<=Ap)p/`. The `?<=` will tell the regex engine to look back to see if there is a match of `Ap`, if there is then `p` is a match. So `String.split("Apple", ~r/(?<=Ap)p/)` will return `["Ap", "le"]`. To look forward: `~r/p(?=le)/`. This will tell the engine match p only if it is immediately followed by `le`, but won't match `le`. Neato! [Reference](http://www.regular-expressions.info/lookaround.html) ### Repeating Characters What about grouping repeating characters? Like turning `"AAAABBBCC" ` into `[ "AAAA", "BBB", "CC" ]`. There's a cool `\1` that will match the previous match. Tack on a `+` and you'll group similar characters together. `~r/(\p{L})\1+/` Notice though that `\1` has to be after `()`. That is because the engine needs to know what pattern you want to repeat. [Reference](http://www.regular-expressions.info/backref.html). Phew, that's all my Regex new learnings for now. Hopefully these techniques will help you in the future. At the very least you know it's possible and know what to google for! *EDIT* Shout out to [Martin Svalin](https://twitter.com/martinsvalin) for teaching me these techniques!

Making Excuses

honest ramblings journey

![green tonic](https://images.unsplash.com/photo-1455621481073-d5bc1c40e3cb?w=800) [Photo by Varshesh Joshi](https://500px.com/varshesh?utm_source=Unsplash&utm_medium=website&utm_campaign=unsplash) I'm feeling a bit blah. This post isn't going to have a theme or a point, it's just going to be my ramblings. I might be feeling a bit blah because I don't want to do my taxes. I actually am almost done, I just have to put in my tax deductibles. But really who wants to audit themselves? I should have learned by now that I should just keep a record of this throughout the year so my next year version of me can just simply put in a number...but alas here we are. This is my second cup of coffee and it's doing **jack**. Maybe it's because I haven't exercised in a while. Or maybe it's because I'm just making excuses. Really there is nothing in my way other than my dumbass feeling. <iframe width="420" height="315" src="https://www.youtube.com/embed/PH8nTfxwByY" frameborder="0" allowfullscreen></iframe> I'm just making excuses...