DEV Community: Vlad Solokha

Routing Information in Front-End Angluar

Vlad Solokha — Wed, 25 Aug 2021 16:30:31 +0000

I've learned that the best way to route information is to use what is already given to you.

The first thing is the documentation. In my case to solve my routing and navigation problem I used Angular.io

My problem is I needed to figure out a way to route a button click that would engage a method in the component where the button is. The method would need to provide a route to another component and along with it some data from the first component.

I used the (click)=methodInComponent() to do this
In the component.ts I first needed a way to store the data that I wanted to pass to the other component. I ended up using a method for that as well. I will call the method in the routing method to pass the data using router.
I created a void methodInComponent() and used the following for the route this.router.navigate(['theOtherComponentPath', theVariableFromTheOtherMethodToPassData], {});
with private router: Router being defined in the constructor.
In the otherComponent.ts I needed a way to access the data that was passed to it. Angular thankfully provides a way to do this via 'ActivatedRoute'. I assigned the data to a variable and used snapshot and paramMap methods to get the data. The code in question looks like this variableNameForData = userId = this.route.snapshot.paramMap.get("id"); id is data that was passed from the other component.
I am now working on using the Java backend of the app to get the respective data and display it on the other component. So far it looks like me using the httpClient to 'get' the information that I need. It returns an '[object Object]'. I will try Observable to display the actual data.
I interpolated the variables in the HTML template as {{dataFromComponent}}

Let me know if I'm missing something, but this has been quite a learning adventure because I chose to

Struggle
Try things out
Read the documentation
Implement it

Notes on Angular Forms, Terms, Bindings

Vlad Solokha — Fri, 13 Aug 2021 17:24:01 +0000

I was working on a project and didn't know what the next steps should be to make a button work and do stuff.

So I read the documentation. Why the documentation? Because it's the best and most efficient way to learn and grow.

So I learned a couple things about

Forms

All forms should capture user input from view, validate input, help create form model and data model to update, and provide ways to track changes.

There are 2 types of forms:

Reactive - robust, scalable, reusable, testable, model driven. Use only if forms are a key part of your application

Template-driven - less than reactive, but simple, easy to add to just a template (not component)

Terms

I learned while looking for answer to make my app work.

DOM - basically a model that presents to the user's view. Contains organization of elements, attributes, objects...

pipe - transforms input values data before displaying it in template. Uses the pipe character (as operator)

data binding - coordinates the application and DOM data

directives - apply application logic to what gets displayed (think: ngFor and ngIF) <-- those are template syntax elements

there are 2 directives:
-structural - alter the layout of DOM to +add -remove or /replace elements such as ngFor or ngIf

-attribute - alter the appearance or behavior of elements such as ngModel or ngSwitch

Bindings

There are 4 basic bindings between the DOM and component of an application.

2 bindings travel from component to DOM as it requests them
-interpolation - displays value from component
-property binding - assign a value to a DOM property

1 binding travels from the DOM to the component
-event binding - event in DOM triggers a function in component to execute

1 two way binding that connects DOM to component
-two-way binding - combines event binding + property binding for a two way data transfer

Understanding a New Code Base From Scratch

Vlad Solokha — Tue, 10 Aug 2021 19:09:53 +0000

I was recently attributed an opportunity to examine a code base and add some functionality to it.

In the end, let's just say it started off great. Then I struggled.

I'm still trying to figure this out, yet I'm learning so much along the way.

The whole process is similar to solving a coding challenge.

Here are some key hind-sights from my experience:

Explore

1. When presented with a new code base, don't feel overwhelmed.

Take a deep breath and count to 4. Make the thing run locally and play with the app first and foremost. This should take no more than 20 min to get up and running. Explore and discover all that the app has to provide.

Define the problem

2. Figure out what functionality or expectations you have for how this app should run.

What do you need to add or remove from the functionality? This is the part where you find and define the problem. It should be clear to you what components or services will need to be modified or added.

Plan your actions

3. The clearer you understand your problem the easier it will be to execute a solution.

You will find the code of interest that needs changing and modify it. I've had to do a lot of trial and error on this. A lot of the time was spent on this step. I spent time looking at syntax, documentation, APIs, and examples for how to implement my plan.

Review and Test

4. Save and commit changes.

Review the app again. Test your functionality and look. When testing, think of all cases from user perspective that could be used on the app.

Iterate

5. Do it all over again.

