Scott Radcliff

How To Know What Controller Ember Wants You To Use

As I continue my dive into JavaScript frameworks and currently working with Ember, I really struggle with knowing what Ember wants me to do.

With Rails, the server log usually gives me a clue. With Ember the server log, or output, is less helpful. Part of the reason for this is because Ember seems to silently handle errors. I think part of the reason is that Ember is doing things for me, and part of it is the fact that JavaScript loves to fail silently.

When working with a feature in an existing Ember app, I needed to now what controller Ember expects. I had a form using Dockyard’s super cool EasyForm, but every time I submitted the form, the console would yell at me saying that my controller didn’t handle the action.

After hours of reading docs and trying to understand how the controller was wired up for this form, a coworker had the perfect solution.

{{controller}}

Place that code in your template and it will print what controller that template is tied to.

I think of this as similar to Ruby’s debug method, where I can print out data in the view so I can try and diagnose errors I don’t understand.

It’s not a great solution. Some sort of proper debugging method would be way more helpful, but it works for now.

If you know of a better way, please let me know.

How To Clear A Sqlite Database With The Sequel Gem

I’ve been playing with a new Sinatra app. While I am building it out, I am getting back to basics. I’m only adding what I need as I need it. I really have no preconceptions of what I am building. It’s a journaling app, and I am just starting with a big ‘ol textarea.

Keeping with simplicity, my database is super simple. I am just using sqlite and accessing it via the Sequel Rubygem.

While putting things together, I had some crappy data I wanted to clear out, but didn’t want to write some method to reset the database or setup environments yet. Turns out it’s pretty simple with Sequel.

With a sqlite database called journal and a table called entries, in a terminal, I just run

sequel sqlite://journal.db

This drops me into an irb session with DB setup as my database.

Sequel implements a drop_table method

DB.drop_table(:entries)

Now I have my clean database.

Presenting About Remote Teams At Self Conf

I will be presenting at self.conference on May 29-30. Not sure about the time slot yet.

I’ve been working on 100% remote team for about six months, and it’s been unlike any remote team I have been on before. Some things have worked well for us, and many things have not.

I will be presenting on what we have learned about working remote. Some things you can try, what types of things you want to avoid, and some tips to help make your team a little tighter when you are all spread out.

Hope to see you there!

The Startup Community And Pyramid Schemes

It’s no secret that I have an issue with Startups. Not the idea of startups, but the community around startups. The whole thing is based on getting a hit. Building something you don’t care about to get rich. In it’s essence, the majority of the startup scene is equal to a giant get rich quick scheme. And if you’re a developer, it’s more like a pyramid scheme and you are at the bottom doing the work and getting the least reward. Unless of course, it’s a hit. Then you get climb up the pyramid and be a cherished success story.

Business, at it’s core is not that hard.

Here it is, in it’s simplest form.

Find a market

Discover what that market wants/needs

Build what that market wants/needs

Sell the product

You don’t need some stupid vocabulary. You don’t need follow some stupid community that is run by billionaires that want to capitalize on your skills. All you need is a problem to solve that is worth paying for and the skills to solve it.

A Beginners Mind

I never really thought it would happen. I never thought I would be the guy that was having trouble learning new things. Learning new ways of progressing my craft.

But this has happened. I’m a beginner again and it’s proving to be difficult.

I’ve been using Ember on a project and on most days I’m drowning. Ember does a lot of stuff I don’t understand. Figuring out what that stuff is, is the hard part.

Ember really isn’t a DOM framework. JavaScript works differently inside of Ember. I have to change the way I think of JavaScript. It’s no longer elements and traversing through them. It’s now all objects and properties.

Objects and properties aren’t difficult to understand. That’s just basic programming stuff. It’s how they get wired up that doesn’t make sense most of the time.

I think this would be much easier for a beginner. If someone doesn’t have any prior knowledge of DHTML and jQuery, there are fewer hurdles to get over.

