Whats nice about building a website is that you can just change the resolution on the desktop browser and see how the page renders on a smaller resolution, right? Wrong. At least In my experience I've found it to be invaluable to review the website on an actual mobile devices. Evidently this command is one of the most popular terminal commands. It's definitely one of my favorites.
Challenge: Review a website on mobile devices.
Solution: Use pythons SimpleHTTPServer to host the pages on a local port from the command line using
$ python -m SimpleHTTPServer 2000
The command $ python -m .. is used to run a python module. In this case I am using the SimpleHTTPServer module which will serve the files of the current directory. This module has been merged to http.server in Python3. Running this command with the argument 2000 servers the files to the local server to that port When I did not specify the port it defaulted to port 8000.
On my mobile devices, that were hooked up to the local internet, I just entered the local ip address of my computer followed by :2000, my specified port. To find the ip address of my computer I used the command $ ifconfig | grep "inet". Looking it up now, this one $ ifconfig | grep "inet" | grep -v 127.0.0.1 | cut -d\ -f2 is better because my command returns multiple inet addresses and extra text.
Friday, May 29, 2015
Friday, May 1, 2015
GitHub : A Cheat Sheet
This post is for me in the future, or any one else who is just starting or wanting to clean up their GitHub game.
First Things First
$ git status
First Things First
$ git status
- If five seconds have passed by and you haven't typed git status, you're doing it wrong.
Errors
- Remember git is your friend. When errors come up do not panic or make hasty changes. First slowly read through the comment git provided with the error. Often you will find your solution is provided.
Get Started
$ git clone <repo_url>
- To get the repository you want to work on create a local copy in your current directory
Per Feature You Implement - Create a new branch
$ git checkout <latest_qa_or_production_branch>
- Will switch you to the specified directory, this updates your local directory files to match those in this existing branch
- Will pull changes from the locally stored branch and merge them onto the locally checked out branch
- Will create a new branch locally and make that your working directory
- -b saves you from having to write git branch < .. > before git checkout < .. >
Per Change You Make to the Feature
$ git add <file_changed_or_directory_changed>
- Updates the index to have all the changes made in the file or directory specified
- If you enter $ git status at this point you will see a list of the "Changes to be committed"
- Stores the current copy of the index and a log message from the user, basically it packages up the changes you've made and your message explains why they are needed
- This step is vital to check that your changes are compatible with the existing branch
- Fun times. This could be the step that is the most exciting as you have to muddle through merge conflicts
- Hurray! You have now pushed your local changes to the remote repository
- Create a pull request setting the 'base' to the <latest_qa_or_production_branch> and 'compare to' <new_feature_branch_name>
- Review the highlighted differences
- Merge pull request
- Note: As I am currently just working on my own projects I merge my own pull requests, but of course with a team you may not be merging your own requests.
To Tie It Up
$ git checkout <latest_qa_or_production_branch>
$ git pull origin <latest_qa_or_production_branch>
$ git checkout <latest_qa_or_production_branch>
$ git pull origin <latest_qa_or_production_branch>
Saturday, April 11, 2015
Django: 500 miles
One Django Tutorial down! I rarely feel ownership of the topic after copycatting each line of code from a tutorial, and so inspired MilesToGo. Which is a simple web application to practice using the Django framework, and show where I am in my running schedule. As you may have guessed I am training for a race, it will be the farthest I have ever run, and so its exciting to see how far I have come.
The initial setup was simple, creating modules for the data I wanted to use, and defining the pathway to my url. With my elementary understanding of Django, and the simplicity of my site I did not use class based views, though I know as I add complexity my views.py and urls.py will be upgraded.
The Django Tutorial shows how to use the Django QuerySets though rows of data are great, I was interested in sending over calculated totals. Such as how many miles I have already run, and how many more lay ahead. Finally after small syntax battles, I correctly queried each data point I wanted to show.
Going forward I would like to add functionality to update the schedule from the website. Perhaps putting in ‘Change the Past’ and ‘Change the Future’ buttons. Or maybe to add graphs to show the change, or display a countdown to the race.
Friday, March 27, 2015
Python: Django
To take a leap forward through server side developmental years, I am now working through a Django tutorial. Certain advantages, such as scalability I don't yet benefit from. Though the safe simplicity of managing changes to models is an asset I can admire. Mainly due to several years of working with a software that at times required exact modifications to SQL tables to support front end changes. The models in Django enable the user to access and alter data stored in the tables. Lucky for me I've started using Django version 1.7 which includes the migrate commands, benefits explained below.
Challenge: How to modify an existing model
Solution (Django < 1.7): This developer making a change manually would have to update the table with the exact Django expected syntax, and make perfect reflected changes to models.py. Or the developer could back up the data, wipe out the table, recreate it using syncdb, and reload the data.
Solution (Django >= 1.7): This developer updates the models.py file, run makemigrations, run migrate.
Not only does Django handle update the sql table perfectly, but a file is produced in the migrations folder that shows you the exact changes made in case you would like to change any. It is possible as well to use the command sqlmigrate to view the changes Django plans to make on your table.
Of course before hand the developer could have installed South, but the point here is the wonderful benefit of the now built in functionality. The migrate commands empower the developer to make changes to the project with little work and a lot of security.
Solution (Django < 1.7): This developer making a change manually would have to update the table with the exact Django expected syntax, and make perfect reflected changes to models.py. Or the developer could back up the data, wipe out the table, recreate it using syncdb, and reload the data.
Solution (Django >= 1.7): This developer updates the models.py file, run makemigrations, run migrate.
Not only does Django handle update the sql table perfectly, but a file is produced in the migrations folder that shows you the exact changes made in case you would like to change any. It is possible as well to use the command sqlmigrate to view the changes Django plans to make on your table.
Of course before hand the developer could have installed South, but the point here is the wonderful benefit of the now built in functionality. The migrate commands empower the developer to make changes to the project with little work and a lot of security.
Thursday, March 19, 2015
Python: A Static Server
My simple server had three requirements, listen to an address, parse information, and respond accordingly.
Challenge: Listen to an address
Solution: Initialize a socket to listen into my localhost
The first step was to import the socket class, and initialize a socket to the AF_INET family, and SOCK_STREAM type. This type is for the TCP sockets, and the AF_NET family sets up the socket object on the network by taking a two parameter tuple of host and port. The address was set to my localhost, 127.0.0.1, and the port was set to 8080. Port 80 is the default HTTP port, but it is only accessible by the root user, port 8080 is the designated HTTP alternate. The socket was then bound to the address and set to listen and establish a connection with incoming requests.
Challenge: Parse the incoming request
Solution: Use regular expressions to extract the method and path
Initially I thought all methods would be in capital letters and used the reg-ex code ^([A-Z]+) to collect and group one or more capital letters from the start of the string. Though looking into the documentation the request line only requires that the method token be followed by a space, and so the code was updated to, ^([^ ]+) which instead looks for any character that is not a string. The path was then collected by grouping content until the next space was encountered, ... (^[^ ]). The final parameter of the request line is HTTP and the version, which I matched with ... HTTP.*$ . This looks for the letters HTTP followed by anything till the end of the line. Note: The original request data was split by \r\n, so the request line was an isolated string.
Challenge: Respond accordingly
Solution: Depending on the method, if the file requested exists, and its file type send response data
My server exclusively responded to GET method requests, if the condition was met the path was checked. My files were held inside a directory titled 'www' this path was defined in the global variable WEBROOT. Once WEBROOT was appended to the path I used os.path.isfile to check if a file existed. If the file was not found a page was returned alerting the user with the 404 error code. If it tested true I assigned a content type depending on the file extension at the end of the path, and saved the length of the files content. The response data was then constructed with the content type and length added into the header, and the file appended as the body. This response data was send back over the connection.
Challenge: Listen to an address
Solution: Initialize a socket to listen into my localhost
The first step was to import the socket class, and initialize a socket to the AF_INET family, and SOCK_STREAM type. This type is for the TCP sockets, and the AF_NET family sets up the socket object on the network by taking a two parameter tuple of host and port. The address was set to my localhost, 127.0.0.1, and the port was set to 8080. Port 80 is the default HTTP port, but it is only accessible by the root user, port 8080 is the designated HTTP alternate. The socket was then bound to the address and set to listen and establish a connection with incoming requests.
Challenge: Parse the incoming request
Solution: Use regular expressions to extract the method and path
Initially I thought all methods would be in capital letters and used the reg-ex code ^([A-Z]+) to collect and group one or more capital letters from the start of the string. Though looking into the documentation the request line only requires that the method token be followed by a space, and so the code was updated to, ^([^ ]+) which instead looks for any character that is not a string. The path was then collected by grouping content until the next space was encountered, ... (^[^ ]). The final parameter of the request line is HTTP and the version, which I matched with ... HTTP.*$ . This looks for the letters HTTP followed by anything till the end of the line. Note: The original request data was split by \r\n, so the request line was an isolated string.
Challenge: Respond accordingly
Solution: Depending on the method, if the file requested exists, and its file type send response data
My server exclusively responded to GET method requests, if the condition was met the path was checked. My files were held inside a directory titled 'www' this path was defined in the global variable WEBROOT. Once WEBROOT was appended to the path I used os.path.isfile to check if a file existed. If the file was not found a page was returned alerting the user with the 404 error code. If it tested true I assigned a content type depending on the file extension at the end of the path, and saved the length of the files content. The response data was then constructed with the content type and length added into the header, and the file appended as the body. This response data was send back over the connection.
Wednesday, March 11, 2015
Python: A Picture
Challenge: Serve up a site and load an image that is locally stored.
Problem: Could not serve image even when the data was correctly stored
Solution: Use the necessary headers in the response variable
The first step was to get the raw format of my image, over a thousand obscure and oddly spaced out characters. I modified a small client server in python, updating the path and host, to point to the minuscule image to access the raw data. Even when all the code was correctly saved to the local folder, I could not serve the image. After some failed 'fixes', such as modifying the file type of the image, the page served correctly when I added the correct headers to the response data.
Problem: Could not serve image even when the data was correctly stored
Solution: Use the necessary headers in the response variable
The first step was to get the raw format of my image, over a thousand obscure and oddly spaced out characters. I modified a small client server in python, updating the path and host, to point to the minuscule image to access the raw data. Even when all the code was correctly saved to the local folder, I could not serve the image. After some failed 'fixes', such as modifying the file type of the image, the page served correctly when I added the correct headers to the response data.
Tuesday, March 3, 2015
JavaScript: Too Many Bits
The solution to the 16th question posed by the Project Euler website requires a user to parse through a number that is over 300 digits long.
Problem: I need to access each digit in the number. My algorithm returned a value in scientific notation and attempts to retrieve all digits of the number failed as most methods, such as .toPrecision are limited to about 20 digits of precision.
Cause: JavaScript numbers only have 64 bits to use for storage (my number is 1001 bits)
Solution: Use the BigInt.js library, created by Leemon Baird.
I found a calculator that could compute my number and display all the digits using the BigInt.js library and therefore trusted it over other big integer libraries to handle the sizable number in my program. After unsuccessful attempts with the new operator I reread the documentation until I found out how to create a bigInt from a string using the str2bigInt function. Only concern is that this asked for how many bits the number needed, after exploring binary I had a better grasp on why each digit needs about 3 bits, and declared the numbers accordingly. At long last I updated my simple algorithm and submitted the solution.
"Congratulations, the answer you gave to problem 16 is correct.
You are the 127007th person to have solved this problem". . and successfully submit it to the Project Euler website.
Problem: I need to access each digit in the number. My algorithm returned a value in scientific notation and attempts to retrieve all digits of the number failed as most methods, such as .toPrecision are limited to about 20 digits of precision.
Cause: JavaScript numbers only have 64 bits to use for storage (my number is 1001 bits)
Solution: Use the BigInt.js library, created by Leemon Baird.
I found a calculator that could compute my number and display all the digits using the BigInt.js library and therefore trusted it over other big integer libraries to handle the sizable number in my program. After unsuccessful attempts with the new operator I reread the documentation until I found out how to create a bigInt from a string using the str2bigInt function. Only concern is that this asked for how many bits the number needed, after exploring binary I had a better grasp on why each digit needs about 3 bits, and declared the numbers accordingly. At long last I updated my simple algorithm and submitted the solution.
"Congratulations, the answer you gave to problem 16 is correct.
You are the 127007th person to have solved this problem". . and successfully submit it to the Project Euler website.
Monday, February 23, 2015
PhoneGap: Part 2
Bash, Bourne Again SHell, a pun from the Bourne Shell which was the usual shell from Unix. Or at least so says Wikipedia, the source that knows all. Before returning to phonegap I reviewed an UNIX tutorial, to happily find familiar commands (ls, cd) and new concepts such being able to review the rights and running processes.
- My commonly used commands that this tutorial skipped
- $ which : which is looked down on for its inconsistent outputs
- $ open -e file : though I think once I set up the subl binary i'll prefer it
- Important lesson learned
- .profile is best to store environment variables as it is consistent across most platforms, a bash will read .bash_profile first so its best to populate it with a path to the .profile file. I found this superuser forum useful.
- Favorite concept
- the bin is filled with most of the systems commands or programs, also known as binaries, these are precompiled binary code
- Recommendations prep before starting phonegap project
- Familiarize yourself with your shell, where your files are and where you want them to be
- Beforehand Install/Setup: java, node, Android Studio* (not just the tools), cordova, phonegap, ant, avd, $PATH, $ANDROID_HOME
- Download the phonegap app and $ phonegap serve your app out easily for testing purposes
Wednesday, February 18, 2015
PhoneGap: Part 1
How do you build an app both android and ios compatible knowing neither objective-c nor java? Having spent the last month plus learning javascript, phonegap seems the way to go.
The biggest challenges were setting up the required parts, knowing what was needed and where to get it from. First my system needed java, then node, and after downloading the tools package from the android developer website I found it was not sufficient. By the end of the day the $PATH was defined in freshly created .bash_profile's, one in the ~(home) directory and one in the local directory.
Note: This last point is cringe worthy, .bash_profile does not belong in the local directory of the app. This folly exposed that I did not know where the fundamental unix files belong, or the effects of basic commands such as touch.
In the end I had emulated my app, with luck and some understanding of what I was doing. The next step is to review a UNIX tutorial, and traverse this process again.
Questions
The biggest challenges were setting up the required parts, knowing what was needed and where to get it from. First my system needed java, then node, and after downloading the tools package from the android developer website I found it was not sufficient. By the end of the day the $PATH was defined in freshly created .bash_profile's, one in the ~(home) directory and one in the local directory.
Note: This last point is cringe worthy, .bash_profile does not belong in the local directory of the app. This folly exposed that I did not know where the fundamental unix files belong, or the effects of basic commands such as touch.
In the end I had emulated my app, with luck and some understanding of what I was doing. The next step is to review a UNIX tutorial, and traverse this process again.
Questions
- What is npm?
- What is ant
- What is avd
- What is the difference between PhoneGap and Cordova?
Subscribe to:
Posts (Atom)