Tuesday, April 30, 2019

Using Brave

For a few weeks now I have been using the Brave browser.  It is based on Chromium, so switching from Chrome was a quick adjustment since I have been using Chrome for years.  Brave includes an ad blocking system that blocks what they call "very intrusive ads" and most attempts to track users across sites.  They have also setup a system using BAT currency that allows you to directly pay content providers that you visit.  I have also setup my site as a content provider so I can receive tokens.


Browser




The browser was created by Brendan Eich, the creator of Javascript.  The browser has worked well so far.  It updates automatically similarly to the way Chrome does.  They have a system for syncing bookmarks between your devices.  You also have a wallet built in for your BAT tokens.  I am using it on a Mac, and my Android phone.



Ads

The creators of the browser have also setup an ad network.  There are several ad providers involved, but I haven't looked into this too much yet.  These ads will be shown by the browser in cases where other ads were hidden and maybe in other cases.  You get paid in tokens for viewing the ads.  I have that turned on, but I haven't received any tokens yet.


Brave Rewards

The wallet and the system for paying other sites is called Brave Rewards.  The wallet can currently be synced between desktop systems.  They haven't added that ability to the Android version, but they say it will be added soon.  I got a 20 BAT grant for using the Android version but I can't currently use those on the desktop version.  Maybe they are doing that on purpose to get more mobile use.


Content Providers

Getting setup as a content provider took several steps, but it was mostly painless.  First you setup a Brave Rewards provider account.  Then you have to link that to an account at a site called uphold.com.  I hadn't heard of that site before.  To fully verify your account with UpHold you have to provide a physical address and a picture of a valid ID.  I was a little worried about providing that, but after a little research I decided it seems to be a legitimate site.


Overall it seems like a pretty cool browser, and I hope the advertising and payment system work out.  It seems like a much better way to pay for content on the web.  The advertising on many sites has gotten out of hand.

Tuesday, April 17, 2018

Using The Coldfusion XMLValidate Function To Validate User Content

Sometimes you want to allow a limited set of HTML tags in user generated content.  This can be done with the XMLValidate function in Coldfusion as long as the content is valid XHTML.

Several years ago I read an article about escaping form values posted by Ben Nadel on his site www.bennadel.com. Some discussion came up in the comments about allowing a limited set of html tags for paragraphs, bold text, and so on.  I had a need to do this for forum comments on a site that I was working on. This site was written in Coldfusion so I was looking at some of the same options mentioned in Ben's article. I ended up doing something a little different though.

We were using TinyMCE for the forum comments. TinyMCE produces XHTML code so I was able to use Coldfusion's abilities to handle XML to accomplish this task. Using the XMLValidate function and an XML schema that was modified to accept a small list of tags and attributes the comments were correctly limited. Here is the relevant portion of the code.  Below is an explanation of how it works. 



The first line takes the content from the form and wraps a content tag around it. This is done because valid XML has to have a root element. Naming this element content was just an arbitrary decision. It could have been anything. Also before parsing non-breaking spaces are escaped in the content. If I remember right the non-breaking spaces were causing the XMLFormat function to error.

The next section is a cfxml tag containing the XML schema. This XML was created from some examples and then modified to include the desired tags.

The schema allows the following tags:

  • any number of br, strong, em, ul, ol, u, strike, li, spans with style and class attributes, 
  • a tags with href, title, target, and class attributes, 
  • img tags with src, alt, height, and width attributes, 
  • p tags with align, class, and style attributes, 
  • and finally content tags 


As mentioned above the content tag is just a container added to act as the root document element. Also the href attribute on a tags can only contain urls not javascript.

Then XMLValidate is called with the content and the schema. This returns a struct with information about the validity of the document. Finally the status key is used to decide if the content is acceptable or we need to reject it.

This article was rewritten from an article that I wrote several years ago on a different blog.  That blog is no longer online.  I think the information is still useful though.  I have a few other articles from that old site that I am going to re-publish.

Sunday, April 15, 2018

Setting Up an Angular 5 site on Github Pages

Getting Started

This article will go over all the steps to setup an Angular site on GitHub pages.  The site will use Angular's AOT compiling and be served from the docs folder of the repository.

To start with you can follow the guide here to setup a new Angular project. Then you will need to setup a repository on Github.com.  The name of the repository doesn't matter, this site will use the docs folder, not the specially named repository with USERNAME.github.io as the name.



Project Changes