I’m starting to come around to Ember. It certainly hasn’t been easy. I have to swallow a lot of pride. I have to ask a lot of questions that seem simple. These are questions that I haven’t asked in years. Things like how to submit form data. Stop laughing. Or how to link pages together.

If you have been programming for a while and are thinking about trying out Ember. Forget what you currently know about JavaScript, forget the DOM, think in objects and properties, and know that there is a lot of magic.

Timebox the feature you are working on. If you can’t get to a working solution in that time, swallow your pride, and ask for help.

Auto Repair Businesses Are Clueless

I'm setting here in a car repair place using their completely crappy wifi. Seriously. This may be the worst wifi I have ever experienced. It would be better to not offer any.

But that's not what I want to talk about. I want to talk about how incredibly terrible these places are. There are reasons why customers don't like coming here. They get taken advantage of. Every single time. Call it an upsell if you prefer, but that isn't what it is. It's taking advantage of your customer because you have the upper hand. It's cheap, unethical, and void of any morals. Just awful.

So if the way most mechanics try to cough upsell cough their customers is wrong, what could they do differently?

Simple.

Provide the customer the service they need. Or the service they asked for. And then take your upsells and compile them into a list. Provide that list under the current charges with a valid reason why the customer might want to purchase them.

Provide them what they asked for, and what you suggest. Allow them to just buy what they want. Without hassle.

Present the additional services as problems being solved. There is not a customer in the world that cares about something, let alone paying for something, that isn't a problem.

Here are your charges today Mr. Radcliff. I've taken the liberty to add some suggestions below. Ohio winters are really hard on vehicles and these services will help keep you running with piece of mind that a family member won't be stranded somewhere with a broken vehicle.

You got me! You just told me that this will help make sure my wife doesn't get stuck somewhere. That is super important to me. And I'm reaching for my wallet.

Stop preying on your customers.

A Few More Chapters To Go

I just finished up the initial section on HTML. Still needs to go through some editing and formatting.

Deciding what tp concentrate on was a little harder than I thought. I feel myself diving into the more technical stuff, and that's not what Changing Lanes is yet.

After the first draft of the HTML chapter, I included

  • How it's the backbone of the web
  • Syntax with elements and attribute descriptions
  • Document structure with doctype, head, and body
  • And a note on viewing local files in the browser and viewing source

Here's a little sample


Document Structure

To wrap up our intro to HTML and send you on your way to learning the foundation of the web, we need to understand the document structure of HTML.

First, all HTML is just a file. Like any other text file on your computer. To create a new HTML file, open up one of the text editors I mentioned in the beginning of this book and create a new file. Save it as index.html.

That’s it.

That .html extension makes it an HTML file. Now you are ready to fill it up with HTML.

A little about the document structure of HTML.

There are two distinct sections to an HTML document. The head section, where all of the data goes. And the body, where everything you see goes. I often refer to the body as the canvas of the web page.

One more little side note. In addition to the head and body sections, there is a DOCTYPE. It’s not really a section, but more of a declaration. It tells the browser This is an HTML document. Display all this stuff as HTML.

It we had a skeleton of an HTML document. It would look like this.

<html>
  <head>
  </head>
  <body>
  </body>
</html>

You may notice some indentation. This is not required, but certainly helps seeing that a certain tag is inside of another tag.

You may remember that all HTML tags have a closing tag (some are self-closing). You may also notice that we start with an <html> tag, and it has a <head> and a <body> tag nested inside of it. We know this because the closing tag is at the bottom.

The <head> and <body> tags are part of the content of the <html> tag. When I use the indentation, I can see that these are part of something else. Not a big deal with a skeleton of an HTML page, but a huge help with a large page where it’s a little harder to find things.


Now onto CSS, JavaScript, and closing it up.

Remember, you can pre-order Changing Lanes if you are looking to learn how to create web sites.

Learn How To Make Websites With A Detailed Guide