From bird's eye view perspective, I hope this process can be helpful for you in solving your programming challenges.

The code was built in Angular and the backend was built with Java and Maven. So language was Typescript, JavaScript, and Java.

Is there anything I missed?

Challenges Building React App

Vlad Solokha — Sun, 25 Jul 2021 04:25:39 +0000

I’m working on this app that’s in my GitHub repo called pick-name. Link.

There are a couple things I'm trying to work through or solve in my code:

I’m trying to create a button that will show or hide all the students in a list in a class section. The list of students are an object property called “studentNames”.
I'm trying to have the array property, "studentNames" be able to modified so that can be used by client to add to student names.
Names in the list should be editable. So client can click on a name in the list and edit it.

It’s seems simple it but for me a bit challenging to wrap my head around. Articles or help pages that I've googled included information about how to do this, but the guides did not include code that used hooks. All the code I saw was written using class and object notation.

I was deciding to learn the class notation in JS (which I already know) and figure out how the class notation converts to the hook notation used by React so I can implement those ideas into my app.

I just need to spend some more time reading into these guides. Also, when I add the above features, I need to make sure my codebase stays simple and light and not bulky. I want this app to work quickly and soon.

Differences Between Engineer and Developer

Vlad Solokha — Thu, 01 Jul 2021 16:55:30 +0000

"The difference between a software developer and a software engineer is the same difference between **big* and large."* --Unknown

So what I learned is that engineers are more software breadth centered.
Developers are more small task centered.

Being an engineer implies that you have degree, tech knowledge, and experience and you are capable of designing a software system. You see the bigger picture and part of your job is to explain that 'picture' to your team.

Being a developer implies that you code, design, architecture, and write technical docs for the component your building. Some are leaders in their field, but not necessarily.

In more ways than one:

Engineers > Developers.

You might as well put that in your description.

Thanks to CodeGiant for the article can be found here: CodeGiant Software Engineer vs Software Developer

Do you think there's a difference?

Adding Comments to Code: Python

Vlad Solokha — Tue, 29 Jun 2021 05:19:46 +0000

Writing good comments in code helps other programmers understand how it works.

Below is an example of bad comments in code.

The downside to so many comments is it makes your codebase very long and at times hard to read. So it's up to you to find a good balance.

Let me know what you think in comments below.

Creating and Hosting a Website

Vlad Solokha — Mon, 21 Jun 2021 23:42:11 +0000

A story about my attempts and struggles for creating a website and hosting it.

Goal of the website:
To demonstrate my knowledge of building stuff (software).
To show my projects.
To show my blog posts that I write here [dev.to].

First, I decided that I want to have a sort of blogging website that will update automatically when I write posts here [dev.to]. Those posts will appear on my website. My website should also include an about me section, my projects, this blog, and a contact form.

I wanted my website to have my name as the domain name: vladsolokha.com. So I went to hover.com and registered that name.
I started exploring the different stuff I could do with my name now by clicking around the tabs:

The not useful tabs included: email, advanced, connect tabs. Since I wasn't going to take the easy route by just using a website builder, I wanted to use something that required more programming experience and flexibility in designing a website. I already had a stackbit set up and ready to go on my GitHub.

To get to that point I simply went to dev.to settings and found this:

I clicked to create a new stackbit site. Signed in using my github account. Then I used the following stack to have the website build. I honestly don't know fully what each layer is doing and that I what I will attempt to describe below. I will do the research and try to explain each item the best I can.

I know github is where the code is being held or stored:

Dev layer is where the source of information is coming from (these blog posts). When I click on the dev layer it takes me to my dev.to dashboard where all my dev posts are stored.
The next layer is Gatsby and from their documentation it is easy to see that their framework (code library) is what is building the site:

I'm tempted to go through the tutorial on how to code using Gatsby, but I do just want to pull or clone the code in my github to vscode and play with it from there.

The last layer is "Fjord" which I Googled:

That's not what I'm looking for so I added "Fjord programming"
and the first link that came up was a github page and Fjord is a "A strict, linearly typed functional programming language that compiles to JS." That was from the about section.

Edit: Totally got this wrong. My first search was right, this seems like the name of the template or theme Stackbit assigns the website template to.

My next step was to host the stackbit code stored in github to Netlify. I go ahead and log into my Netlify account and create "New site from Git".

