DEV Community: Orion F.

Py Project: Key Logger

Orion F. — Sat, 25 Apr 2020 14:32:10 +0000

Greetings,

So I wanted to create a project within Python then break down the code to gain understanding while doing. The goal is to become a great software engineer, but I don’t want to be caught in tutorial hell. Great advice from several of the developers were to break each line of code down. Then do some “googling” if you aren’t understanding what you see. It makes total sense and with that I went online to find a project .A great project that was showing a bit in forms to start with was a logger program. With the logger program, it will allow you to type some keys on your screen via keyboard. While pressing the keys, the program should log your keystrokes via a text file. The concept was easy to grasp however when doing projects you don’t want to just write the code, get the concept, and then move on. No… way Jose! lol. So instead I decided to come back this AM to review what the basic project was broken down to via comments. So heads up great people when seeing the projects posted going forward. It’s all about the learning and growth, not just a copy and paste scenario. I hope you enjoy and learn much!

Keep coding great devs!

Key Logger Program : https://github.com/DesignisOrion/Keylogger-Program/blob/master/main.py

Learning Python

Orion F. — Fri, 24 Apr 2020 22:57:55 +0000

Greetings,

Learning a new language may be daunting to many. A great deal of developers would say, "master one language, then go to another". I say that you should learn a great deal of basics then continue to go forward if you like. If not, then go with another. Moral... just keep learning. So today I am jumping into the learning of Python. Throughout the learning of python, I will blog about the practices of such. Well with that being said, let's not waste anytime.

Day 001/100:

Python3:

A programming language used to work with Machine Learning, Automation, and AI. You can also use it for Mobile Apps, Desktop programming and more. It's easy to learn and you don't need to know any programming language prior to understand. It's that simple. The code is short and clean while others are a bit complex. It's a high level language, cross - platform (Win, Mac and Linux), huge community and also a large ecosystem within the library of docs and all. It's been around for 20 years so that's even greater. To be honest, Python is the number one language that employers are looking for. Salary can be as much as $116,000 a year for becoming a developer of Python.

I wanted to start the python course. The training that I wanted to start the learning with is the awesome channel of MOSH. Here is the course link: https://www.youtube.com/watch?v=f79MRyMsjrQ. I like how his delivery is when giving content and advise and other courses. The notes below are what I am learning within the course. Enjoy!

Installation:

To install, you would want to visit : Python.org

Code Editor:

You can use an IDE or an Editor. The most popular are VS CODE, Atom, Sublime. for IDE options: PyCharm. You can download either or which is comfortable. I chose VS Code of course.

Extensions for VS Code:

Python:

PyLint: uses by default.

What is Linting? When your code isn't valid of Python 3 standards, it will show you a indicator "red line" under the issue. Then it will allow you to hoover your mouse over it to see what the issue is. Good tool when you don't need to run the program and see the error before doing so.

Command Palette: Shortkey: Shift + Ctrl + P. Different developers like different linters as well. Different linters include ones such as "flake8", "mypy", and etc. It's truly up your choice. I like "pylint" cause that's what MOSH chose. The differences of them is that the error messages are delivered different. They still do the same thing.

Problems: If you want to see the problems of your code while coding. Press the shortkeys : Shift + Ctrl + M. It's a window that will appear. Great tool to use while doing the code.

Formatting Python Code:

PEPs : Python Enhancement Proposals: The most popular is the PEP 8 which is the Style Guide. If you visit the site you can learn the way to style your code that will keep your code consistent with other developers. Very great tool for being on the right track with your coding. A good tool to install is autopep8. Then once installed. Change your settings for format on save. : File > Pref > settings >type: formatonsave. Check the box then exit.

Running Python Code

