It is embarrassing to admit, but I am one of those Computer Science majors not well versed in shell commands. Navigating directories, creating files, and compiling/debugging basic C programs is basically the beginning and end of my knowledge. This is what prompted to take the evening to explore a little more.
Practice, Practice
Thus, I set out to write a few simple scripts. I thought it would be neat to add a couple custom commands to my terminal. The first one prints the definition of a word to console. I accomplished this using by writing a function that accepted the word in question as an argument. The definition was requested from dict.org then that function is aliased using another function so that the argument can be passed to the function.
The second command prints out my IP address to the console. My computer is a laptop, so this is not completely frivolous. The current network configurations are found through ifconfig. The results are piped to grep which searches for lines containing “broadcast”. Then, this line is piped to awk to select the IP address portion and display it.
I noticed that by aliasing those commands that they did not persist into a new terminal window as I intended. My default shell is Z shell, so I appended the commands to the .zshrc file in the root directory. This resource script is run every time a shell is started (or restarted) so persistence was achieved. While that all sounds very basic, it was not without complications. I spent a considerable amount of time trying to figure out how to pass the argument for the dictionary word once it was aliased. I was messing around with string expansion pointlessly until I figured out the function was necessary. To my understanding, the alias arguments were being passed after the curl command which is why it only initially returned with a default.
Aspirations
This little exercise was exciting and a couple hours melted away pleasantly. It reminded me of the fun I had in Introduction to Operating Systems. Feeling reintegrated, I’ll have to think of a passion OS project for myself after this quarter. The courses from the program here at Oregon State University have offered a lot of breadth and shown me that I have only seen the tip of the CS iceberg. I enjoy that one project just becomes a stepping stone to the next project.
A small exploration to break up the semester’s work
When I first discovered API’s on the web, my world felt expanded. As my need for different kind of data increased, however, I started to feel limited by the available API’s I could find. That is how my interest was peaked by web scraping. I was familiar with the concept, but my assumption was that it would be difficult to learn and I put it off for later. I was wrong, it was much more accessible than I imagined using pre-existing Python frameworks and unlocked buckets of possibilities for acquiring new information all across the web.
Options
Before even diving into web scraping with Python. There was the question of which framework to start with. Beautiful Soup was the biggest name out of Selenium and Scrapy. Selenium has the reputation of having more set up/ learning curve, while Scrapy has more built in features such as being able to make requests and parsing html more specifically than Beautiful Soup. Ultimately, I opted to start with Scrapy, but I am interested in trying all these options at some point!
Experiment
The YouTube tutorial based project I coded up scraped images of otters from the reddit otter subreddit. Then, the pixels are mapped to ASCII characters and printed to the console. Scrapy was ridiculously easy to use. After initializing the project from the command line the set up was simply importing Scrapy into the file and specifying a start URL. The request and filtering to get the source tags with specific alt text happened all in one single command. That was all there was to it.
Overall, I was pleased with the experience, but the results need tweaking. I got some repeat images which wasn’t desirable. The ASCII art little unclear, but I have some direction for what I can change to improve.
Can you see the otter?
Side Project Importance
I convinced myself that I did not have time for even a small side project. I was right, but I think I made the right call by spending time working on this. Even though web scraping is not related to current school projects, it was refreshing to try something new. I already have ideas for how I can use this technique in future projects that I have planned out and I can’t wait to see what other creative things others are doing with web scraping now that that fire is lit.
Is it worth learning Flutter/Dart for mobile application development?
The world of development is vast and rapidly changing, particularly for mobile development. This is not hugely surprising seeing as the new iPhone models are being released so often, not even most iOS users know what the latest one is. The point being, developers are faced with a recurring question: Is it worth it to learn the trendiest tech stack or will it disappear from headlines as fast as it appeared?
Flutter has garnered a lot of attention recently for it’s cross platform capabilities. Before diving into specific perks, a brief overview may be helpful. Flutter is a Google project for an open source Software Development Kit made available in 2015. According to statista.com, it is the most popular mobile app development environment for iOS and Android. Flutter uses the Dart programming language that appeared first in 2011. Dart is probably most syntactically similar to Java. It is compiled into native languages x86 and ARM ahead of time for Android and iOS, respectively.
My Angle
I am completely new to mobile development. In the concept stage of mobile app creation, React Native was my first choice. I have had some experience with React web development, so I assumed it could be an easy transition. Luckily, I had a team mate interested in Flutter after being bombarding with hype, I could not pass up the opportunity to try something completely different. It was daunting jumping into the deep end without the familiarity of Javascript. However, the risk was well worth the reward.
Widget Library
Flutter offers a comprehensive widget library. Out of the box, it contains all the most common customizable widgets from NavBars to Forms. With a simple include statement, all of the widgets are immediately recognizable and ready to go with a plug and play vibe. The nice thing about the styling of the apps is that they change to match the default styling of the device (i.e. Cupertino look for iOS).
Backend Connectivity
I connected my Flutter project with Firebase for server-less support and the use of the Cloud Firestore non-relational database. The integration between these two systems has a small learning curve to understand the many ways to query the database. The predefined calls for performing CRUD operations are convenient on one hand… On the other, this require more experimentation to figure out exactly what is being returned from them in varying situations (versus creating one’s one calls and knowing what to expect from them). It was fairly easy to set up the initial connect using the Flutter browser interface and changing a few preferences in the build and package lock files within the project.
Documentation
My favorite aspect of Flutter is the decent documentation. It is all to common to find terrible documentation that is lacking in depth or that is too difficult to understand. The Flutter documentation is easy to navigate and discover information on. They provide code snippet examples that correspond to a sandbox to see the feature working live. The only downfall is that there is less information on third party website (i.e. StackOverflow) versus more established languages.
The Verdict
Is it worth learning Flutter ? YES. I would like to keep programming with Flutter/Dart and I have more ideas already for mobile applications that I can make in the future. Returning to the more general question of whether or not it is worth it to learn any trendy new stack or library… The answer is more complicated and really depends on specific motivations. Probably not so much if you are already deeply invested in another SDK and do not have an interest in learning something else. Otherwise, if time allow, I am always in favor of experimenting with innovation that comes highly recommended.
One of the best parts of collaborating with others is the shared sense of excitement. Outside of the classroom environment, people’s motives to work together (or not) can vary widely. More often Hackathon participants are there because they genuinely want to be there. Whether it is for the extra experience, the specific cause the Hackathon is geared towards, etc., there is a common theme of passion. This typically removes one of the most frustrating part of group work where a team mate is too disinterested or busy to do their part.
Less Guidelines = More Oppurtunity
Many Hackathons are fairly open ended in terms of what technology can be used to create a project within the given theme. The release from the constraints of class projects is liberating. Forget about the anxiety of scrutinizing a rubric to make sure every mark is hit in order to maximize points. Without the guidelines, there is more incentive to branch out and take on new languages/tech stacks because there is far less pressure to have it come together perfectly. Worst case scenario, perhaps the final submission is lackluster, but potentially a lot was learned in the process for the next project. There is no penalty, just opportunities to gain experience!
Mentor or Mentee
The chance to become a mentor or mentee to another team mate is invaluable. Participants can have a variable level of skills coming into a Hackathon; Even if you normally find need extra guidance on a project, this could be the time to work with someone who is not as knowledgeable that you can offer guidance. Likewise, if you usually are mentoring others, this could be a great chance to learn from someone else or see how someone with a similar skill level operates differently.
Tackling Common Excuses
Excuses justify to yourself why you are holding yourself back from something you want to accomplish. Here are a few of mine to why I did not enter a Hackathon earlier.
Making Time
I work full time and I am taking classes so I cannot possibly do a Hackathon. Why risk grades dropping or loss of income. This is easy to accept, but for a worthwhile experience reorganizing a busy schedule for just one weekend or day can pay off. “Not even time” excuse only works for so long before the a busy schedule can look more malleable (at least temporarily) with enough drive.
Overcoming Awkwardness
For all introverts, joining a group of strangers to code together can seem like a daunting task. It could be very awkward especially if you are not upfront about what you do and do not know. The easiest way to get through this barrier is just to work more people and gain confidence over time. A little small talk can go a long way to increasing comfort. That results in it becoming easier to communicate with partners without feeling like bothering people.
Reflection
I did my first OSU BeaverHacks Hackathon recently in the Fall of 2021 and it was highly rewarding. Getting more hands on with Version Control, new APIs, and working with a diverse crew of people helped me grow as a developer. If you haven’t done a Hackathon and are interested, I strongly encourage it!
At the University of Pennsylvania, 40 panels are on display from the forty ton ENIAC. The Electronic Numerical Integrator and Computer announced on 1946 by the New York Times is funded by the United States military. It is so large, it fills a 30′ by 50′ room. Designed to calculate missile trajectories, it could calculate 5,000 instructions per second. For reference, the modern iPhone X weighs 0.3836 pounds and can calculate up to 600 billion instructions per second. Despite that difference in computational power, the ENIAC is very impressive for the time and later was used in the development of the hydrogen bomb. Both men and women contributed to the ENIAC, however, mostly only the men were featured in the media at that time.
Image credit: University of Pennsylvania Engineering
The term “operator” downplays their role and hides the need to see beyond abstractions. They were enrolled in or recently graduated from Universities with relevant coursework degrees and chosen for their competence. The devaluation of women is reflected in society and can be observed surfacing on an individual level. In an interview with Jean Bartik she quotes Betty Holberton to say: “Look like a girl, act like a lady, think like a man, and work like a dog.” Even though this piece of advice for women at the time is said with humor and self awareness, it is still telling.
Certainly there are many brilliant men that are worth admiring, but what of the many female academic role models. It is important to recognize the accomplishments of women in order to inspire more young minds to visualize themselves contributing to the next technological advancement.
Acknowledgements
“ENIAC at Penn Engineering.” Penn Engineering, 2017, https://www.seas.upenn.edu/about/history-heritage/eniac/.
Guru, iPhone. “IPhone X as the Sum of Technologies: IGotOffer.” IGotOffer Blog, 5 Nov. 2017, https://igotoffer.com/blog/iphone-x-sum-technologies#:~:text=This%20is%20reportedly%20the%20AI,second%20for%20real%2Dtime%20processing.
Hines, Nickolaus. “The World’s First Computer Was Bigger than a T-Rex and 5 Million Times Weaker than an IPhone.” All That’s Interesting, All That’s Interesting, 9 Mar. 2016, https://allthatsinteresting.com/first-computer.
Jones, Brad, and Luke Larsen. “Long before Gates or Jobs, 6 Women Programmed the First Digital Computer.” Digital Trends, Digital Trends, 1 Mar. 2019, https://www.digitaltrends.com/computing/remembering-eniac-and-the-women-who-programmed-it/.
I watched my father try to log into his Apple account and the experience was “painful”. He was denied time after time just when thinking he had recalled the right combination of characters. In fear of being locked out of his account because of too many tries, he went for the “Forgot my password” route.
Sometimes this path is implemented with the user in mind and involves a simple link to reset the password via email. Other times, it is a lengthier process involving multiple security questions. Questions that you thought the answer could only be one thing, but against all odds it is not currently working. There must be an easier way.
Characteristics of Strength
Experts recommend that a password be more than ten characters in length. Contain a variety of characters: uppercase, lowercase, numbers, and symbols. The passwords should not contain patterns, recognizable words, or anything else that is easy to guess[1]. Yes, I am talking to you if your password is “password123”. It is also advisable that passwords are not re-used from site to site. Be ready to remember seventy plus strings of near random characters. This is of course an unreasonable expectation, but there is a solution.
imgflip.com
Password Managers to the Rescue
If you already use a password manager, please take this time to give yourself a pat on the back. Password managers have existed for over ten years. However, there are still many people who are not taking advantage of them. Many are free and open source like Bitwarden or KeePass. The idea is that you only need to remember one password and the manager keeps track of the rest. Typically they can also generate very strong passwords too. Passwords are always encrypted or hashed so the plain text versions of the passwords are not stored.
Encryption is a two way process involving a private key that the user can decrypt the cipher-text version of their password. On the other hand, hashing is deterministic meaning the algorithm produces the same result for the same input at a fixed length [2]. It is considered to be irreversible. Generally, hashing is done many times; Sometimes over 10,000 passes or 100,000 depending on the manager. I hope your interest is piqued about considering a password manager, if you were on the fence. Technology should simplify our lives, not add more stress.
When diving into a new skill or unfamiliar task, a natural response is to try to find a reference video. Youtube is a popular site, but there are many others. Perhaps you have felt the thrill of finding the “perfect” video to explain everything you need to know about topic X. It does not matter whether X is a certain library function in a programming language, a completely new framework, or even a step-by-step guide on swing dancing. Surely, by the end of this 20 minute (or 6 hour) video, you can achieve mastery of the topic.
Disappointing Denouement
It is possible that after watching a single online video that the task can be completed with confidence; More often than not, this is not the case. For anyone following along with a multiple hour long lesson, it can be disappointing to realize that there is a gap in the knowledge when it is time to apply the information on your own project. Most tutorials seem to boil down to the common theme of “just do it”.
Leave Tutorials Behind
Before pouring hours of time into watching tutorials or previewing documentation, there is an optimal amount of time to spend on preparation. Everyone learns skills differently at their own pace. However, most people can agree that it is not worth spending unnecessary time on something without a large benefit. There is some satisfaction in having “completed” a tutorial. Not everyone has the luxury of time to devote to that.
Skill of Set up and Go
This is where the skill of gathering just as much information from a tutorial to get started comes in to play. Leave the door open for experimentation and testing boundaries. Any further questions that may come up can be answered along the way without wasting time on things that are intuitive. When time is precious, hands on experience will prove more valuable than the facade of experience from a code along video in the long run. Use your time wisely!
Have you recently learned HTML, CSS, and Javascript basics and want to level up your UI? I found myself in this position recently and the most popular options were React and Angular. Successful corporations seemed to use both of them. Facebook, Netflix, and DropBox use React meanwhile, IBM, PayPal, and Delta use Angular. “What is the difference, how do I choose between them?”, I wondered. So I tried making sites on both of them concurrently and I hope my reflection provides you with a little insight.
Wait, what are we talking about?
React is a Javascript library while Angular is an interface mostly using Typescript for building responsive UI. Typescript is a superset of Javascript that is compiled instead of interpreted (you can find out more about those differences here). Both Angular (maintained by Google) and React (maintained by Facebook) are open source and revolve around the idea of having reusable smaller components.
Components
By components, I am referring to anything that you may have more than one of (think modals, search bars, cards, etc.). This also allows compartmentalization of features to avoid having one daunting block of HTML. For those who aren’t interested in spending hours fine tuning CSS styling, they both offer components ready to use out of the box (I am counting React Bootstrap here) for all your basic needs. So, what is the big deal then… Why choose one over the other?
Both are pretty hefty and can take a few minutes to get installed. The process can be completed with a simpleterminal command (technically, two commands for Angular).
Getting Started: REACT
If the project was made with create-react-app, everything is set up to get started with a single page application. The App component is the root and new components resemble the same structure as the App. It is best to keep those in separate JS files and import them as necessary. Each component basically looks like a function that returns an HTML element (this can be one element with several other encapsulated within like a div). JSX , a “syntax extension” is helpful here and bridges functionality of Javascript with HTML elements.
Getting Started: Angular
There is undeniably a learning curve here. Angular components are more modular. Each component typically has a Typescript file that holds all the behaviors, an HTML file, CSS file, and a testing file. Of course, there is a single command (generate) that will provide all of these as a skeleton ready to set up. The HTML file is more advanced and can be used with text interpolation, and binding. The syntax of how to achieve these isn’t immediately obvious. I found myself doing a lot of Googling at first to figure out the creation of a simple form, for example.
Basic Development: React
There is a lot that React can accomplish, but as a complete beginner, it is easy to get started quickly with only understanding a few concepts. The state of components (achieved through useState) is straight forward to manage (think, if a user enters something from an input it can be displayed in real time somewhere else). The rendering of components can be handled by one call to useEffect. Data can be passed around from different components by assigning different arguments (props) when “calling” your component from its parent. If this sounds, tricky, trust me it is not. One ten-twenty minute YouTube video can explain all this and more.
Basic Development: Angular
There are more moving pieces to Angular. Achieving an API call from a component isn’t as simple as calling upon fetch like one might do in a React script. Connecting to a database and routing took more time to figure out. Various Typescript files were necessary to create a model for the structure of data that was expected, a service to communicate between components, and a resolver. Angular has impressive lifecycle hooks for what to do upon initiation, multiple state checks, and destruction. The form validation is also very customizable and has useful presets to track pristine, dirty, etc. ( touched or untouched). Both Angular and React have development servers to locally build your project with one command. Changes are viewable upon each save.
The Decision
Try them both if you have the interest! I know that is not incredibly helpful, but what better way to find out. I can say that if you are short on time, the rumors are true, go with React. However, if you like to be able to control the minutia of how your components respond to user interaction with a streamlined system, it may be worth your time to learn Angular. At the end of the day, there may be someone accessing your website from their terminal and your fancy interface will not matter either way. 🙂
This is the same webpage you are currently looking at without JS…
