DEV Community: Mariusz Bialobrzeski

.Net Dojo Setup

Mariusz Bialobrzeski — Fri, 05 May 2023 05:03:03 +0000

There are times when we need to learn something in .Net. We search whatever it might be on Google, check different Stack Overflow solutions, go through blog posts that offer complete code examples. Finally, after all the reading we decide which concept to adapt and go to sleep having this great feeling of Wow I have learnt something cool today. And that is great. What is not so great is that:

one
The next day I do not really remember well what I read a day before, and, what is more more important,
two
I would not be able to write the code to fully use what I have learnt.

What I found to be quite effective though is practice. I usually do not feel that I really learnt something until I do it. One of the big challenges that I know prevented me from putting the new concept into action however was the time and effort necessary to spin off a dojo project where I could actually put the knowledge into code.
That is where .Net CLI comes to play. All you need to do is start the PowerShell terminal by pressing Win key and start typing powershell until you see PowerShell displayed in the results below and press Enter. In the PowerShell terminal window navigate to the folder where you would like to keep your work. Then use the dotnet new command to create an empty dojo project.

dotnet new console -n MyProjectName -o MyProjectFolder

Before actually creating the new project I usually like to check the outcome with the --dry-run argument such as

dotnet new console -n MyProjectName -o MyProjectFolder --dry-run

Console application template is just one of many empty projects available to us. Choose whatever template is most suitable for your needs.
After that, all you need to do is navigate to the project folder

cd MyProjectFolder

and start Visual Studio Code by typing

code .

And that is it. You are ready to put your new knowledge into action.

Flatiron School Software Development - Phase 3 Recap

Mariusz Bialobrzeski — Thu, 18 Aug 2022 04:09:19 +0000

I am returning with another installment of the full stack web dev phase overview. These four weeks transitioned the content from front end to back end. The infrastructure chosen for this phase consisted of ruby, SQL (sqlite), Active Record, Rake (for db migrations) and Sinatra. Let's start with Ruby. My professional experience revolved around static languages of .Net and Java and it was cool. What can I say, I like being explicit in my creations. Ruby seems to be the opposite to this and I never considered its domain to be my cup of tea. Nevertheless there are a lot of positives as well. I love the emphasis on simplicity. I feel like there is not a single unnecessary character left in the language. Working with arrays is pure bliss thanks to a ton of short array methods that seem to be able to accomplish everything. Adding an element to an array is as simple as:

todays_menu << banana_basil_smoove

How cool is that!

Ok. Enough with personal memoires. Let's get technical.

Here is how to build string literals:

"#{$evil_monster} is trying to kidnap Princess Peach!"

Common debugger is pry.
Install
gem install pry
Reference

require 'pry'

Use

binding.pry

Looping is short and simple

10.times do |i|
  puts "Looping!"
  puts "i is: #{i}"
end

Objects

Use @ symbol to make instance variable without declaring it anywhere.

class Dog
  def name=(value)
    @name = value
  end
end

Attribute accessor macros
Use auto-implemented properties whenever possible for convenience and clarity

class Person
  attr_writer :name
  attr_reader :name
  attr_accessor :age
end

Initializer methods or constructor

class Dog
  attr_reader :breed

  def initialize(breed)
    @breed = breed
  end
end

self is equivalent to .Net's this.

  def get_adopted(owner_name)
    self.owner = owner_name
  end

self used on method definition makes an equivalent of a static method and @@ makes a static variable in .Net

  def self.count
    @@album_count
  end

To make a method private use private

  private

  def choose_liquor
    @cocktail_ingredients << "whiskey"
  end

Inheritance

class Car < Vehicle

end

To invoke code from inherited class use super.

class User

  def log_in
    @logged_in = true
  end
end

class Student < User
  def log_in
    super
    @in_class = true
  end
end

Flatiron School Software Development - Phase 2 Recap

Mariusz Bialobrzeski — Tue, 05 Jul 2022 06:09:01 +0000

Again and again. What to write about?

Just like with the previous phases of the course here comes the time when the blog post assignment is due. No surprise there, I struggle with the same dilemma of choosing the topic. The amount of freedom that is given to choose the content does not seem making the decision any easier. I do not want to write a post that is a tutorial. Being a beginner in web development I am not in the position to teach anyone how to code in JavaScript or React. What if my understanding of the concepts is wrong? What if my understanding of the concepts is correct but the solution I have learned is already outdated or there is a better, preferred solution out there. I would rather stay away from writing a tutorial. Then it came to me. What if, instead, I focus on what was covered in the course this phase? It feel like this is exactly what I need. The content being technical should meet the requirements of the blog post assignment. Keeping it personal should make it clear to others that this is not a tutorial and it should not be used to learn anything from it. Finally, writing it in a form of a reference has a purpose of creating a knowledge source I can revisit when I need to write a piece of code I know I learned but the details evaporated from my memory. So here it is. The collection of the most important/good to know/easily forgotten learning points from phase 2 - introduction to React.
To create an empty React app use a template:
npx create-react-app my-app
Then resolve all the dependencies:
npm install
To add a package to the dependencies, for example date-fns:
npm install date-fns
To start the app:
npm start
A Chrome window should open with the address. Any time code changes are saved in VS Code, the app should automatically reload.
Destructure props with curly braces:

function MovieCard({ title, posterSrc, genres }) {
  return (
    <div className="movie-card">
      <img src={posterSrc} alt={title} />
      <h2>{title}</h2>
      <small>{genres.join(", ")}</small>
    </div>
  );
}

