This post is not a tutorial, just a part of a series of posts about how I think when I try to solve challenges and learn as a programmer.
I decided it’s time to start writing about what I do programming wise. I worked for 3 years, until last August, in a small startup in Herzliya, and like many startups I can’t say too much about it. I worked as a full stack developer, working backend with C#, .NET and front with JavaScript, angular. It was a great experience, I even got the honor to write the first line of code in our solution and many more since. I started working with one guy, and when I left we were already a real company with CEO, CTO and a full team of developers and a QA team. Since I quit I heard the company is doing very well.
I didn’t become a nomad recently, it started a long time ago. I always liked to move around, and working in the company didn’t change that. I arrived to the office once or twice a week, and most of the work I did from home. A home which changed a lot in the last two years, a few months in Tel-Aviv, a few more in Rishpon, Beer-Sheva, and the last few months in Israel I lived in a farm in Gush-Etzion. The last few months I also spent studying in Beer-Sheva, working in Herzliya, staying at Renana’s house in Nitzan and living in the estate (the name we gave our farm). So life before the flight prepared me for this trip, and hopefully life.
But I didn’t want to give you my résumé, I wanted to talk about what I did since then. I started using freecodecamp.com for studying full stack development. Although I already have experience in that, I figured that doing a complete route will give me some insights and lots of experience. I’d actually like to get the backend certificate very much, but I really like to doing things by their order, and since the frontend certificate appears before the backend one, I want to finish this before. It’s also easier for me (although designing and CSS is not my strength) and I do learn a lot. I started building my projects using React and now I know a new framework (or library, depends on your definitions I guess).
I’m already on the last projects, and I have three more projects to finish the certificate. This week I finished the JavaScript Calculator project. I also started hosting my projects in GitHub instead of using CodePen.io, (learning git on the way). You can see the calculator on https://chiptus.github.io/fcc-projects/calculator/ — If you find any bug or if you have other feedback, tell me in the comments.
I want to say a few things regarding using GitHub and git vs. using CodePen.io. First, in CodePen you have three files, one file for each kind: JS, HTML, and CSS. It’s very good for prototyping and writing a simple page. But when your project starts being more complicated, which happens very fast, you’ll want to use git.
First you want to have its version control features, which many, many people praised before me, and if you’re not using them as a developer (either working alone or in a team), then now is the time. Start when you have small projects, I know it feels stupid, but when you understand it (and I still have much to learn) it is wonderful.
Secondly, when working with JavaScript, very fast you’ll want to use a bundler, work with modules and different transpilers. So you want to work with Webpack and npm, you want to add babel, maybe even use TypeScript. And although CodePen lets you use SCSS and Babel, it’s not enough. A simple web app can be a few hundred lines of code, and it can be very confusing to work with one file. On the other hand, building a new environment for each small project can be exhausting or even too much work sometimes, and for these cases CodePen is excellent.
So when you work with GitHub, you control the environment and together with GitHub pages (a feature GitHub gives you to host your own apps on their server — I might write a post about it soon) it’s much easier to work with their platform then with CodePen.io’s one.
So after praising git and GitHub, I want to go back to my calculator. As I said I’m not a designer, and you can see that my calculator is very similar to the one of windows 10. I used their design, and tried to make it work similarly to their calculator.
I used React for the project. React together with bootstrap for the design and I’m going to use font-awesome icons for the buttons’ icons. I’m using bootstrap and font-awesome because they make my life as a developer and not a designer easy. My CSS file is very thin, and I intend on it staying this way.
I chose React because I want to learn it, and in future versions, I might try using Redux or Mobx (which I always confuse with mbox). It’s a very nice experience to write React apps, and although I’m writing simple apps, I can understand the various talks about it simplicity vs. working with Angular 1.
So I started building my app, using some advice I got from the React documentation, and first built my static app, finishing its design as I like. This step you can do with CodePen, and if you didn’t create your Webpack environment, it might be a good idea. I used a pre-built one with Webpack, react, bootstrap, fa, babel (if you read my offline-npm post, I chose the copy paste solution for now, but had and succeeded using cache-min for bootstrap). Raising an environment seems a bit out of context, but there are many tutorials about it (and here is one!).
Ok so this is how I’ve started: bootstrap with the following static html:
As you see, it still doesn’t do anything, only for show.
And now it’s time to start dividing my app into components. I have the app component of course. As this is a very simple app, it is the only stateful component. All the other components are meant to be only dummy components, meaning they don’t change the state the app handles. The state is the result and a stack which will hold the history of operations, so that it can be displayed, and be calculated at the end.
The app component is divided into two sub components — output and buttons. I always try (also when using angular 1.5 components) to make my components self-descriptive, meaning that their name will explain what they do. That also means that if I have a complex component that isn’t self-descriptive, then I need to divide it. Actually, very much like using functions.
I can have a button component too, but it’s not so meaningful as it’s only a one liner and html has a button tag so it can be confusing.
That’s it — as you see React is very easy and simple to build a component based app, again as long as you don’t need state — but I still have nothing to show, and this version works exactly like the static one. In the next post I will do the harder part which is to put state into the app.
This post was originally posted on my blog: tdigitalnomad.blogspot.com
No comments:
Post a Comment