I've been working on something. I've been thinking about for a few years. Right about the time I quit teaching.

I asked myself where do people go when they want to learn how to make websites, but don't know where to start?

What about people that think dev bootcamps are overkill, or think they just cost too much?

I remember what that's like. This was me about 10 years ago. I didn't know anything. I had no idea where to start. I just knew that I was ready for something new.

I was ready to change lanes and go in a different direction.

I am combining my experience learning how to, and making websites, into a guide that sets you up for success and shows exactly what you need to do to get started.

I'm calling it Changing Lanes: a step by step guide on learning how to make websites.

You'll learn.

1) An introduction into web design and development.
2) An introduction to Web Standards. What they are and why they are important.
3) How to find answers to your questions. Where to go and how to ask for help.
4) How to separate presentation, structure, and behavior for your website.
5) A brief overview of HTML. How it works, how to write it, and where to find more information.
6) A brief overview of CSS. How it works, how to write it, and where to find more information.
7) A brief overview of JavaScript. How it works, how to write it, and where to find more information.

The book will sell for $10. But I am offering a pre-sale for $5 with a sample chapter included.

If you buy the book now, you will get the sample chapter in PDF form on how to ask questions and an overview of how browsers work, and the complete book in PDF on Monday with all updates to come after that.

Pre-order Changing Lanes for $5

How To Get Started With Css

Once you master HTML, it's time to style what you have and level up. And that means CSS. Before we get into all the nuts and bolts of CSS, I want to take a minute and explain what CSS is, what it's used for, and what not to do.

CSS is yet another acronym in a very long line of acronyms you will learn if you want to make web sites. It stands for Cascading Style Sheets, and is a way to target specific HTML elements on a web page and add styling to them.

That styling can be color, size, shape, effects like drop shadows, or even the position of the elements.

While HTML is pretty straight forward, CSS is a different animal, and can become quite complex. I will spare you the hard stuff and concentrate on the basics to get you going.

Style or File

CSS can be added a few ways. The two main ways are in the head of the HTML document, and in a file that is linked into the head of the HTML document.

To include CSS in the head of the document, you define a style section.

<style>
  CSS stlyes...
</style>

To include a file, add a link to that file.

This example assumes the file is named main.css in a folder called styles.

<link href='styles/main.css' rel='stylesheet' type='text/css'>

Syntax

The syntax of CSS differs some from the syntax of HTML. In HTML, you have tags that use < and > with elements in between.

CSS has an HTML selector, followed from curly braces {}, and a series of key/value pairs separated by a semicolon. If you have zero programming experience, this will be your first foray into curly brace syntax. This type of syntax will carry over into many languages. CSS is not a programming language. But it does share some syntax. That is where the similarities end.

An example.

If I wanted to access all paragraphs on the page and set the text to bold (a terrible idea, but a decent example), I would access the p tag and set the font-weight to bold.

p {
  font-weight: bold;
}

The CSS declaration starts with HTML element p. This grabs all paragraphs on the page. Then the opening curly brace tells the browser that we are ready to define what each paragraph looks like. Then we start with the styles. The font-weight declaration tells the browser that we want to define the text of the paragraph. Specifically the weight of the text. When we define bold, we tell the browser to make everything in there as bold as it can. We could have passed other values in. Instead of bold, we could have said normal, bolder, or a any one of (100, 200, 300, 400, 500, 600, 700, 800. 900); each of those a little bolder than the previous, and finally inherit.

Mozilla is your friend and has an awesome resource for what's available with CSS.

The Cascading Part

Now that we have the basic syntax out of the way, you'll notice that we just used an HTML element to grab all of the elements on the page. That's great. But what if we just wanted the first one, or the last one, or even one in between. We can use ids to get specific.

To use an id, you just add an id attribute and give it a unique name. Ids must be unique and cannot be duplicated on the same page.

<p id='first-paragraph'>text here</p>

