DEV Community: Kimchi kamchoo

CAD or Code

Kimchi kamchoo — Thu, 11 Mar 2021 04:12:29 +0000

Why Coding?

One of the questions that I can answer with confidence as an Architect. Digital design software is crucial in the modern architecture sector. There are many software's that we have to learn and work with, Each piece of software has something different to offer. I chose the popular ones and started to work with them, such as :

1. AutoCAD

which allows you to develop drawings that represent your buildings at the more basic level.

2.Revit Architecture

, This software focuses on providing the tools for effective BIM. building information modeling (BIM) concept is key in modern architecture.

3.Sketchup

: You can create simple 3D models quickly. With the right features, you can even create complex models ready for presentation.

4.V-Ray

: V-Ray is not standalone design software. It is actually a plugin. You can use it with ArchiCAD and SketchUp. Its purpose is to create a realistic rendering. This allows you to show off your 3D models as they would look in the real world.

all these softwares are great and helped architects to do their jobs faster better and presentable, making buildings without souls of our era.It seems like Architecture stopped at some point and we were just copy cats from past generations.
even after studying Historical Preservations for two years, I found out how much the new technology can save these buildings giving them adoption to the modern world. all the stories behind each layer and structures can be saved by new technology...

something changed inside my mind after learning Grasshopper, 3dsMax, Cinema 4d,...technology helped the Architecture field in its own way but still, you couldn't see any sign of code or digital design on the surface of the design or in its heart.

Grasshopper changed everything for me,

Grasshopper is primarily used to build generative algorithms, such as for generative art. Many of Grasshopper's components create 3D geometry.[5] Programs may also contain other types of algorithms including numeric, textual, audio-visual, and haptic applications.

Advanced uses of Grasshopper include parametric modeling for structural engineering, parametric modeling for architecture and fabrication, lighting performance analysis for eco-friendly architecture, and building energy consumption.

this is when I could truly see code and computer affections on the surface of a building, now I wasn't satisfied with the real world anymore, the new buildings were not good enough with all these new technologies which make sense because how many Architect students had the time to learn to code and really dive deep into it, vice versa.
The connection between Software engineers, Artists, and Architects was not strong enough. meanwhile, found Game development, a world I could feel these connections strong and satisfying. that was when I started learning Game Environment design, learned Vray 3dsMax, cinema 4d, unreal engine.

after 3 months of learning on my own my path was no longer clear. still, I was in the middle of the connections and didn't make any new ones.

I wanted to actually give life to my environment make connections and CODE.

GrassHopper opened my eyes to algorithms and since Architecture is the Art of creating in world im getting back to creation from its heart...yes Coding.
I'm here enjoying every bit of it.

DICE ROLLER APP WITH STATE AND PROPS

Kimchi kamchoo — Thu, 11 Mar 2021 04:12:18 +0000

To understand state and props better lets make this Dice roller app!
we will be adding some styling and animation as well!

How to start

let's go step by step!
1.create-react-app dice
2.cd dice
3.npm start
to start this app we can start with a dumb die(stateless die).

Dumb Die

By creating a Die component and rendering a Die let's check if everything works fine!

import React, { Component } from"react";

class Die extends Component {
 render() {
   return<h1>DIE!</h1>;
   }
}
export default Die;

to see the Die we need to render Die in App.js

import React, { Component } from "react";
import Die from "./Die";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className='App'>
        <Die />
      </div>
    );
  }
}

export default App;

now we can see Die on localhost.

Adding Die icons will rock, checkout this website and install some Die icons with style and className . we can edit and play more with it.
fontawesome:dice icon link

how to access these icons:
1.so for now we can insert the link inside public/index.html somewhere in

to access Die icons.

 <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
      crossorigin="anonymous"
    />

to see the icons let's insert the icon inside Die component and we hard-coded the className from the link to see the Die. The problem is we can see the Die dynamically which we have a solution for , to understand better we will go step-by-step.

import React, {Component } from "react";

class Die extends Component {
render() {
  return <i className='fas fa-dice-one' />;
  }
}
export default Die;