Remember to add keys when mapping objects. The keys should have unique values:

const userHeadings = users.map((user) => {
  return <h1 key={user.id}>{user.firstName}</h1>;
});

Use state when binding components to variables. Remember to give it an initial value:

const [count, setCount] = useState(0);

Use callback functions, here onChangeColor, to send data back to the parent:

function Child({ onChangeColor, color }) {
  return (
    <div
      onClick={onChangeColor}
      className="child"
      style={{ backgroundColor: color }}
    />
  );
}

Nice generic trick when binding multiple form fields. Remember to keep the names of the ui elements the same as the state object field names.

function handleChange(event) {
  // name is the KEY in of the formData object we're trying to update
  const name = event.target.name;
  const value = event.target.value;

  setFormData({
    ...formData,
    [name]: value,
  });
}

If you want to fetch data from a server when the component renders for the first time, use useEffect with and empty array.

useEffect(() => {
  fetch("https://dog.ceo/api/breeds/image/random/3")
    .then((r) => r.json())
    .then((data) => {
      setImages(data.message);
    });
}, []);

If you want to fetch data every time the state of count variable changes. Update state directly from the response:

useEffect(() => {
  fetch("https://dog.ceo/api/breeds/image/random/3")
    .then((r) => r.json())
    .then((data) => {
      setImages(data.message);
    });
}, [count]);

Create items:

  fetch("http://localhost:4000/items", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(itemData),
  })
    .then((r) => r.json())
    .then((newItem) => console.log(newItem));
}

When item is created use spread operator to update state array:

function handleAddItem(newItem) {
  setItems([...items, newItem]);
}

Use routing when different urls are needed for different components and to access different components by entering url:

<Routes>
        <Route path='/expense' element={<Expense expenseAdded={onExpenseAdded} categories={categories}/>} />
        <Route path='/category' element={<Category categoryAdded={onCategoryAdded}/>}/>
        <Route path='/' element={<Home expenses={expenses}/>}/>
        <Route path='*' element={<div>Not Found!</div>}/>
      </Routes>

Use json-server for dev environment with db.json file:
{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } }

json-server --watch db.json --port 3004

JavaScript Context Thoughts

Mariusz Bialobrzeski — Tue, 24 May 2022 05:04:25 +0000

I am in a process of learning a new programming language. It is no surprise that the language is JavaScript. It seems like today every developer needs to know it. I used to work with .Net most of the time back in the days when writing code served as a mean to pay for the things I needed and the things I did not need. Today it is just a memory of the past which I learned to live with. The feature of C# I remember enjoying the most was it's static nature. Nicely defined variables with strong type that propelled intellisense when connecting pieces together. The satisfaction I had when those pieces clicked rewarded the extra time spend defining them. "Some people favor being explicit" remains my most beloved StackOverflow quote buried somewhere under those snappy comments below the popular answers. Yes there was an option to write dynamic code with var but that idea never really appealed to me. Now, with JavaScript, things are different. I have to rely more heavily on debugging due to silly mistakes such as variables not being defined. Overall this feels more like a script than a language to me. Take the function context as an example. You can set it to some other object to your liking by appending .call(), .apply() or .bind() to a function invocation. Then the function's context object can be accessed using 'this.'. Why would such a technique be of any benefit? How do I know what 'this' is referring to by looking at the function's definition? I would have to track down all the places where the function is called to have a feeing 'this.name' refers to a city name and not my cat's name for example. Why not just pass the the object to a function and name it properly instead? This seems like a hack added to the language in order to bridge some of the shortcomings. Of course I might be wrong about the purpose of such context alteration of a function. Anyway, it is OK to be wrong. That's inevitable part of a learning process.

What to Expect From a Coding Bootcamp

Mariusz Bialobrzeski — Mon, 11 Apr 2022 05:40:26 +0000

A month ago I have started a coding bootcamp. It is supposed to be a half a year program. It is supposed to be for complete beginners to software development. As it is a requirement for every cohort member to write a blog post every phase, here I am doing what I have never done before. Writing and sharing something publicly. I have to admit that I have posted a few times on the stackoverflow but this is different. I see a blogging as an expression of of knowledge. We find ourselves being redirected to blog posts when we seek answers to the concepts we are not familiar with. In a nice written, well thought through and almost always assumed to have content that is correct and even be an example to follow. But what about me? I am not well versed in the proper grammar nor give too much thought to my first blog post. Most of all, by all means, I am not to be taken as an authority in the technical content of the course I have just joined. What if I keep blogging as a journal to record my reflections on the program so far? This way I would not put anyone in trouble offering my advice about the concepts I am vaguely familiar with. Having said that, here is the one thing I feel is the most important to point out. Beginnings are difficult. This is new technology, most likely a new way to work since there are standards we are supposed to learn and follow. This is also a new commitment. Now there is this ten hour or so time frame that I need to account for each week to do all the reading, make sure I understand the concepts well enough to use them to do all the assignments and to use this knowledge in the future and if I am lucky, attend or at least watch the recorded lectures and lab sessions. What I have found so far is that it is not the exposure to the new technical concepts which cause the biggest problems. It is the management of time necessary to submit everything before the due date. In a way it is a struggle not with trying to understand and learn new concepts but rather a struggle to bend and cut down the personal habits and activities just to submit everything on time.