After that open up the project in your editor and open the .angular.cli.json file.  Change the "outDir" to "docs".  This is where the files will be created when you build the project.  The contents of .angular.cli.json are shown below with all the changes discussed in the article.

Custom Domain

To use a custom domain for your site you need to create a file name CNAME that contains only the domain name.  The GitHub help page explains how to setup DNS and everything else you need for this.  Create the file in the src folder of your project.  Then you need to add "CNAME" to the "assets" setting in your .angular.cli.json.  You can see this in the example file below.

If your site is using routing and you want the links to pages, other than the home page, to work you will need to setup a custom 404 page on your GitHub site.  There is a help document here explaining how to do that.  If all you do is add a custom 404.html file to the site it still won't make your links work.  For the Angular site to work correctly the easiest way is for your 404.html file to be the index page of your site.  In your src folder make a 404.html file and copy the contents of the index.html file into the 404.html file.  Then in the .angular.cli.json change the "index" setting to 404.html.

This is the .angular.cli.json with all the changes.


Site Setup

Now you are ready to build the site and commit all the changes.  Run the following command in your project folder:

ng build --aot --prod --env=prod

This should create a docs folder with files similar to the following:



Then you need to add all the changed files and commit everything.  Run the following commands to send everything up to GitHub.

git add .
git commit -m 'initial commit'
git push

At GitHub.com on your repository there is a Settings section.  Scroll down to the GitHub pages section.  Change the Source dropdown to the "master branch /docs folder" option.  After this your site should be up and running.  You can access it at your custom domain if you set one up, or the standard GitHub url for your repository.

Here is the output of "ng --version" for the setup used for this article.  Things could change as time goes on, but I am happy to answer any questions in the comments below.  Let me know if anyone has handled the index.html / 404.html situation differently.


Friday, April 13, 2018

Listening For JS Error Events

I was recently reading a blog article, Ben Nadel JS Error.   In the article Ben showed how to setup an error event handler that would be triggered for any failed image loads on a page.  This was done by attaching an error event handler to the body element.  Also he had to pass the last argument to addEventListener as true so that it would trigger in the capture phase of the event. This event handler will run whenever an external resource like an image or a style sheet fails to load on the page.

After some experimenting I found that if I attach the event to the window object it is triggered for all the failed resources and also for any javascript errors that happen on the page.  Setting this up on a site with quite a bit of traffic from different browsers was very interesting.  It was a bit overwhelming at first until some things were fixed and some checking was added to filter out some of the errors.  In the event handler the event and error information is being posted back to a server and then sent in an email so it can be reviewed.


Wednesday, April 11, 2018

My First Memories of Coding

The first time I remember writing code was in grade school in the computer lab.  We were learning Basic.  I'm not sure how old I was, but it would have been sometime in the late '80s or early '90s.  I remember they had us write a program that would take some numbers from the user and print out the average.  I had to ask how to do division. I had only seen it with the standard division symbol in math class, not the forward slash.  Soon after that I was able to get Basic on my home PC.  Actually I think it was included in MS-DOS.

At school and in the beginning at home I was using Basic where you had to use line numbers to write your code.  Then to edit a line you had to retype that line with the number.  Soon after that I was able to get QBasic and a book to help me get started.


Sunday, March 5, 2017

Using IR codes from Broadlink backup file

This is a continuation of yesterdays post about the Broadlink RM2 wifi remote.  I was able to test out using the codes to control my remote today.  They are stored in JSON format in the broadlink backup file.  The backup file is a zip file.  After you extract it there is a folder named SharedData.  There are several files in the folder.  The one that seems to have all the codes is named jsonIrCode.  The data looks like an array of objects, each with a code and some other information.


Friday, March 3, 2017

Python control of Broadlink RM2 wifi remote

I recently got a Broadlink wifi remote.  I have been playing around trying to send commands to it with python.  I found code on github that does most of what I need.  It looks like the device itself doesn't learn any remote codes.  It is all in the app.  The code I found can send codes to the device and get codes from learning mode.
I have a bunch of buttons programmed in the app already.  I wanted to see if I could get those codes.  I think I got them today.  The app, called eControls, allows you to backup your setup.  Today I was able to get my backup file from their backup site.
Tomorrow I will try to use the codes from the backup.

Using Brave

For a few weeks now I have been using the Brave browser.  It is based on Chromium , so switching from Chrome was a quick adjustment since ...