whatsthatwei-blog

[whatsthatwei-blog]

SVG text outline fun

I’ve lately been a bit obsessed with SVG.  I was an illustrator in a past life, and this new found realization that I can do a little sketch, wave a magic wand, copy paste a long, complicated string of characters that look like jibberish, and boom, render this illustration on a screen was quite possibly the coolest thing in the world.

This realization led to little projects like this, this, and this.

So, what is an SVG?  Short for Scalable Vector Graphic, an SVG is a XML-based vector illustration format that can be edited and created with both text editors and drawing software.  SVGs are interactive and animatable and can be styled with CSS and scripted with Javascript.  You can create paths, basic shapes, text, gradients, and more, which make SVGs an incredible tool for anybody interested in graphic art and front-end design.

Much of what I did in the examples I linked above included creating an SVG in drawing software (Since my Creative Cloud membership has lapsed, I’m currently using Autodesk Graphic for Ipad which allows you to export illustrations to SVG) and then dynamically changing the CSS styling based on scroll position.

In this post, I’ll demonstrate something super simple (If you couldn’t tell, I’m a little bit obsessed with giraffes):

What’s cool about SVGs is that you can style it with inline CSS or use an external CSS stylesheet, and you can use CSS to color and style the fills and strokes of any element you create.

And the CSS:

What you see here is an SVG with a text element. We give the element a class name and then specify its font-size, spacing, and font-family with CSS. The fun part here is that by giving the element a stroke and fidgeting with the opacity of the fill, we can give our text a fun outline. The stroke and fill can be specified in the separate CSS file as well, but I'm about to add a fun gradient, so I'm keeping it all inline for now.

Disregarding the text for a moment, here’s an example of using the <linearGradient> element to define a gradient to your fill or stroke.  We’re applying it to the fill of a simple rectangle element right now.  Now, if we apply it to our text stroke and make its fill-opacity 0, here’s what we get:

Awesome!

Now, how do we animate this?  With each stroke, we have two attributes that we can manipulate: stroke-dasharray and stroke-dashoffset.  The stroke-dasharray attributes controls the pattern of dashes and gaps.  Add the following to your CSS file to see how it changes:

stroke-dasharray: 5,5

stroke-dasharray: 25,5

The stroke-dashoffset specifies the distance into the dash to start the dash pattern.  Using keyframe animations, if you set the stroke-dasharray to 5,5 and change the stroke-dashoffset from 0 to 20, you get something like this:

If we give the stroke-dasharray a length that is equal to the stroke length, and change the stroke-dashoffset from 0 to a length that is also equal to the stroke length, you can make it seem like the text is drawing itself.

Here's my final code:

CSS:

Checkout the codepen here: http://codepen.io/5ftwndr/pen/xdpRYv

[whatsthatwei-blog]

Passing notes, Redux style

My last blog post featured a form in React with child components before learning about Redux. I had a hard time figuring out how to keep track of state and child components and managed to do something in a completely ridiculous and complicated way:

In the address (child) component, the value state initializes as an empty string. The actual value of the input field is the prop value that is passed down from the parent. When you type into the input field, it calls a handleChange function that 1) changes this.state.value to the event.target.value and 2) calls this.props.enterAddress function (passed from the parent) and passes in the index of the child and the state value. Remember to call this function within a second function argument, otherwise the state might not have changed by the time you pass it to the this.props.enterAddress function. Now, in the main form, the enterAddress function finds the index of the address array of the child field and updates its value.

I'm happy to say that my days using callback function props and passing variables back and forth from child to parent components are over, because Redux makes this just so, so simple.

I don’t know much about Redux yet, but from what I do know, it’s a pretty cool way to keep track of state.  Here’s my code for the above:

The Notepad (parent) component:

The Reducer:

The Pin (child) Component

The parent component consists of a div that spans the entire screen. When it receives a double click, it dispatches an action of "ADD_PIN," passing in the coordinates of the mouse-click and a random number which I then use as the top/left position of the pin and the font-size to go in the input box.

Play with the app here: https://frozen-oasis-62460.herokuapp.com/

[whatsthatwei-blog]

REACT “Route-Finder” project, part 1: Forms and Children

It’s a weird feeling, being lost, which is how I felt for much of the past week learning React.  I was comfortable with Ruby and Rails.  Rails was something I could put my hands on and mold, something I was comfortable learning more about and tinkering with, but React and Javascript in general has been a struggle.