To run the python code without having to go in the terminal each time (which is tedious) another way to run is by using the extension : code runner. (pic should show of the words ".run" in comic font. When you install that extension, you then can code in python via the editor. Once coding and need to run, you simply press : Ctrl + Alt + N. Very easy way to run the py code.

Python Implementations

Python language: Set of rules for writing the code

Python Implementation : A program that understands how to use the rules

Cpython: A program written in the language C#. This is one the most popular implementations.They do the same thing, but just run different. Just like operating systems, browsers, or even languages. Choose whats best for you. I choose Cpython.

Others include:

Jython: written in Java
IronPython: Written in C#
PyPy: A subset of Python.

How is Python code executed.

C compiler: Allows you to convert C language to Machine Code.

Python > CPython > Python Bytecode > Python Virtual Machine > Machine Code. (This is how Cpython works)

Well you all. That's the notes for the first section. If you are interested in learning Python3 then don't wait. As you see, I am diving right on in and I advise you to do the same. I mean hey, the worst that could happen is that you just sit there wondering what it will feel like to be a great software engineer. I will post projects via my github and share links. I hope you enjoyed the notes. Until next time. Peace and Light!

www.DesignIsOrion.com

Don't Stress: REACTJS | Components

Orion F. — Sun, 22 Dec 2019 00:16:52 +0000

Hi readers,

Okay I am back with another post. This one will be about the ReactJS components. Let's go right into the notes I've taken for the components. Hope it helps. Enjoy!

*Components
- A part of the web interface.
- Header, SideNav, Main Content, Footer, and one component to contain the prior 4 components. They come together to make the app.
- Components are reusable. ie: The LEFT sideNav can also be the RIGHT sideNav.
- Building blocks of any ReactJS app.

*Component in Code
- a component is usually the code placed in App.js
- You can also have component files with the .jsx extension.

*Component Two Types
- Stateless Functional Component
(- JavaScript Functions)
- Stateful Class Component
(-Class extending Component class)
(-Render method returning HTML)

Don't Stress: REACTJS (Folder Structure)

Orion F. — Sun, 22 Dec 2019 00:04:12 +0000

Folder Structure

Hi readers,

In this post, I wanted to give insight about the folder structure of a ReactJs App. I wanted to create separate post the so you can get insight in a gradual way. Again, I try not to be lengthy on the steps, but get right to the info. Hope you enjoy!

Folder Structure Breakdown

package.json: Includes the dependencies and the scripts used to create a project.
package-lock.json: Ensure the installation of the dependencies.
.gitignore & readme: Don't worry about these files.
node_modules: All the dependencies are installed in the folder. It's generated when you run the "create-react-app" command.
public folder
- manifest.json: Used for Progressive Web Apps (PWA's)
- favicon.ico: Nothing specific, just the icon for the title.
- index.html:Typically you won't change anything in the body. Maybe the head tag but that's all. This contains the root DOM node.
src folder: The folder you will work with the most for the development.
- index.js: specify the 'root' element which is controlled by React.
- app.js: Responsible for showing the UI (view) within the browser.
- app.css: Used for styling the app UI.
- app.test.js: Used for testing
- index.css: applies styling to the body tag.
- logo.svg: refrenced in the app component.
- serviceWorker: used for PWA's only.

Don't Stress: REACTJS | Start!

Orion F. — Sat, 21 Dec 2019 23:40:30 +0000

Don't Stress: ReactJS (Day 01)

Hi Readers,

For a while now I wanted to start learning ReactJS, but was in fear. Not any more and for the year of 2020, I decided to take a step forward into React making major upgrades in the skillset. Yes there are frameworks that are compared to React such as Vue and Angualar, but my interest kept leaning towards this library. I am writing these collection of post for ones whom are starting React, but don't know where to start. If you are like me, you've probably visited the Reactjs.org site millions of times never really understanding. Hope this helps your Reactjs journey.

Hope you enjoy!!!

*What is ReactJS?

Open source library for building user interfaces
Not a framework
Focus on building amazing UI
Rich ecosystem

*Why learn ReactJS?

Created and maintained by Facebook
More than 100K Stars on Github
Huge Community
High Demand skillset

*Component Based Architecture

A website can be broken down into: Header, SideNav, Main Content and Footer.

*Reusable Code

Components are allowed to be reused.

*React is declarative

Tell React what you want and React will build the actual UI
React makes it painless to make the complex UI
React will handle efficiently updating and rendering of the components
DOM updates are handles gracefully in React.

*More on why React?

Seamlessly integrate react into any of your applications.
Portion of your page or complete page or even an entire application itself.
React native for mobile applications.

Prerequisites

HTML, CSS and JS fundamentals
ES6
JavaScript - 'this' keyword, filter, map and reduce
ES6 - let & const, arrow functions, template literals, default parameters, object literals, rest and spread operators and destructing assignment. ( The review should take an hour or so max and you won't need any additional studies if this is known to learn React)

Let's begin Simple ReactJS Hello World! App

Create a folder to hold the React project(s). My folder is called "ReactJs".
Within the VSCode Terminal type the following: npx create-react-app "app name" -This may take a moment due to packages being installed.
Then type: cd-my-app
Then type: npm run build
Once you so, the default browser will display a webpage showing the React logo. The page is locally hosted at : http://localhost:3000/
To edit you will have to navigate to the .src/App.js file. To do so, you will go into code editor folder menu.
Within the src/App.js file, change the wording in between the paragraph tags to "Hello World!".
Navigate back to the browser showing the localhost React site. Refresh. Congrats "Hello World!" should appear.

You've created your first Reactjs App!

Chromebook Dev Setup

Orion F. — Sat, 21 Dec 2019 16:19:44 +0000

Greetings All!

I only had a few dollars to my name and needed a new laptop. That's when I purchased an Acer Chromebook 15. The cost was only $150 + tax! Once I received it, I went right away trying to download developer tools such as code editor, fonts and etc. When trying to do so I felt disappointed because many things to begin my front end development journey weren't able to be done on Chrome OS. I searched high and low on how to setup the Chromebook for development finally setting it up. After doing all the searching gathering the tools, I decided that it was time for me to give the full setup of the Chromebook Dev. I won't get lengthy with the notes following and will try to be as precise as I can be.

Let me add as well that this may void your warranty on your Chromebook. If your like me, I didn't care. LOL! I just needed to get to the creating projects!

Also I might add that these steps worked for myself many times. There are many ways to this solution, but I wanted to share my own.

SECTION 1: Enable Developer Mode

Enabling Developer Mode: When placing your Chromebook in developer mode, you are getting full access to the 'root' of the computer system files. I mean you are striving to be a "developer" right?!

Steps:
- Turn OFF Chromebook if powered ON.
- Press and hold esc + refresh, then press the power button.
- Wait for the screen that says " Chrome OS is missing or damaged...."
- Press Ctrl + D
- If prompted, press Enter
- Wait for the device to reboot.

When enabling developer mode you will be prompted this message each time you turn on the Chromebook so don't be alarmed. Just press Ctrl + D to proceed to login or desktop.

SECTION 2: Turn on Linux

Turning on Linux will allow you to download Linux software to your Chromebook. This is the step that will allow you to install items such as code editors, apps outside of android and more.

Steps:
- Click on settings
- Click the hamburger icon in the upper-left corner
- Click on Linux (Beta) in the menu.
- Click Turn On
- Click Install
- The Chromebook will download the files it needs.... (May take a moment or two so be patient)
- Click the Terminal icon.
- Type the following in the command window: sudo apt update
- It will update the Chromebook files (May take a moment)
- Close terminal window (It may ask if you're sure. Click "yes" to proceed)

Alright. So we now have the Chromebook setup for Developer Mode and Linux is installed. Now we shall proceed with Nodejs and NPM.

SECTION 3: Installing NodeJS and NPM

Many developers heard of the terms Nodejs and NPM yet don't understand fully what they mean or what they do. Well good thing I am here!

Nodejs- is a JavaScript runtime built on Chrome's V8 JavaScript engine. (Soo.... what does that mean Orion?!)

**Nodejs came about when the original developer of JS extended it from something you could run in the browser to something you could run on your machine as a standalone application.

NPM- Node Package Manager - is a package manager for JS. It's the default package manager for the JS runtime environment.

**Most commonly, it is used to publish, discover, install and develop node programs.

Steps:
- Open terminal and run: sudo apt-get update
- Update will proceed.
- Install: curl and gnupg: sudo apt-get install curl gnupg -y
- Install Nodejs: curl -sl https://debv.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs
- Close terminal once installation is complete.

SECTION 4: Installing Visual Studio Code (VSCODE)

VSCODE has to be the largest (if not most popular) text editor within the industry hands down. The productivity, feel and many features packed within allows you to go beyond measures within web development. There are others out there such as Sublime, ATOM, etc. I will show only how to install VSCODE.

Steps:

Go to VS Code website : code.visualstudio.com
Download The latest version of VSCode
Open your files and locate the program in the downloads folder.
Drag the file within your Linux files folder located on the right panel.
Once program transfers to the Linux files folder, delete the file from the downloads folder (This will eliminate duplicate software)
Click on the Linux files folder to open then double click on the VSCode program.
VSCODE will install showing indicator of installment in the bottom right corner.
Open VSCODE from your app menu

CONGRATS you have completed your Chromebook Developer Setup. Hope you enjoyed!