Just a few steps:
1. Add a Text object to one of your layouts.
2. In the corresponding event sheet, create the event System."On start of layout", then add the action for Text object called "Set web font".
3. Use Google Web Fonts to find a font you like, then click on the icon for "Quick-use". The name/Family of the font will be at the top, and scroll down to find the URL for the stylesheet of where to load the web font from.
More info:
- How to use your own web fonts
- Using web fonts in the Text object
- Manual:Text object
~ Danial Goodwin ~
2015-05-20
Level Up - Ruby on Rails: How to create a very minimal blog website (two different ways)
As I was refreshing myself with Ruby on Rails, I've decided to share these notes. To follow these steps, you don't actually need to know any Ruby or Rails, but you should have them installed already. I'm using Ruby 2.1.5p273, Rails 4.2.0, Windows 8.1, but these steps are simple enough to do on any version.
I show two different ways to create a very code minimal blog. It also demonstrates the power of of Rails scaffolding.
1. Just run the following commands one after another:
rails new quick-blog
cd quick-blog
rails generate scaffold post title:string body:text
rails generate scaffold comment post_id:integer body:text
rake db:migrate
2. To create a post or comment, make sure that the `rails server` is started. Then, in browser, navigate to `/posts/new` or `/comments`.
3. Done
1. Run `rails new very-minimal-blog`
2. Run `cd very-minimal-blog`, then `rake db:create`
3. Create the model for the posts: Run `rails generate model Post title:string body:text`
4. Run `rake db:migrate`
5. Create a controller for the posts: Run `rails generate controller Posts`
6. In that controller that was just created in `app/controllers/posts_controller.rb`, add some code so that it looks like the following:
class PostsController < ApplicationController
def index
@posts = Post.all
end
def show
@post = Post.find(params[:id])
end
end
7. In `app/views/posts/`, create a new file called `index.html.erb` and add the following code:
<% @posts.each do |post| %>
<%= link_to "Read me", post_path(post) %>
<% end %>
8. Create a way to get to the posts. In `config/routes.rb` add, `resources :posts`
9. In `app/views/posts/`, create a new file called `show.html.erb` and add the following code:
<%= @post.body %>
10. Done. :)
## To create a blog post ##
1. Open Rails console by running `rails console`
2. Run `Post.create(title: "My Title", body: "This is my awesome blog post!")`
## To view the blog ##
1. Start the Rails server by running `rails server`
2. Navigate to `localhost:3000/posts`
~ Danial Goodwin ~
I show two different ways to create a very code minimal blog. It also demonstrates the power of of Rails scaffolding.
Using scaffold
1. Just run the following commands one after another:
rails new quick-blog
cd quick-blog
rails generate scaffold post title:string body:text
rails generate scaffold comment post_id:integer body:text
rake db:migrate
2. To create a post or comment, make sure that the `rails server` is started. Then, in browser, navigate to `/posts/new` or `/comments`.
3. Done
Without using scaffold
1. Run `rails new very-minimal-blog`
2. Run `cd very-minimal-blog`, then `rake db:create`
3. Create the model for the posts: Run `rails generate model Post title:string body:text`
4. Run `rake db:migrate`
5. Create a controller for the posts: Run `rails generate controller Posts`
6. In that controller that was just created in `app/controllers/posts_controller.rb`, add some code so that it looks like the following:
class PostsController < ApplicationController
def index
@posts = Post.all
end
def show
@post = Post.find(params[:id])
end
end
7. In `app/views/posts/`, create a new file called `index.html.erb` and add the following code:
Very Minimal Blog
<% @posts.each do |post| %>
<%= post.title %>
<%= link_to "Read me", post_path(post) %>
<% end %>
8. Create a way to get to the posts. In `config/routes.rb` add, `resources :posts`
9. In `app/views/posts/`, create a new file called `show.html.erb` and add the following code:
<%= @post.title %>
<%= @post.body %>
10. Done. :)
## To create a blog post ##
1. Open Rails console by running `rails console`
2. Run `Post.create(title: "My Title", body: "This is my awesome blog post!")`
## To view the blog ##
1. Start the Rails server by running `rails server`
2. Navigate to `localhost:3000/posts`
~ Danial Goodwin ~
2015-04-13
All apps fit into one of two categories: Entertain or Organize
Testing this post in Medium, mainly because I like the ability for readers to be able to comment each paragraph, rather than just the entire post.
Linkage: https://medium.com/@danialgoodwin/all-apps-fit-into-one-of-two-categories-entertain-or-organize-1196ba3f1c2b
Linkage: https://medium.com/@danialgoodwin/all-apps-fit-into-one-of-two-categories-entertain-or-organize-1196ba3f1c2b
2015-03-21
Computer Programmers are Perfectionists, by necessity
Computer programmers must be perfectionists. If not, then there's another bug and another crash.
Additionally, writing a fully correct program/app requires programmers to be psychics and able to tell the future. Without so, more code breaks down and programmers wouldn't be able to work together, which ties in with having to be able to read minds.
Furthermore, most times there are more possible logical states in a program than there are atoms in the universe. That would take up quite a lot of the brain's working memory. And, each of them have to be thought through.
I'm surprised any program gets finished. Oh, wait, they never actually are. ;)
Anyways, even with all these impossible hurdles and limitless things to do, programmers have been able to come together and get things done. And, it feels good to know a program is finally running and [most] of the obstacles have been overcome.
Sidnote: So, here's where I would introduce my revolutionary new solution, but, of course it's not finished yet. ;b
~ Danial Goodwin ~
Additionally, writing a fully correct program/app requires programmers to be psychics and able to tell the future. Without so, more code breaks down and programmers wouldn't be able to work together, which ties in with having to be able to read minds.
Furthermore, most times there are more possible logical states in a program than there are atoms in the universe. That would take up quite a lot of the brain's working memory. And, each of them have to be thought through.
I'm surprised any program gets finished. Oh, wait, they never actually are. ;)
Anyways, even with all these impossible hurdles and limitless things to do, programmers have been able to come together and get things done. And, it feels good to know a program is finally running and [most] of the obstacles have been overcome.
Sidnote: So, here's where I would introduce my revolutionary new solution, but, of course it's not finished yet. ;b
~ Danial Goodwin ~
2015-03-02
Level Up - Android Dev: How to get started with Robolectric (Android testing)
I'm finally getting around to trying out a few different libraries that claim to make testing Android apps easier. First up is Robolectric.
For this quick walkthrough, I'm going to show how to start from scratch. You'll need no prior knowledge except for how to make a regular Android app.
In my GitHub repo: How to get started with Robolectric
~ Danial Goodwin ~
For this quick walkthrough, I'm going to show how to start from scratch. You'll need no prior knowledge except for how to make a regular Android app.
In my GitHub repo: How to get started with Robolectric
~ Danial Goodwin ~
2015-02-28
Quote: Unthinkable Thoughts
"Just as there are odors that dogs can smell and we cannot, as well as sounds that dogs can hear and we cannot, so too there are wavelengths of light we cannot see and flavors we cannot taste.
Why then, given our brains wired the way they are, does the remark 'Perhaps there are thoughts we cannot think', surprise you?
Evolution, so far, may possibly have blocked us from being able to think in some directions; there could be unthinkable thoughts."- Richard Hamming (source) (lecture source)
~ Danial Goodwin ~
2015-02-13
Level Up - Android Dev: OneTimeAlertDialog = Android AlertDialog that only shows once for a given key
Every single one of my apps need something like this. It's boring to explain in more details what's traditionally needed to make sure an AlertDialog is only shown once. Now, with this OneTimeAlertDialog.java, it's much easier to create new AlertDialogs that are only shown once.
/** Prompt that is only shown once to user. */
OneTimeAlertDialog.Builder(this, "my_dialog_key")
.setTitle("My Title")
.setMessage("My Message")
.show();
For something I use so often, I was surprised to not find a similar project on GitHub. So, I've added it: Android OneTimeAlertDialog
~ Danial Goodwin ~
/** Prompt that is only shown once to user. */
OneTimeAlertDialog.Builder(this, "my_dialog_key")
.setTitle("My Title")
.setMessage("My Message")
.show();
For something I use so often, I was surprised to not find a similar project on GitHub. So, I've added it: Android OneTimeAlertDialog
~ Danial Goodwin ~
2015-02-12
Level Up - Web Dev: How to get started with Polymer
Polymer:
The purpose of this article is to provide the basic information needed for the easiest way to get started with Polymer, including downloading creating a custom Polymer element, and reusing other elements. This article probably could have been split into three separate smaller ones, but I'm opting for a single page that can be used as a "cheat sheet". Most of this information is from the official site, but the difference is that this is shorter guide with many deletions, a few additions, and different organization.
1. There are a few different ways to get Polymer, but the easiest is with Bower, which is a package and dependency manager for many web libraries. So, install Bower if you don't already have it.
2. Create a new directory for your web project, then run `bower init` in it using a console. There will be a few questions, in which you can just press Enter if you don't know what to do yet. This initialization just produces a `bower.json` file, which has settings that can easily be changed later.
3. Install Polymer for the project by running `bower install --save Polymer/polymer`. This will create and fill a new directory `bower_components` with Polymer and its dependencies. Using `--save` will update the `bower.json` file by listing Polymer as a dependency. (Sidenote: To update the components in bower_components, just run `bower update`.)
Now, you can use Polymer in your project. See the section on [How To Create A Polyment Element] for a quick walkthrough on getting a simple app working.
1. Create a new file called `my-element.html` and add the following code. Make sure the import is pointing to the valid location within the bower_components directory that was created in the previous walkthrough.
2. Use your element in `index.html`. Here's a minimal example. Note: The above `my-elements.html` was put in an `elements` directory for some organization.
3. Run the app from a web server so that the [HTML Imports](https://www.polymer-project.org/platform/html-imports.html) work correctly. For example, to run on localhost instead of remote, if you have Python 2, then you can run `python -m SimpleHTTPServer`. If you have Python 3, then you can run `python -m http.server`.
Notes about Polymer elements:
1. Install the element for your web project, for example: `bower install --save Polymer/core-ajax`. The `--save` flag is used to add that element as a dependency to the `bower.json` file. After the optional `save`, the pattern is `/`. The element will be installed to the `bower_components` directory.
2. Use that element in your layout or custom element. An import statement must also be included, for example, to edit the custom `my-element` created in the last section:
3. Run the project and enjoy how easy it is to create modular web apps and site now. If you don't see anything on the page, then make sure that all your imports are pointing to the correct place.
The best way I've found to learn about using new elements is to see the demos and look at the source code for the ones that you like.
There's plenty more details that I haven't included in this article because they weren't vital to the setup process. So, if you have any questions, the official Polymer website is a great resource or I'll be happy to try to answer any questions.
:)
~ Danial Goodwin ~
- A wrapper with syntactic sugar for the new HTML WebComponents W3C spec.
- Allows easy modularization and reuse of HTML/CSS/JS code.
- Creates more readable source files.
- Being actively developed by Google.
The purpose of this article is to provide the basic information needed for the easiest way to get started with Polymer, including downloading creating a custom Polymer element, and reusing other elements. This article probably could have been split into three separate smaller ones, but I'm opting for a single page that can be used as a "cheat sheet". Most of this information is from the official site, but the difference is that this is shorter guide with many deletions, a few additions, and different organization.
Getting Started For The First Time
This is a quick walkthrough for how to get started with Polymer from scratch.1. There are a few different ways to get Polymer, but the easiest is with Bower, which is a package and dependency manager for many web libraries. So, install Bower if you don't already have it.
2. Create a new directory for your web project, then run `bower init` in it using a console. There will be a few questions, in which you can just press Enter if you don't know what to do yet. This initialization just produces a `bower.json` file, which has settings that can easily be changed later.
3. Install Polymer for the project by running `bower install --save Polymer/polymer`. This will create and fill a new directory `bower_components` with Polymer and its dependencies. Using `--save` will update the `bower.json` file by listing Polymer as a dependency. (Sidenote: To update the components in bower_components, just run `bower update`.)
Now, you can use Polymer in your project. See the section on [How To Create A Polyment Element] for a quick walkthrough on getting a simple app working.
How To Create A Polymer Element
In this quick walkthrough, you'll create and implement a simple Polymer element called `my-element`.1. Create a new file called `my-element.html` and add the following code. Make sure the import is pointing to the valid location within the bower_components directory that was created in the previous walkthrough.
2. Use your element in `index.html`. Here's a minimal example. Note: The above `my-elements.html` was put in an `elements` directory for some organization.
3. Run the app from a web server so that the [HTML Imports](https://www.polymer-project.org/platform/html-imports.html) work correctly. For example, to run on localhost instead of remote, if you have Python 2, then you can run `python -m SimpleHTTPServer`. If you have Python 3, then you can run `python -m http.server`.
Notes about Polymer elements:
- The name of the element must have at least one dash `-` in it. (Reason: It's part of the web component spec as to not interfere with official HTML tags.)
- The `noscript` attribute used in the above sample code indicates that it's a simple element with no script, which allows it to be registered automatically.
How To Reuse Other Polymer Elements
First, find some elements with Bower by running `bower search Polymer`. This will show most of the elements that the Polymer team as created. For a curated list of custom elements, check out customelements.io/. For a scrape of GitHub of all the projects that mention "web component", see Component Kitchen. These instructions work for both Polymer elements and regular web components as long as they are registered with Bower, otherwise they'll have to be installed manually.1. Install the element for your web project, for example: `bower install --save Polymer/core-ajax`. The `--save` flag is used to add that element as a dependency to the `bower.json` file. After the optional `save`, the pattern is `
2. Use that element in your layout or custom element. An import statement must also be included, for example, to edit the custom `my-element` created in the last section:
3. Run the project and enjoy how easy it is to create modular web apps and site now. If you don't see anything on the page, then make sure that all your imports are pointing to the correct place.
The best way I've found to learn about using new elements is to see the demos and look at the source code for the ones that you like.
There's plenty more details that I haven't included in this article because they weren't vital to the setup process. So, if you have any questions, the official Polymer website is a great resource or I'll be happy to try to answer any questions.
:)
~ Danial Goodwin ~
2015-01-18
Level Up - Blogger: How to add formatted code to post (with highlighting)
In many of my posts, I like to add code snippets. Blogger doesn't have good native support for displaying code with syntax and line highlighting, so I found a way to add that feature using GitHub Gists and gist-embed project on GitHub.
The following steps can mostly be used with any blog.
Step 1: Include jQuery and gist-embed within your header tags.
Step 2: Add a code element to where you want your Gist code to appear.
Example:
Source:
Nice features also included, but not shown above:
This article was mainly written for myself in the future, but I hope others can benefit from it, as well.
Links:
~ Danial Goodwin ~
The following steps can mostly be used with any blog.
Step 1: Include jQuery and gist-embed within your header tags.
<head> ... <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gist-embed/2.0/gist-embed.min.js"></script> </head>
Step 2: Add a code element to where you want your Gist code to appear.
<code data-gist-id="" ></code>
Example:
Source:
<code data-gist-file="PrimeNumbers.cpp" data-gist-hide-footer="true" data-gist-highlight-line="9,12,35-42" data-gist-id="5789439"></code>
Nice features also included, but not shown above:
- Ability to show GitHub footer
- Remove line numbers
- Load multiple files from a Gist
- Load a signal file from a Gist
- Show only certain lines from a file
This article was mainly written for myself in the future, but I hope others can benefit from it, as well.
Links:
~ Danial Goodwin ~
2015-01-17
Level Up - Android Dev: How to get started with AndroidAnnotations (easy) (and build Chuck Norris app)
AndroidAnnotations is an open source framework for Android. Basically, you provide Java annotations for things, and the framework will auto-generate the necessary boilerplate code so you don't have to write it yourself. Runs at compile-time! (Read: No reflection or startup time impact) And, there's a lot of code AndroidAnnotations saves you from writing manually.
For example, want to run something in a background thread? Annotate the method with `@Background`. Want to run something in the main/UI thread? (rub some bacon on it) Annotate the method with `@UiThread`.
In this article, I provide a quick walkthrough for creating a very simple Chuck Norris facts app. I'll assume that you already have basic Android knowledge (and using Android Studio + Gradle). Then, at the end, I'll explain in more details some issues/gotchas I ran into while using AndroidAnnotations for the first time, and mention other goodies.
Getting started..
For example, want to run something in a background thread? Annotate the method with `@Background`. Want to run something in the main/UI thread? (rub some bacon on it) Annotate the method with `@UiThread`.
In this article, I provide a quick walkthrough for creating a very simple Chuck Norris facts app. I'll assume that you already have basic Android knowledge (and using Android Studio + Gradle). Then, at the end, I'll explain in more details some issues/gotchas I ran into while using AndroidAnnotations for the first time, and mention other goodies.
Getting started..
Subscribe to:
Posts (Atom)