Ever couple lab I did had me feeling somewhat more confident, but then a “ok let’s put it all together” lab would take me hours, frustrated and close to throwing my laptop across the room.  So I did what I always do when I don’t *get* something.  I built a thing.

I started with a concept.  Let’s make a simple app where a user can enter an origin, a destination, and an unlimited number of addresses in between, and we would return the optimized route to go through the addresses.  Google Maps API makes this easy for us with a built-in “optimize waypoints” option, so my project should be easy.  Just hit the API and render the directions on a map and in written step-by-step instructions.

Here’s the demo app.

Step One: the Form.

By now, we know about stores, but when I built this project out on Sunday, I had no idea what a store was.  So of course I had to do this the hard way.

I wanted to build a form where a user can add additional addresses, then remove them if they needed to.  The parent form should keep track of the value entered in the children:

Parent Form:

Address (child) Form:

Here, we're keeping track of the addresses in the parent form's state, which initializes as an array with an empty string: ['']. When you click "(+) add address," you are pushing another empty string into that array.

In the address (child) component, the value state initializes as an empty string. The actual value of the input field is the prop value that is passed down from the parent. When you type into the input field, it calls a handleChange function that 1) changes this.state.value to the event.target.value and 2) calls this.props.enterAddress function (passed from the parent) and passes in the index of the child and the state value. Remember to call this function within a second function argument, otherwise the state might not have changed by the time you pass it to the this.props.enterAddress function.

Now, in the main form, the enterAddress function finds the index of the address array of the child field and updates its value.

Now that we know about stores in React, I'm hoping to consolidate this logic out. While it's a little frustrating realizing that I spent most of my day figuring out something that I most likely won't be using, but I think it was a valuable experience in learning how to keep track of functions in callbacks and to really understand the difference between props and states and how to use them.

[whatsthatwei-blog]

Recursively displaying nested child fields

Imagine you’re creating a Reddit-like comment system where people can respond to comments.  This can get very nested as people get deeper into reply loops, replying to comments that are children within children of comments.  No matter how nested a child comment is, it’s important to us, so we’d like to display it.

Zayne and I were trying to figure out how to do this for one of our projects the other day and got caught in what seemed like a never-ending loop:

<% @post.comments.where(parent_id: nil).each do |comment| %> <%= comment.body %> <% @post.comments.where(parent_id: comment.id).each do |reply| %> <%= reply.body %> <% @post.comments.where(parent_id: reply.id).each do |reply| %> <%= reply.body %> ... <% end %> <% end %> <% end %>

We don’t know how many levels a hypothetical comment chain could go (we didn’t want to set a limit, so technically it could probably go forever), and we don’t want to keep writing iterations like the above over and over again.  The answer to this is to display the comments recursively.

We already were keeping track of a child’s comment’s parent with a “parent_id” field, so the schema and model of our comments table look like the following:

/db/schema.rb

create_table "comments", force: :cascade do |t| t.integer "user_id" t.integer "parent_id" t.integer "post_id" t.text "body" end

/app/models/comment.rb

class Comment < ApplicationRecord belongs_to :post belongs_to :commenter, class_name: “User”, foreign_key: “user_id” belongs_to :parent, class_name: "Comment", optional: true has_many :replies, class_name: "Comment", foreign_key: "parent_id" end

This is a self-referential model.  Each comment has a parent comment (except top level comments, which is why we set belongs_to :parent as optional: true), and every comment can have many comment replies.  

Now, we want to be able to render a post’s comments in the post show page:

/app/views/posts/show.html.erb

<%= @post.name %> <%= @post.description %> <%= render @post.comments.where(parent_id: nil) %>

We render a collection of comments where the parent_id is nil, basically rendering only top level comments.  Create a partial to display the comment collection:

/app/views/comments/_comment.html.erb

<div style="padding:15px;"> <%= comment.commenter.username %> <div style="padding-left:3px;border-left-width:1px;border-left-color:black;border-left-style:solid;"> <%= comment.content %> <%= render comment.replies if comment.replies.any? %> </div> </div>

The recursion lies in this line: render comment.replies if comment.replies.any? Basically, if there are replies for the comment the partial is currently displaying, it will recursively render it.

With the above, you get something that looks like this:

We put our form for the comments in a partial that accepts 3 local variables: the comment initializer (Comment.new), the post (@post), and the parent coment id (nil if it is a parent comment).

In the show page: /app/views/posts/show.html.erb