Next, I want to play with some settings and assign my registered domain name from Hover to Netlify. The build and deploy settings look fine, so I move on to the "domain management" tab and add my domain name from there.
It now looks like this:

After that, I received a window that asked me to use Netlify's nameservers to be used instead of Hover's.

I copied those names to Hover name server space:

And this is where I leave off all the setup to focus on actually manipulating my website to show all the stuff that I want.
Namely, an 'about me' page that also contains some design details and other fun stuff.

Thanks to Ken Rogers from LYPD who helped me with the process. As well as Terabyte Tiger and his post about connecting Netlify and Hover together.

Let me know if there can be improvements I can make to this process or changes that should be done. Maybe I missed something. Leave a comment below!

Building a successful portfolio website [summary]

Vlad Solokha — Mon, 21 Jun 2021 18:43:27 +0000

Full-Time software development job seekers

If you're looking for a full-time software development job and don't necessarily have a degree in CS or a related field. Here are some tips for how to stand out from the large number of applicants trying to find similar jobs.

A portfolio website that stands out and is unique to who you are is your next best bet for landing that software development job. Your website is your gateway to, "show employers that you are competent at building stuff." Include attributes that demo your competence, enthusiasm, telling your story, humility and grit (easy to mentor), and sprinkles or hero details.
You need an “about me” section that is specifically unique to you (cannot be applied to everyone) and tells the story of your experience and personality as a developer. It should have a catch or word that is memorable.
You need 2 or 3 unique project that you built yourself from start to finish. Deeper projects are better than MVPs or unfinished works.
*Consider a project that:
**solves a specific niche problem you have and build it from start to finish
**is alive, live, deployed, and/or being used
**can be an open-source contribution
**can be a blog (should have > 5 posts)
Projects should link to separate pages on your website and guide the reader through your work. Write about starting, struggles, inspirations, features, overcoming getting stuck, solving bugs. Tell your story about your work.
Consider the order of the story:
*Introduction- summary, functions, features, tech used, demo link, source code.
*Purpose and goal- why, importance, outcomes, initial designs, other planning to help the narrative.
*Spotlight- best features, most work, proud of stuff, technical hurtles, solutions (developer in mind)
*Current status (optional) - who, why, what is used.
*Lessons learned- can be non-technical, frameworks, decisions explanations, how is your work affected?
Project page should be easy to skim. Avoid long paragraphs. Avoid stuffy and corporate tone or language.
A contact me embedded form or contact information using a mailto link.

When Building

Your portfolio should take into consideration:

*Thoughtful and inspirational design. It should be hard to differentiate your design from the template you copied it from.
*Create from scratch using known frameworks or tools or vanilla it (HTML, CSS, JS). Avoid no-code site creators.
*Connect it to your own domain name and host using some service like Netlify.
*Create some hero details or personal touches to make your portfolio engaging and pleasing to view. Try adding an interaction where it isn’t expected (surprise). Flourish, animate.
*Include accessibility features.
*Use a natural tone, like spoken language.

Disclaimers:

Your projects are more impressive than you think. Don’t undervalue your works. Market them in a positive light. Trivial or mundane details/features of your project can be impressive to employers.

Promote:

As part of application, in networking efforts (GitHub, LinkedIn, Dev.to, email footers), cover letters.

Cover letters:

Write then using conversation tone, tell a unique and specific story. It should be written uniquely to the company you’re applying to. Talk about how you fit in the company culture and with their values.

Adapted from Josh Comeau's book "Building an Effective Dev Portfolio"
https://www.joshwcomeau.com/effective-portfolio/

Let me know what you think of this in the comments below!

Career Shift

Vlad Solokha — Fri, 18 Jun 2021 04:28:20 +0000

It's Summer.

I'm anxious to be building my career as a software developer because it will shift away from my current work as a computer science instructor at a high school.

Teaching is one thing and at times I love it, but I want to build apps.

I've been fascinated with computers for ever since I was a pre-teen. I don't see myself teaching for the rest of my life, but I do see myself more in software.

I am challenged with getting my name out there. Also, I am struggling with knowing exactly what tech or skills I should be acquiring to work in this rapidly evolving industry.

Widgets Project Idea

I am currently beginning the planning of a web application that will serve a single-page of useful widgets. These will be draggable, uniquely designed, and able to be customized by the user to suit their needs. This web app can be accessed from any platform and will contain widgets like weather, notes, calculator, to-do list, news, etc. The app will require a login.