There we go now we have the first icon showing up our little black showing number one die as we hard coded.So if in our App.js we put . we cant see die face five to show the dice dynamically this is the solution:
The fas fa-dice- is always the same. to change the face we can go with the famous ${}.

 return <i className={`fas fa-dice-${this.props.face}`} />

since we gave our App.js our desired face like five we will get our

styling

To have the Die a little bit larger in Die.css component we will have:

.Die {
font-size :10cm;
padding:0.25cm;
color:purple;
}

Hint: don't forget to import Die.css inside our Die.js componenet.

DUMB DICE DONE NEXT STOP ROLL THE DICE

The fun part starts right here :
1.lets make RollDice.js file
2.so imagine we open this app and we want to see two dice facing number one. like the theater when we enter will already see the set. YES SET! this is where state comes ... so the state of the dice at first will be always one. we can write that in code!

class RollDice extends Component {
  constructor(props) {
    super(props);
    this.state = { die1: "one", die2: "one"}
  }

By importing Die from '/.Die' now we can return

and we will just see two dice showing number one!
since we didnt set any states meaning we didnt update the state.
3.In App.js we can now import the RollDice instead of rendering the Die face="five"
4.Now what we need to do?lets start by defining an array of all the sides or faces with

defaultProps

why? it doesn't make sense to put this inside the state since it's not going to change and it doesn't have to be in props either. now I Know the class Component with => will do this automatically but let's learn step b step:D

 static defaultProps = {
    sides: ["one", "two", "three", "four", "five", "six"]
  };

5.Button time,
Roll Dice!
6.now what is roll? we need a roll function .inside roll function we will need to pick 2 new rolls and set state with new rolls.to pick the 2 new rolls we need to (Math.random() * this.props.sides.length) so this.props is the access to the array of default props sides,but there is a problem here that is not integer so we will need floor

 roll(){
const newDie1=this.props.sides
[Math.floor(Math.random() * this.props.sides.length)];
const newDie2=this.props.sides
[Math.floor(Math.random() * this.props.sides.length)];
}

7.How to update the state? imagine the scene of the theater is changing so the curtains are down and now people from backstage are trying to set a new scene and everything updates this is where setState comes:D the people from backstage will bring the new Die and in here its random so:

this.setState({die1: newDie1, die2: newDie2})

But now when we Roll the Dice it doesnt know what is (this.props) inside const newDie. we can define that .

class RollDice extends Component {
  static defaultProps = {
    sides: ["one", "two", "three", "four", "five", "six"]
  };
  constructor(props) {
    super(props);
    this.state = { die1: "one", die2: "one"};
    this.roll = this.roll.bind(this);
  }

HINT

: When we call this.setState the whole render component re renders and since we have two other Die components inside the component they will also re render and have new value passed in as in props called face.

Animation

1.To get the Rolling Dice inside this.state we will add another property rolling which will have the value false .because we dont need to see that first and inside roll function this.setState after updating the faces we will have the rolling:true,but now when we click on the button it will stay true .
2.Now onClick of this roll we want to say if it is rolling what do we want to see on button?Rolling otherwise Roll Dice.