... <%= render partial: 'comments/form', locals: {comment: Comment.new, post: @post, parent: nil} %> ...

Along with each comment: /app/views/comments/_comments.html.erb

... <%= render partial: 'comments/form', locals: {comment: Comment.new, post: comment.post, parent: comment.id} %> ...

And the form partial: /app/views/comments/_form.html.erb

<%= form_for [post,comment] do |f| %> <div> <%= f.text_area :content %> </div> <% if parent %> <%= f.hidden_field :parent_id, value: parent %> <% end %> <%= f.submit "Take that!" %> <% end %>

[whatsthatwei-blog]

It’s Always Sunny with CSS Animations

I first heard about Codepen when Tim Holman came to speak to our web development class at the Flatiron school.  His talk mainly consisted of a showcasing of his creative works, from a simple elevator scroll to top script to the beautiful Aquatilis website.  He reminded me that the primary reason I developed an interest in building websites in high school was as a creative outlet.  After Tim’s talk, I poked around Codepen a bit, mostly maintaining a healthy curiosity.  Happy to look from afar, but not very motivated to dive into things.

And then Jess - one of our instructors - showed us this very, very cool animated snow fox.

All with CSS?!  I had to figure out how.  Naively, I forked the pen, thinking I’d change some things around and know everything there was to know about animating cute CSS animals, and was promptly put back in my place by the 1473 lines of css in this monster of a thing.

So I decided to scale back and ask Google: 1) How do I create shapes with CSS?  and 2) How do I make things move?

Most of the shapes in the snow fox above are achieved with playing with border radius.  For example:

CSS:

