A Fun Experiment with Swirling Text

Share this:  

I’ve had, for awhile, various ideas for doing the animation of text. Imagine (if you will), your user clicks on something on the page, and this cool animation of swirling letters happens, and the letters come together to for some paragraphs of text.

Then your user clicks a DONE button, let’s say, and those same paragraphs explode into a swirl of letters which now fly apart and disappear off the edge of the screen.

A few months back I started working on some code to do this. What I got done was JavaScript code that takes the text in the paragraphs and puts a special SPAN tag around each character in these paragraphs, gives them a special class name, and a unique id.

That is as far as I got.

Well yesterday, I decided to pick up this little project again and I surprisingly got a working example! Usually stuff like this takes a bit of debugging before it starts to cooperate with me!

Below, embedded on this blog post is the Pen that I created in Code Pen to do this.

It is just an experiment. But I think a successful one! Try clicking the buttons in it to see it in action. I designed it on my iMac and made no attempt to make it work perfectly on a mobile device. Again, it is just an experiment.

Anyways, enjoy!

See the Pen Formatting a Paragraph for Text Animation by Orville Chomer (@orvilleChomer) on CodePen.0

Note that the DIV with the red border has overflow set to hidden. This is to keep crazy scroll bars from appearing while letters are flying around.

iOS Game App Dev Log Entry # 2

Share this:  

For this game, I am using the layout of Scrabble on the iPhone and the iPad as a frame of reference. I am not copying it exactly. BTW, this is not a Scrabble knock-off! It is a word game though, and I’m sure it will be something you would find under the “Word” category in “Games” on the app store!

Hopefully, this app will be so good, that you find it featured by Apple!

For reference, today, I needed a screen shot from Scrabble on my iPhone where the game board is “zoomed in.” So I…

Read more

iOs game app – Dev Log Entry # 1

Share this:  

Today I am wanting to get iOS app for friend that I am working on (see previous post), displaying sprites for game board properly (with the right widths and heights, and at the right positions).

If I can get just THAT done today, that will make me feel like I am getting somewhere.

If I can get gradients too that would be nice. But Orville… dude… the other stuff is more important!!

#journal #ios #app #objc Read more

Back to Work on an iOS Game!

Share this:  

I promised a friend quite some time ago that I would work on converting his physical board game into an iOS game.

I’ve worked on it in fits and starts. I even has somewhat of a UI set up that I’d shown him (like maybe 2 years ago)… I know… not so good.

But now I can work on it full time!  I am bound and determined to finish this sucker and get it into the app store!

Although I’ve played around with Swift somewhat, the original code was done in Objective C and I’m going to stick with that. The original code was using SpriteKit… and will continue to do so.

I’ve been spending the past few days studying the existing code, adding comments to it, and jotting down notes on how I want to handle coding the game.

I realize now that for the kind of game it is, that needs just basic geometric shapes, that I really have no need for bitmapped images (at least for the most part), and, by using some simple math, I can have my game’s graphics scale nicely without needed all sorts of images with different resolutions included in my project.

SO, onward I go! My goal is to have it out in the Apple App store for sale for my friend by the end of this July.

Experiments with Getting Web Content Using ColdFusion and PHP

Share this:  

So you want to get content from another web site out there to use on your site. You may be doing screen scraping of a page out there… But a better use is to get info from some sort of a web API.

Case in point: Calling a URI from the U.S. Weather Service to get current weather information.

http://w1.weather.gov/xml/current_obs/KMDW.xml

… This URI will return weather data from Chicago’s Midway Airport

Using ColdFusion

Here is a ColdFusion file for getting info on the current weather in Chicago:

It works fine. I do any Ajax call to “weather.cfm” from my home page, parse of the current temperature, and weather description and display it on my home page.  Nice!

 

If I call “weather.cfm” directly, I get weather data back for Chicago’s weather:

Below you can roughly see how it displays this page in Safari:

If you were to view the source, this is approximately what you would see, XML output:

Again, I have a JavaScript routine that calls weather.cfm via AJAX and pulls data from the <weather></weather> and the <temp_f></temp_f> tags.

This was running in ColdFusion Developer on my iMac and I can access on my personal wifi network.

 


Using PHP

I also wanted to do the same sort of thing using PHP. I decided I would use cUrl. Here is the code I used in a file called “weather.php”:

Notice that the URL is the same one as I’m using in the ColdFusion example.

 

So what happens if I directly call this “weather.php” page I created in my Safari web browser?

