Statistics
We looked inside some of the posts by thecommonphenomenon-blog and here's what we found interesting.
Average Info
Notes Per Post
0
Likes Per Post
0
Reblog Per Post
0
Reply Per Post
0
Time Between Posts
5 days
Number of Posts By Type
Text
14
Photo
2
Video
1
Last Seen Tumblr Blogs
Fun Fact
70% of Tumblr users say the Dashboard is their favorite place to spend time online.
Text
Anatomy of Tree Data Structures
Above is a tree of a given html page’s elements.
Trees are a non-linear hierarchical data structure. Trees are made up of nodes and edges. A node that does not consist of any other edges and nodes is considered a leaf. If a node does consist of other edges and nodes below it, then it is referred to as the parent of the other nodes. The nodes that are connected to the parent node are referred to as the children. The children nodes on the same level with the same parent are referred to as sibilings. Each node has a level. The top or first node is referred to as the root and has a level of one. Moving down from the root the next level of nodes are level 2, and so on. The depth of a node can be defined as how many edges from the root to the node in question. A parent node with children would be considered a subtree.
0 notes
Text
Proficiency in Unfamiliar Environments
https://angular-inbox-5739b.firebaseapp.com/
https://angular-inbox-api.herokuapp.com/api
Above are links to my Angular Inbox and the API the inbox is using, respectively. Here I added many features to the inbox, including a select all button, drop-down to add labels, mark read or unread, and a star feature.
The one bug that I ran into was when pressing the select all button. The issue was that when the very top message was selected and the select all button was pressed, all the messages were then selected but the first message that was originally checked became unchecked. Before the conditional that I had written was for some reason deselecting ones that were already selected and then selecting those that were not. Almost like a toggle. I finally fixed the bug with the code below:
vm.selectAll = function(mail) { let selected = mail.filter(i => i.selected === true) if (mail.length === selected.length) { mail.map(i => i.selected = false) } else { mail.map(i => i.selected = true) } }
0 notes
Text
Identifying Libraries
Using Michelles Repo for her Q3 project the following libraries are used:
1. Moment - an npm package for parsing and formatting dates.
2. React/React Native - using JavaScript to build mobile apps with Reacts declarative components.
3. React native audio streaming - for streaming audio using react.
4. React native form generator - for generating mobile forms quickly in React.
5. React navigation - for building clean mobile friendly navigation within React.
6. tcomb form native - for generating a form based upon a domains model.
0 notes
Text
Month-long Goal
My complex goal is to have a polished portfolio website ready for deployment ready by Feb 7th.
Subgoals:
1. Mimic my resume
2. Spend 1 hour/day on site
3. Use React
4. Make it Responsive with CSS Grid!
0 notes
Text
Todo Tutorial With Express + Handlebars + Knex
I just finished a tutorial building a CRUD app! A simple todo app using Node.js, Express, Handlebars, Knex, and PostgreSQL! And some Bootstrap for styling.
Find the repo README HERE!
See it in action HERE!
0 notes
Text
Code Review of Ggames
Code reviews with your peers are great! Especially if it’s the same project your trading. You get to see a different perspective and possibly learn something too. In this case, I got to see SASS in action, and from the looks of it, it seems pretty simple to dive into! Also, you get to pat yourself on the back for a minute. Give your self a win and revel in your accomplishments but also take some constructive criticism and try to better yourself. In this case, Cole suggested that I clean up my code by deleting unnecessary comments I had. And yea! I have a bad habit of leaving comments in my code. And if I really need the comments then I could push it to gitHub and then delete the comments and push again. I can always visit my repo and find the comments in past versions. 😉
0 notes
Text
SPA with Templates
Angular Inbox Repo
Angular Inbox In Action
If you follow the first link (repo) you will find all my code files. To find the templates follow path: js/inbox/inbox.template.html & js/toolBar/toolBar.template.html
These files are where the templates are built, but to actually use these templates we have to place the template’s tag within the index.html or within another components template. In my case the inbox is the parent component so the inbox tags( <inbox></inbox> ) will live within the index.html on line 13. The child component, the toolBar, is being used within the inbox template. You can find the toolBar ( <tool-bar></tool-bar> ) being used under js/inbox/inbox.template.html on line 2.
0 notes
Text
Pros and Cons for Angular 1.6
A few weeks ago I had a project come up that required me to build an email inbox. I was given the choice to use any frontend framework I wanted. I had never used a frontend framework before and there are a lot to choose from: React, Vue, Angular 1.x, Angular 2+, Ember, the list goes on and on. I chose Angular 1.x or more specifically Angular 1.6. There are a lot of differences between earlier versions.
PROS
When diving into frontend frameworks there is an acronym used to differentiate how the framework works. The acronym is MVC or Model, View, Controller. There are other variations but Angular 1.6 breaks it down with MVC. This was difficult for me to wrap my head around since I had never worked with frontend frameworks, but Angular 1.6 does a nice job of breaking these out into their own separate files. You have a file for your component that holds your template, which is the View. Another for all of your functions, which is the Controller. Within the controller the data is held or the Model. The controller then is able to manipulate data and send it to the View depending on the functions written within it. This is the biggest pro I found for Angular 1.6 and the only pro I could find.
CONS
As I continued playing with Angular I found that there is A LOT of typing. What I mean is, within the index.html or wherever you want to use an Angular component you must ‘import’ in each file. If you have lots of components this can get overwhelming.
<script src="/js/app.js"></script> <script src="/js/toolBar/toolBar.component.js"></script> <script src="/js/inbox/inbox.component.js"></script> <script src="/js/inbox/inbox.controller.js"></script> <script src="/js/toolBar/toolBar.controller.js"></script>
Another huge issue using Angular is how many versions there are. Not only are there a lot of versions but some versions are so different from some of the others that if you were reading a tutorial on 1.3 it doesn’t work the same as it would with 1.6. This was by far the most frustrating part about learning Angular. You have to be very careful what your reading or watching is the right version you are working with.
Another downfall with Angular are the docs. If you go onto Angular’s website (https://angularjs.org/) some of the documentation gives you little to no information about certain things. For instance, Angular has something called Directives. To give you an idea what directives are without blowing your mind, they are attributes, element names, comments or CSS classes. To get some info on a particular Directive Angular’s info is literally this:
The best way to learn Angular I found, was to watch tutorials and to be diligent in making sure the video was the same version I was using.
0 notes
Text
Sleuth and being Agile
Last week I was working on a project with 8 other people. The project was to build an app that would run an internet speed test, display the IP Address, along with the users ISP. At the bottom the app would also display ISPs in order based upon the best download speed. We also incorporated a chrome extension that would run the speed test as well and in the future this test would happen every so often in the background. If the users speed drops below the speed they are paying for, the app will alert the user.
So that was the idea and we completed a lot of what we set out to do, however we ran into a lot of problems. And the best part about being Agile is that problems don’t have to be a huge deal. That’s when you either pivot or you find a new way around the problem.
An example, we were using an npm package that would run a speed test and display the results as an object within our terminal. This was great, just what we needed. But what we didn’t know was that we couldn’t take that object and display it in the browser. We dug to find answers and after searching for a good few hours we realized we weren’t going to be able to use this particular speed test. So, we built our own.
Being Agile is being flexible. Our team was open to ideas and when we chose a path, we were still able to move in different directions if we felt like the project needed it. We had a timeline and a due date, but the due date didn’t matter all that much to us. We had decided before we started that during this project week, we were going to learn first. It was a matter of doing a little bit really well before doing all of it really poorly. If we didn’t get to it, it was ok. We also had standups and standdowns each day to go over what had been done that day, what we needed to continue doing and what we needed to cut out.
Every time I have worked on a project, whether it was alone or in a group, being Agile has always put my mind at ease.
0 notes
Text
Todo with Handlebars
I recently built a todo app using many technologies; Node.js, Express, Handlebars, postgreSQL, and Knex.js. Node.js for my backend with Express as my framework for Node.js, and postgreSQL for my database. I chose Knex.js for talking to my backend and sending any data I had to my frontend. Handlebars is great for taking what Knex.js gets from the database and displaying that data to the browser. Handlebars’ files are like HTML files however, when using {{ }} the curly brackets are Handlebars’ way of saying, that this text in between these curly brackets is not HTML, its data. More specifically data from a database.
Let’s say that we have a route setup to retrieve all the todos within our database. Knex has a query to get that data. Something like this:
KNEX
router.get('/', (req,res) => { knex('todo') .select() .then(todos => { res.render('all', { todos: todos }) }) })
After Knex gets that data it returns it as a ‘variable’, in this case, called todos, right after the .then After that we see res.render( ‘all’. The ‘all’ is a Handlebars file called ‘all’ and it will be displayed with the todos. But to display those todos we need to use that ‘variable like’ word called todos in curly brackets. {{ todos }}.
HANDLEBARS
<ul class="list-group"> {{#each todos}} <a href="/todo/{{id}}"class="list-group-item">{{title}}</a> {{/each}} </ul>
As you can see above, Handlebars can also use loops with #each. There is even if statements in Handlebars. Handlebars also has partials, which means you can write short snippets of HTML like code and place them anywhere inside your templates using 3 curly brackets like: {{{ body }}}. Handlebars is a must when using databases and displaying that data to the browser! Go visit the Handlebars Docs for more details!
Checkout my Todo App code HERE. And see it in action HERE.
0 notes
Text
MVC vs. MVVM vs. CBA
MVC (Model, View, Controller):
With the MVC pattern a request is made that hits the route that hits the controller. The controller then looks to see what needs to go to the view to be rendered to the browser. If it needs data from the model it will talk to the model and get the necessary data using logic (logic is used within the model). Once the model has the appropriate data that has pulled from a database, it will send it back to the controller that will then send it to the view that will display within the browser.
MVVM (Model, View, ViewModel):
The model represents data. Unlike with MVC, logic is separate from the model. However, some models may contain validation. The view displays the data so the user can see it and interact with it. The view contains knowledge of the model, unlike with MVC the controller deals with the model. MVVM’s view is active whereas the view for MVC is passive. The ViewModel
CBA (Component Based Architecture):
CBA uses components which individual features of an app. This includes things such as a comment feed or a chat window. These components use their own separate APIs without affecting any of the other UI making them reusable. A full page refresh is no longer necessary. MVC separates these methods and routing into all the components within the application.
0 notes
Text
Describing Agile Values
Individuals and Interactions over Processes and Tools.
You work with people everyday. People are the core of any project. If you can understand the people you work with, they themselves are a tool. Connecting with individuals is the first step in a project.
Working Software over Comprehensive Documentation.
Have working software before writing up documentation. Many times documentation is out of date with the final product. Changes are made all the time to software during the development phase. Document what is already completed and working.
Customer Collaboration over Contract Negotiation.
If you have collaboration, then you have negotiation. This hints back to Individuals and Interactions over Processes and Tools. Being able to work with people and understand your team makes contract negotiations simpler and are easier to write up when everyone is on the same page.
Responding to Change over Following a Plan.
When a team is flexible and ready to pivot the project where they see fit, it’s going to be better in all aspects of the project and the team. There is no perfect plan but by always adjusting that plan for the projects needs can be stronger and more fluid.
Describe Velocity.
Velocity is the estimated time and/or effort it will take for each user story to be completed during that phase of development. This can help know how long the over all project will take. Velocity acts as a goal for the developers; how many user stories need to be completed in a certain iteration.
Describe the format and purpose of retrospectives.
Retrospectives happen after each interval or sprint (even better, is after each day) for development teams. The three key words here are START, STOP, and CONTINUE. As a team what do we need to START implementing into our day to day work flow. What do we need to STOP doing as a team or individual and finally what are we already doing well and want to CONTINUE doing in our work flow. This can be very powerful to weed out bad habits and really tune your team to see its true potential.
Pair Programming
Pair programming is having two developers on one screen, working on the same problem. This can be beneficial for many reasons. One, fewer mistakes are made when you have 4 eyes instead of 2 on the screen. Also, one programmer may be stronger at one thing than the other, allowing the problem to be solved quicker. Pair programming also helps to keep the developers focused, without getting distracted on other problems that may be looming on the screen.
Automated Tests
You want to continually improve and continually grow. Automated testing is necessary for both. It saves time and money by confirming what has already been developed. If you build something and never test it until you are finished, that can be a very scary moment. Why not test as you go so that when it’s time to hand the product over to the client there won’t be any upsets.
Half-not-half-assed
We all want to build something that’s awesome and we think that it needs all sorts of cool features. This can over complicate things. All we really need to do, is to keep it simple. Build half a product that’s awesome. What is essential to your product? Take your idea and cut it in half. Have a badass foundation then in future iterations add other badass features.
0 notes
Text
Demonstrate Learn-to-Learn Techniques
I think my favorite learn-to-learn technique is the last one, Reflect. This one always seems to surprise me. I do this quite often either at the end of each day or even at the end of a project. I did this on our last Q2 Project.
There are 3 steps within the Reflect technique: Self-assess. At the end of the project I asked myself several questions. What were my objectives? How far did I get? How much is left? How was the process? Did I set the stage well? Did I play well? And finally, what can I do better next time? While doing these I can see my learning process. What worked and what didn’t and how I can change to improve. Second is ask new questions, I like to set goals of things to learn and after the project asking if I achieved those goals. Asking what I still don’t know can help me go after things that I am weak on. Then there is repeat. Learning never stops, so my goal for this week is to build a similar project like in Q2 and apply the a lot of these same questions.
0 notes
Text
Fable
User Stories:
Team Daily Retros:
Monday:
Start: completing user stories
Stop: assuming on same page
Cont: deploying regularly, ask questions, pair-program on hard parts
Todo: Logo and Index.hbs
Tuesday:
Start: deploy after each story completion, push after each story,
Stop:
Cont: pair program on hard parts,
Wednesday:
Start: add to queue if stuck for > 1hr
Stop:
Cont:
Todo/Goals: Comments/Profile/Logout
Final Retro:
Start: asking for help after hr. on a problem/ stepping out of comfort zone and letting other team members touch many aspects of the project/
Stop: creating new methods of using git/ relying on the same process/
Cont: daily retros/ communicating - overall & using git / deploying together / standup/standdown/ pair-progamming/ taking breaks
View Project
0 notes
Photo
Basic diagram of a web request (client, DNS, server, database, protocols)
0 notes