.shape{ width: 200px; height: 200px; border-top-left-radius: 100px; border-bottom-right-radius: 100px; background-color: #000;}

So that’s pretty cool.  By being able to round out edges to rectangular divs, you can make circles and eventually any shape you want by strategic layering.

CSS uses the @keyframe rule to manage animation code.  Basically, adding @keyframes transitions you from one set of CSS rules to another.

@keyframes animate{ 0%{ top:0px; left: 0px; background-color: #8A54CE; } 100%{ top: 50px; left: 100px; background-color: #54A9D5;} } .shape{ animation: animate 2s infinite alternate-reverse;}

The keyframes can go from 0-100%, with 0 being the start and 100 being the end of the animation.  In this particular example, the div with the class “shape” starts off with the top/left position at 0px and shifts over 50px down and 100px to the right.  The background also gradually changes.  This animation can be made more complex by adding more elements at different percentages.

@keyframes animate{ 0%{ top:0px; left: 0px; background-color: #8A54CE; transform: skewY(20deg); } 50%{ top: 0px; left: 100px; transform: skewY(-20deg); } 100%{ top: 50px; left: 100px; background-color: #54A9D5;} }

Once you figure out your basic animation, you can assign it to an element:

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode];

Here's a simple sunset that I made after I got the basics down:

Here’s the link to the codepen: http://codepen.io/5ftwndr/pen/VpzGKx

And here’s a really cool beginner tutorial for anybody interested: https://robots.thoughtbot.com/css-animation-for-beginners

[whatsthatwei-blog]

A Community Journey

My journey into what would eventually become web development began when I was in eighth grade.  A friend introduced me to Xanga and I became obsessed with making skins.  I found an online community of aspiring designers (mostly young teenagers like myself at the time) making graphics and themes for services like Myspace, LiveJournal, Xanga, and Wordpress, and quickly started to teach myself everything I could.  

A lot of that included seeing someone’s work, thinking “oh that’s dope,” Googling or looking up their source code, and putting it away in a library of cool resources to pull out for my own website.  While this method of patchwork coding, pulling elements from here and there, and piecing it together until things stopped breaking magically worked for a while, it made me feel like a fraud.  Life is hard when you’re 15 and only have a pirated version of Photoshop, a tenuous grasp of WordPress, and an incredibly flighty attention span.  I was never able to sit down and learn the basics building blocks of coding and design, and therefore I could never really consider myself a web developer or designer, just ... a digital scrapbooker.

Fast forward to the present, I’d just learned the basics of Ruby at the Flatiron School and was learning Sinatra as an intro to moving to (dun-dun-dun) “The Internet.” I found myself wondering two Thursdays ago... “what can I create with the skills I had?”  We had done a really cool CLI project in our first week, and I knew a little something about databases and HTTP requests and although we hadn’t gotten to Rails at that point, I felt like I could make something simple and kind of cool with the skills that had been provided.

I thought I’d create a cool little group chat app.  There would be a Users table and a Groups table.  Users and Groups would be joined by a Roles table, which included a column role_type, which determined whether the user was an admin, member, or banned from a particular group.

I got so into building this project Thursday night that the next thing I knew, it was 7am on Friday morning and I’d just pulled an all nighter.  I was excited to show off my work, so I shared a link with some classmates, who immediately decided to tear my site apart.

What had started as a fun side project turned into a cool discussion and invaluable lesson about sanitizing form fields, validating information, and never trusting anybody ever, especially not your fellow classmates (just kidding, you guys are great) because they will do this:

This was probably the most fun I’ve ever had while having trolls blow up my site, because this was something I built from scratch and something I was able to show other people and thus, I was able to learn so much more from them.  You can’t do this when you’re working solo.

Another cool outcome of the project was pairing with Zayne, a classmate at Flatiron, who made the janky looking front-end look absolutely bomb.  Previous to this class, I’d always gone at things alone.  I was actually very nervous when our instructors at Flatiron told us we’d be doing a lot of pair programming.  I was afraid to work with other people because I didn’t want them to know how much I didn’t know.  I’ve since learned that coding with other talented individuals, talking processes and relationship tables out together, and general great pair chemistry is lightyears better than working by yourself.

The little sinatra app has since gone through multiple iterations.  It’s now on Rails, I’ve restructured my code so that the logic is all in the Models, and the Controller’s only job is to relay information to and from the Models and Views.  We were finally able to get Web Sockets to work!  I’ll be expanding on this project in my next blog post.

[whatsthatwei-blog]

Regular Expression.  Why.

Have you ever encountered the same solution to a problem time after time again, never fully grasping why it works, but accepting that it does?  And because this magical solution works so well and you’ve got bigger fish to fry, you put off researching why it works and choose to just accept that it’s magic and you shouldn’t question it?

That’s what regular expression is to me.  Up until last week, when Gee slacked me “I’ve actually been interested in learning more about regex, like regular expression,” I didn’t realize that “regular expression” was what this magic was called.

The first time I ever (unknowingly) used regex, was when I was trying to make myself a contact form for my personal website back in 2010 and I needed a way to make sure that the email was valid.

Here is part of the javascript email validation I used in my code.:

var hasError = false; var emailReg = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/; var emailFromVal = $("#emailFrom").val(); if(emailFromVal == '') { $("#emailFrom").after('Please enter a valid email address.'); hasError = true; } else if(!emailReg.test(emailFromVal)) { $("#emailFrom").after('Please enter a valid email address.'); hasError = true; }

/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$/;

How does one get from that gibberish to email validation??

I ran into Regular Expression a few more times since then, most notably in the Ruby labs we had to do at the Flatiron School.  For example, one of our labs instructed us to be able to break a paragraph string into sentences.  To do so, we needed to find a way to identify punctuation.

So, I turned to stack overflow:

string = "I am a lion. Hear me roar! Where is my cub? Never mind, found him." string.gsub(/[.?!]/, '\0|') # "I am a lion.| Hear me roar!| Where is my cub?| Never mind, found him.|"

Okay, I can kind of begin to understand what's gong on.  I think.  It’s obvious to me that, /[.?!]/ is basically searching for punctuation in the string.  Which makes a lot of sense, because Regular Expression (regex) is “a special text string for describing a search pattern.”  A wildcard on steroids, if you will.

https://www.reddit.com/r/explainlikeimfive/comments/w1e0p/eli5_how_do_regexeswork/c59gb18/

Regular Expression basically gives you a list of things to look for in a particular sequence with forward slashes often encapsulating the regex.  /hello/ - look for an ‘h’ followed by ‘e’ followed by ‘l,’ and so on.  Where it gets complex is when factor in special characters that give things special meanings.

And suddenly the gibberish from above makes sense!

/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$/;

/.../ - surrounds the regex used.  ^ and $ are anchor characters signifying start-of-string and end-of-string.  The [ .. ] looks for any character listed or in the range specified, followed by + which is basically looking for one or more of any character in the brackets.  So basically, this expression is looking for a collection of any of the characters in the bracket (A-Z and a-z, numbers, and some select symbols) followed by an @ sign, followed by another collection of characters (A-Z and a-z, numbers, ‘-’ and ‘.’ which takes into account subdomains), a “.” (the literal since it’s escaped by a backslash), and another collection of characters (A-Z and a-z) that is greater than 2.