 <button onClick={this.roll}> 
{this.state.rolling? 'Rolling...' : "RollDice!}

Now it will stay on Rolling ...how can we solve this?one solution is giving it a timer we can say wait one second, the set rolling to false in roll()

  setTimeout(() => {
      this.setState({ rolling: false });
    }, 1000);

also set True value when we do he setState

this.setState({ die1: newDie1, die2: newDie2, rolling: true });

And now we can still click on the button while Rolling..how to stop that?
There is an attribute called disabled for button

  <button onClick={this.roll} disabled={this.state.rolling}>
          {this.state.rolling ? "Rolling..." : "Roll Dice!"}
        </button>

Remember if we only give true value to disabled it will stay disabled permenantly and we cant click it!

Jiggle Jiggle Time

in our Die.css we will add a wobble keyframe which has a rotation and moving left and right :

@keyframes wobble {
  from {
    transform: translate3d(0, 0, 0);
  }

  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

we can add a separate class for this wobble to also add duration

.shaking {
  animation-name: wobble;
  animation-duration: 1s;
}

How to send this shaking when we are rolling the dice and not refreshing or at the beginning? yes => state.
In RollDice we need to add the prop rolling inside the Die

 render() {
    return (
      <div className='RollDice'>
        <div className='RollDice-container'>
          <Die face={this.state.die1} rolling={this.state.rolling} />
          <Die face={this.state.die2} rolling={this.state.rolling} />
        </div>
        <button onClick={this.roll} disabled={this.state.rolling}>
          {this.state.rolling ? "Rolling..." : "Roll Dice!"}
        </button>
      </div>
    );
  }
}

Also in Die componenet we will be needing another class to check conditionally check based off this stop prop start rolling.if it was rolling we want to apply class shaking othere wise nothing.

class Die extends Component {
  render() {
    return (
      <i
        className={`Die fas fa-dice-${this.props.face} ${this.props.rolling &&
          "shaking"}`}
      />
    );
  }
}
export default Die;

I hope you had fun with this RollDice App

thanks to Colt Steele

Drag oops Drop!

Kimchi kamchoo — Thu, 11 Mar 2021 04:12:05 +0000

There are many Libraries you can find out there for drag and drop, But ... most of these libraries are made for lists! So? What's wrong with lists well they are great for sortable lists, like the todo apps where you have a bunch of lists where you can move them in a two-dimensional drag and drop grid meaning you can move things up and down or right and up:(.
In this blog I'm going to show you how to move things Dynamically meaning moving vertically in a list so we can transfer them to a different list or column!
lets go!

the library that I found is "https://github.com/clauderic/react-sortable-hoc"
with this library, you can drag and drop horizontally or vertically or in a grid and sort it in the way you want:)!
if you look at the Link you will see a sortable item component and a sortable list, we will wrap the sortable list in a sort of container and we wrap the sortable item in sortable elements! also, you will see sorted! what's that?
well, when we move things around we are changing the order of their states too:S
so this will update the state to show which element is in which state.

well we have the time to go step by step...and here we go:
1.
$ npm install react-sortable-hoc --save
2.now import it in your file
import {SortableContainer} from "react-sortable-hoc";

a tip before the next step if you have a list of items like boxes probably you have the items too which you were mapping through the boxes, at this point, I will make them two separate files like a dragBoxList and drag box! 4.inside your dragBoxList we will need the : const DragBoxList = SortableContainer(({boxes, removeBoxes})) => { return()
the remove boxes was just an option if you want to delete or remove the boxes.
so now our dragBoxList is just a reference to the component that is wrapped into the portable container.

We are not done yet! we need to go to our drag box and make it a sortable element.
7.so in your drag box file we will import:
import {SortableElement } from "react-sortable-hoc";

again the 4th step: const DragBox = SortableElement(props => { return()} Now the drag works but still not ready. you can drag it but the drop still needs work since we didn't teach the box how to work;). In docs, we can see in sortableList every element needs a index. index={index} When mapping through your items or boxes:

9.
{boxes.map((box, i) => ( <DragBox index={i} key={box.name} /> ); }
10.now we have vertical drag and it's not saving the changes.
let's specify axis="XY"
now we have drag vertical and horizontal still no save.
The LAST PIECE!
in the docs, there is onSortEnd that you can copy and paste with the new index and all stuff no need to bind because its using class property syntax, old index, and a new index.
I hope now you can Drag and Drop:D

"Sophie's World in Ruby"

Kimchi kamchoo — Wed, 23 Dec 2020 19:54:56 +0000

Self in Ruby

If You are a beginner self can be a little bit confusing, so I decided to do a comic out of self. It's like the book "Sophie's World" where she wanted to understand who she is and where did she come from?
That being said let's go way back to understand self.
we know everything created by Creator Ruby is an object and this means all the codes or "storylines" "belongs" to some object. Just like in real life there will be many objects with many storylines.
when there is so much data how can we find the owner of the code or the object?
That is where Ruby Keyword comes and gives us access to the current object!

sorry to say there is not much philosophy behind it.But you will have the power to type in self and ruby knows which object you are talking about. The tricky part starts right now:

The current object depends on the context.

before we start with the examples =>

!Hint: if everything is an object even classes are objects...then we can use self when defining Classes, Methods, Modules.
In the following Examples, there will be Aliens standing in front of the mirror trying to figure out who they really are?

self in instance method

class Alien
  def reflect
    self
 end
end

we have sir biboo a polite alien.
biboo = Alien.new
biboo.reflect == biboo

so Mr biboo will see himself in the mirror!

self in class method

class Alien
  def self.reflect
    self
 end
end

Alien.reflect == Alien

Here the Object is not Mr biboo but the class Alien, which i see as a factory object making lots of Aliens for us:D.

!Hint: A reminder that it works the same inside of modules.

Class << self

Before this Example once more we were told everything is an object in ruby world right? so the Class of any class is Class, checkout this blog ( https://dev.to/samuelfaure/explaining-ruby-s-singleton-class-eigenclass-to-confused-beginners-cep ) that blew my mind!

#We can create ExampleObject like this :
class ExampleObject
end

# Or like this :
ExampleObject = Class.new

ExampleObject.new.class # => ExampleObject
ExampleObject.class # => Class
Class.class # => Class
ExampleObject.class.class.class.class # => Class

According to the Example:
our Alien will say Hi in another language

class ExampleAlien
  def printHello
    puts 'Hello'
  end
end

Alien1 = ExampleAlien.new
Alien2 = ExampleAlien.new

class << Alien2
  def printHello
    puts 'Aloha'
  end
end

Alien1.printHello # => 'Hello'
Alien2.printHello # => 'Aloha'

A list of other-self uses:
•Define class-level methods
• Use an instance method when you have a local variable of the same name
• Returning Self (builder pattern)
• Debugging
• Comparing objects (==)
• Default receiver of method calls

Hope you had fun understanding self. so Who are you really?

Squeezed GIT

Kimchi kamchoo — Fri, 23 Oct 2020 07:59:23 +0000

In Turkish, the word "git" means go!! it felt more like run!!!
GitHub was a little bit confusing for me but after some time it makes more sense, first let's talk about four fundamental elements in the GIT so we can understand what's going on. we have this office or folder which is our ##local directory.

Then we have index , also called stage

also the local repository

and finally the remote repository.

If we consider a file in our workspace it can be in three possible states:
1.it can be committed
2.modified which is the case of the file being changed and none of these changes being saved to the local repo.
3.it can be staged which means that the file is basically part of this index that means it's been tagged to be considered in the next commit.

Now let's talk about why and when we use the commands.

The first command that we usually run in case we are getting access to a remote repository is

git clone

oops did I go too fast?
let's do it together and set up GitHub :

git config --global user.name"[firstname lastname]"

set a name that is identifiable

git config --global user.email "[valid-email]"

set an email address that will be associated with each history marker

git config --global color.ui auto

set automatic command line coloring for Git for easy reviewing.

SETUP & INIT

git init

initialize an existing directory as a Git repo

git clone

yaay so we just started with this step together. the git clone followed by the URL for that repository will create a local copy of the repository in our workspace and yes if we are creating the repository.
the next command is the command add, and what the command add does is to add a file that is in the workspace to index.
Now our file is staged and it's marked to be committed but not yet.
So what we need to do is to commit the file.

git commit

now all the files that are staged, their changes will be committed to the local repository.
At this point, our changes are safely stored in the Local repository.we can also perform these two steps at once by executing a Commit -a.

after discussing centralized and decentralized, there is a local repository, now we have to push our changes to a remote repository and this is were

git push

command does.it pushes the changes in the local repository to the remote repository.
what if we wanted to get our data files from the local repository to our workspace.well yaaaay we have a command for that too

git merge

in case we wanted to get the changes directly to our workspace with single command..magic:

git pull

as we can see git pull and git merge they have the same effect why we use git merge if we can do everything in one command?
because it allows us to compare files before we actually get the latest version of the file.
Basically, GitHub is a room filled with folders and we are trapped inside of all these files and folders. And there are ways to send the files to other rooms, Change it and get it back ad, etc ...
These were the basic commands. There are many cheat sheets out there that we can use.

I hope this was helpful just a little bit:)