Well, we get a page like the one displayed above. Bummer! This is running on a PHP MAMP server on the same iMac as the ColdFusion server is. And trust me, the ColdFusion server is not calling this URL with any special permissions!

This led me to suspect that there was something different about the HTTP Header being sent by the ColdFusion server than was being sent by the PHP server using cURL.

But how to figure out what ColdFusion is doing differently than PHP?  Create a new PHP page to call instead of calling the xml file…

 


 

HTTP Header Test Page

I was going to create a PHP page that would look at it’s HTTP Header values and output them to the page for me to be able to see!

Here it is:

 

Now, if we changed weather.php to point to this URL, what do we get?

Note that the ‘1’ at the bottom is an artifact of cUrl (unless you set the CURLOPT_RETURNTRANSFER option to true.

What about doing the same thing with weather.cfm ?

There is definitely a difference between the two. Both have the same value for “Host”. Not much else is the same! It could be that the PHP request has HTTP Headers that the server does not like… But I’m going with the assumption that the PHP request is MISSING one or more HTTP headers that the web server (w1.weather.gov) is expecting. So lets modify our weather.php file:

 

Notice above how I added a new block of code (lines 8 through 12). This is adding three headers to our HTTP Header: ‘User-Agent’, ‘Connection’, and ‘Accept-Encoding’. I saved my changes and refreshed this page.

BINGO! IT WORKED!

But is the server looking for all three of these headers?

I remove ‘Accept-Encoding’.  I refresh the browser.  It still works.

I remove ‘Connection’.  I refresh the browser.  It still works.

And (of course) I remove ‘User-Agent’.  I refresh the browser.  And of course it fails.

So, ‘User-Agent’ is the key. Currently, in our example, it is set to the value of ‘ColdFusion’. Because that is the value I got when running the ColdFusion page. But actually (of course) our page is a PHP page when is requesting the info.

I change the value of ‘User-Agent’ from ‘ColdFusion’ to ‘PHP’. I refresh the browser and it works.

I wonder, is:   w1.weather.gov   looking for specific values for this header, or just that the ‘User-Agent’ header is present in the HTTP header?

So, I change the value of ‘User-Agent’ to: ‘SugarBoogers’.  I refresh the page and it works! This means that the server (at least in this case) is just checking to make sure that the ‘User-Agent’ HTTP Header is present and has a value… but doesn’t care WHAT the value is (I’m sure that ‘SugarBoogers’ is not a common user agent to check for!

Wrapping It Up

You might be able to “screen scrape” a web page without custom setting any HTTP headers. But I suspect that if your calling some sort of XML feed, JSON resource, or web service URI, there’s a good chance that you will need to set the ‘User-Agent’ HTTP header in order to get it to work.

Any comments? Thoughts? Let me know.

Happy Coding!

 

Resources

Entity Render Experiment in CodePen

Share this:  

Here is a little something that I’ve been messing around with in @CodePen. It renders the block diagram of a “data model.”  If you’ve ever used a modeling tool like Erwin this will look familiar…

Screen Shot of Model Render Demo

This is an experiment in rendering a lot of UI elements (entities) without having poor performance. In that, it will only render to the DOM entities that can currently be seen in the view port.

Right now, by default, it generates 200 entities. Try 2000 or 20000, or any other positive integer value, and see how it performs!

There are still a few bugs in it (its rendering too many entities at a time for example), but I think it proves its certainly possible.

You can try it yourself on CodePen here:     https://codepen.io/orvilleChomer/pen/NyXppd

Let me know what you think.

I’ve Installed Node.js

Share this:  

I’ve installed Node.js on my Mac. I want to mess around with Node.js later. But what I am interested in right now is NPM.

NPM (Node Package Manager), as it turns out, is being used as a module installer tool by all sorts of other tools and seems to have become a “thing.” It is a command line tool.

Installation: If you want to install it, you need to install Node.js which includes NPM as part of its installation. So, I have installed it.

I am going through a course on Lynda.com called:  Learning NPM the Node Package Manager. Ray Villalobos is the instructor.

 

Web Page Resize Event Experiments

Share this:  

I’ve got some specific JavaScript-based widgets that I want to develop. And I thought I’d share some of my design experiments with you.

This article delves into the idea of capturing the resize event of a DOM element to help create a better custom web page control using JavaScript and CSS. Then it discusses how these controls work, gives a few examples of commercially available controls, and then finally gives a suggested way to handle things when a custom control (that you have designed) is resized on your web page!

Read more

1 2 3 12