Now, in your CSS declaration, instead of using just the HTML element, we can add the id selector.

p#first-paragraph {
  font-weight: bold;
}

You will notice the pound sign #. This is how you will select any id. This grabs just that one element and applies styles to it, but leaves all other paragraphs alone.

Playing, Learning, and Progressing

That is the basics. With this you can grab and style anything you need to on your webpage and start styling them.

Play is important. Visit the Mozilla Developer Network and start playing with some styles and see what you can come up with.

Enjoy!

Getting Started With Web Development

If you are thinking about getting started with any type of web design or development, you have likely seen lots of stuff about code schools, Rails workshops, and bootcamps. Not so much about how to get started as a complete newbie or how the very basics of web design and development work.

I'd like to take a few moments and explain to you how the core of anything on the web works. The reality is that without HTML, we can't display anything on the web. Without HTML, none of the previously mentioned ways about learning matters. HTML is the foundation of the web.

HTML isn't that hard or scary, and once you understand it, things really start to make sense.

How HTML Works

HTML is an acronym for HyperText Markup Language and it's core job is to display what you tell it. HTML will not decide how to display anything. It will know what to display what you tell it to.

The first thing to understand is that HTML is just a text document. It's just like any other document. The only difference is how it's formatted and it's file extension (the .html part).

Warning: Microsoft Word, Apple Pages, or any other Word Processor does not create text documents. I am referring to plain text documents. You will need a text editor. Check out Atom or SublimeText.

To create an HTML file, you can simple open a text editor, create a new file with any name, and save it with an html extension. A sample html file might be called intro.html

It could look like this:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="my first webpage">
  </head>
  <body>
    <h1>Hello World</h1>
    <p>My First Document</p>
  </body>
</html>

HTML Tags

If you have never seen HTML before, there is a lot here. I'll break it down.

The <html> element should actually be <!doctype html>, but the browser tries to display a new document. You can google HTML5 doctype to see how it should be formatted

The first thing to notice is all the greater than (>) and less than (<) signs. These are part of HTML tags. Inside this greater than and less than signs are HTML elements. This is the part that tells the web browser what to display. You can see a full list of HTML elements on Mozilla's Developer Portal.

Anything you place between the opening and closing tags are part of that element. For example, <h1>Hello World</h1> is a heading that displays the text Hello World because we have instructed the browser to display a heading by using the <h1> html tag, and to make that heading read Hello World because we placed that inside the opening and closing tags.

Some tags don't have the closing part. These are self-closing tags. More on those another time.

Head Section

Once you get past the doctype, you see two sections. Head and body. These are the main sections of the document. First the head section. This is all meta data. It's just giving the document information. If you look at the meta tags, you will notice that the description meta tag has a name and content. This tells the browser and search engines (we will save search engines for another time) what this web page or web site is about. It does absolutely nothing for what is displayed on the page.

Later on in your learning, when you get into CSS and JavaScript, this is where you will tell the document how to get to those files.

Body Section

Think of the body section as your canvas. Not to be confused with the JavaScript canvas. I'm simply using the word canvas here to illustrate that this is the part of the document that you actually see.

Anything you place between the opening and closing body tag will be displayed on the page.

In this example, the html page is displaying Hello World as a heading, and My First Document as a paragraph.

You will notice that a lot of HTML elements are simply abbreviations of larger words. Things like img for image, p for paragraph, and a for anchor.

The body section of HTML documents can get pretty complex with things like forms, large images, and complicated layouts. Understanding what is in the body section is critical. It can get overwhelming very quickly. Spend some time playing around and continually build upon your knowledge.

Go Forth and Play!

Well, that's the basics of an HTML page. If you follow that structure, you will just need to know that elements to use to display what you want. That just comes with experience and playing around. Spend some time on Mozilla Developer Portal and start experimenting.

If this helped you at all, I'd love to hear from you. Reach out to me on Twitter @scottradcliff or send me an email at scott@scottradcliff.com.