DEV Community: Žane Suhadolnik

In defense of the Angular framework

Žane Suhadolnik — Mon, 01 Jun 2020 09:26:42 +0000

Over the past month and a half I've been working on a single-page app with Angular. When I heard that we had to use Angular I squirmed and thought to myself 'Why? There are so many better options out there'. I like many others out there have heard stories about how Angular was completely re-written for version 2 and ruined it's reputation. I've heard that the framework is bloated, complicated and overall too large for most projects.

I'm here to share my experience of being a primarily React developer, shipping React code in production to using Angular for a production application.

History

This wasn't my first rodeo with the framework. For my diploma I made the same app with React, Vue and Angular in an attempt to try and compare the 3 and see if one is better than the other (all 3 are great, all 3 have flaws, there is no 'best option'). I wasn't completely unfamiliar with Angular when I started working at this current company, but I was more inclined to using React because I was just more comfortable with it.

Before starting work on the new project I had a 3 days weekend and so having a more open mind I went through the Angular tutorial once again, skimming the TypeScript quick start and occasionally looking at the RxJS documentation before I started working on the project the next week.

Growing pains

Angular has a LOT of files per component. 3 at the least, one being the .html or template, then the .ts file for logic and a .css or more likely .sass file for styles. This was hell for a while untill I got used to it. Coming from React where everything is shifting to a single file component with JSX and CSS in JS, this was frustrating for the most part.

At the same time however I understand that 'separation of concerns' is a good architecture choice so I have nothing to complain about. The problem does become apparent however when you have a lot of components to work on and passing data between them can get a little messy. Still, nothing someone can't get used to and understand why it's important.

TypeScript

TS in Angular is not the same as TS in any other framework. It's used heavily and in way I still don't quite understand. But at the same time it was a great learning experience, because I can now write TS with no issue on any other project, which was one of my learning goals for 2020 anyway. Also you get to use it as much as you want, it's more of another 'testing' and 'linting' layer to help developers write safer and cleaner code. Throw in TSLint and the code base looks the same for all developers.

RxJS

I read somewhere that this was the most confusing and hard part of working with Angular. I maybe haven't delve deep enough into observables to actually encounter a specific thing that I find confusing because working with RxJS, the operators, subscriptions was not at all hard or confusing.
You just subscribe to an observable like a http GET request and once the server returns data you resolve it just like you would by using a then on a promise. It also provides a great deal of operators to help you manipulate and edit observables without much hassle.

RxJS gets a plus from me. No complaints so far, but I don't really see why I would use observables outside of Angular.

The complete package

Angular isn't just a view layer where the developer can use whatever packages and modules they desire, instead it's a bit opinionated and comes with a variety of different funcionalities from routing, forms, http requests, the before mentioned RxJS and TypeScript.

And this isn't a bad thing. It's a choice. Do you want to use React where you have a choice of what to use so you can be flexible and develop apps the way YOU want them to, but at the same time risking shooting yourself in the foot because you didn't account for something. The reverse goes for Angular. You have a complete package of tools that allows you to build a complete app without having to implement or think about outside solutions, but you give up some of that freedom you might have with React, which in my opinion is understandable.

This is why Angular is still more popular than React in enterprise solutions, but less so in smaller communities where people want flexibility.

Closing thoughts

Don't limit yourself to technologies just because they aren't as popular or because you think those technologies are doing something bad, instead try them out and form your own opinions on the ecosystem and developer experience by making some small apps. Same goes for languages and other things in the technology world.

Thank you for reading.

Thoughts on RedwoodJS

Žane Suhadolnik — Mon, 25 May 2020 06:45:19 +0000

For the past few days I've been going through the RedwoodJS tutorial and cookbook to see what the technology is all about, I've also listened to Full Stack Radio's episode where Adam Wathan interviews the creator to better understand why it's being built and what problems it's trying to solve.

The tutorial

First of all I need to praise the Redwood team for putting together one of the best tutorials for a framework I've every experienced. Clear, concise paragraphs and code explained with plain English and light humour. Go through it and you will see what I'm talking about.

Abstraction done the right way

Many JAMstack frameworks are trying to abstract certain elements away from the developer so we can just focus on creating apps with the right content. Most fail and just produce a chaos of problems that you don't know how to solve, due to the fact that they are abstracted away. Redwood doesn't do that, it abstracts away just enough for to still understand whats going on.

Taking for instance the way GraphQL + Apollo Client work with Prisma. I was familiar with all of these technologies, but never understood them fully until going through the tutorial. Yes it is still abstraction and yes you still give a lot of control to the framework itself, but this doesn't limit you. It's opinionated in the right way in my opinion as someone who only has about 2 years professional experience in the industry.

Cells

Redwood introduces the concept of 'cells' which in my mind is a thing every single framework should have out of the box. It again opinionizes a concept of how we deal with data state and what to show on the UI. If you write React code there isn't a set way of doing this, maybe you throw in some conditional statements and have to write entire components in order to make it work.

Redwood presents you with 4 states (Failure, Empty, Success and Loading) where you just tell it what to render once it enters that state and this is again.. fantastic. It eliminates the need to think about how to handle these states and just gives you the option of what to present to the user.

The Redwood CLI

Not sure if I should call it a CLI, but Redwood goes down the path of the Angular CLI, where you can add yarn workspaces through the terminal which I don't understand why it wasn't a thing with React apps before. You have generators for layout, pages, components, services and much more. This saves time and again gives you a sort of standard how things should look in your code.

React is imported everywhere

Leaving you with this: You don't have to import React to every single component. Again, I don't know how this wasn't already solved in the past, why would I need to import 'react' into every single component or page I make? With Redwood you just generate your app and start writing JSX code. You still have to import stuff like useState, but this is a welcome edition.

Those are my thoughts on RedwoodJS. I'm excited to see where it goes in the future and what it will bring to the table, it's currently still in an alpha stage so don't go building production apps with it just yet. Play around and see for yourself why I and a lot of other people like it.

Thanks for reading!

A post about productivity

Žane Suhadolnik — Mon, 25 May 2020 05:52:38 +0000

If you have a programming blog you have to write a post about programmer productivity. It's kind of like a ritual to be accepted into the pantheon of programming bloggers (next to writing your opinion on the industry and how it has changed as a whole).

Productivity in programming is weird when you are starting out. You think that you aren't making any progress when you just play around with HTML and CSS, because those aren't ReAlll programming languages, when in reality you are learning the basics for whats to come. You can't properly learn how to make web apps with just JS because eventually you are gonna run into some problem that requires HTML or CSS knowledge at a much deeper level. So you are making progress I assure you.

The type of productivity I'm referring to is how to properly get something done that you have set out to do and not spend hours just watching tutorials. What I'm saying is that to me productivity is when you are actively moving towards a goal. You don't have to consistently move towards the goal, yes it is prefered, but not necessary as long as you are moving. There is this great quote that I don't know the source of anymore, but it says It's much easier to steer a moving train than a not moving train. Once you have some momentum towards the goal all you have to keep doing is correcting your path to the finish line.

Taking development as an example. It takes ages for someone that hasn't programmed before to actually become really productive, but they are still productive in some sense. They are learning and learning takes a very long time to make into production of value. And that sucks, but it sucks all the time because we as developers are always learning and consiquently always feeling like shit because we don't 'know' enough. It's something that comes with the job.

Here are a few things I've learned to make me more productive in the work environment :

Having a list of tasks

I was using Trello for the longest time as the default home for all my tasks that I had to do at work. It quickly became clear that Trello was no working, because tasks were always changing and I was being switched to different projects all the time, making it difficult to constantly change Trello entries. Instead I actually downgraded to a regular A4 piece of paper, where I write the project name at the top and then tasks that need to be done. I cross them out once the tasks are done and it makes it easier to draw out UI requirements and make diagrams for easier understanding.
Also one of the reasons why I use paper is because we don't do development on laptops and making notes on my phone is just annoying at meetings.

Understanding the importance of a task

Using the Eisenhower method you should go over your tasks and decide their priority. If you have 2 critical and important tasks, analize both and figure out which one will take the longest and do that one first. This sounds easier said than done, because a lof of the time you can't really know how long it will take you to finish a task, since programming can have a lot of unexpected bumps in the road. Plan accordingly and if the task completion time goes into the red, talk to your manager about getting some extend time since it's in everyones best interest to have work done at the end of the day.

Knowing when you can get the most done

For me mornings are the most productive times of the day. I love programming in the morning with a cup of coffee by my side, the earlier the better. That comes at a cost though. I just can't be as productive after lunch as I am in the morning, I feel like crap, no concentration, irritated and want to go home. It's just the way I'm wired, but I have to force myself to do work untill about 4-5pm. Management doesn't care if you can't programm after 2, stuff needs to get done. So know yourself enough to know when to schedule the most important and hard tasks for the day.

Slow down

This is something I'm working on myself, but hear me out. Do everything 25% slower. Why? Well you can do 10% the point is to slow down. Programming and development is a tricky thing and small mistakes because of rushing happen all the time. So slow down, check what that function is doing, do you have all cases handled and test the shit out of it, so you can be certain when push to production happens you didn't make a simple mistake because you were rushing. For me it helps to really think about the problem and solution before diving in and solving it. You can't predict everything that might break your system, but slowing down might cause you to see something you otherwise wouldn't if you were just rushing through.

Thank you for reading!

JavaScript Higher Order Functions

Žane Suhadolnik — Mon, 25 May 2020 05:51:24 +0000

I don't think I ever got any more gittier than the time I figured out ways on how to manipulate, change and construct Arrays and Objects. It was one of the best revelations in my JS learning career and are essential for understanding modern Javascript. So I thought I would explain some of the ones I actually understand and use on a daily basis.

When do you use them? An example of of the top of my head is when an API returns a JSON object in a certain structure that doesn't work with how your component renders data. In this case you would take the returned API data and transform it with let's say map to create a new array that suits your component render.

MAP

I've looked at a lot of other peoples code over the years and the use of map is large. So what is it, except a higher order function? Well map loops over an array and returns a new array is the simplest answer I can give. It takes a callback function as a parameter, which itself takes a parameter (I usually go with the naming of item to reference the current item in the array) referencing the current value of the array and the second parameter being the index at which that value is held.

let arr = [3, 6, 9, 12, 15, 18];

arr.map((item, index)=>{
  console.log(item * 4) //12, 24, 36, 48, 60, 72
  console.log(index) //0, 1, 2, 3, 4, 5
})

The beauty of higher order functions such as map is using them is pure functional programming so you can continue appending other functions at the end of map for instance:

let arr = [3, 6, 9, 12, 15, 18];

arr.map((item, index)=>{
  console.log(item * 4) //12, 24, 36, 48, 60, 72
  console.log(index) //0, 1, 2, 3, 4, 5
}).filter((item)=>{
  if (item < 12){ //filters out all numbers that are lower than 12
    return false;
  } else {
    return true;
  }
});

Or something regarding react state and mapping into a new object to later use in render:

fetch('http://example.com/movies.json')
  .then((response)=>{ //Response is [ {id:1, name:First Name}, {id:2, name:Second Name}, {id:3, name:Third Name} ]
    this.setState({
      fieldsForComponent : response.map((item)=>{
                              return {
                                id : item.id,
                                name : item.name
                              }
                            });
    });
  })

FILTER

We briefly used the filter function in an above example. What is it? It's another higher order function that filters the passed data structure based on the test you provide in the callback function. So you might use it with if..else statements often.

let arr = ['aaa', 'bbbb', 'ccccc'];

arr.filter((item, index)=>{
  if (item.length < 3){
    return true;
  } else {
    return false;
  }
  console.log(index); //0, 1, 2
});

The callback in the filter function takes the parameters of the current item in the array, the index of the item and it can also take the array object on which the filter is being made.

FOREACH

forEach is one of my most used functions when it comes to arrays. At first sight it looks the same as map with the exception that map creates a brand new array which you usually have to assign back to the original array, whereas forEach mutates the existing array, changing it's structure and values.

let arr = [5, 10, 15];

arr.forEach((item)=>{
  console.log(item * 2); //10, 20, 30
});
console.log(arr); //[10, 20, 30]

The same as filter forEach takes as parameters current item in the array, the index of the item and it can also take the array object on which the loop is being made.

OBJECT.KEYS / OBJECT.VALUES

Moving on to Object manipulation for a bit are two very useful ways to get objects to where you want them. Object.keys is useful for when you want to treat your object like it's an array and you don't want to do some complex converting code to make that happen. For instance: you want to use map on a data structure, but your structure is an Object. You simply use Object.keys(yourObject).map() or Object.keys(yourObject).filter(). Why? Because it creates an ARRAY of your keys.

const obj = {
  1 : 'somestring',
  2 : 42,
  3 : false
};

console.log(Object.keys(obj)); //["1", "2", "3"]

Object.values() is the same thing only with the values of the object.

const obj = {
  1 : 'somestring',
  2 : 42,
  3 : false
};

console.log(Object.keys(obj)); //['somestring', 42, false]

And yes both of these return the keys and values in the same order as they are written in the initial object.

OBJECT.ENTRIES

To combine both Object.keys() and Object.values() we have Object.entries(). It again returns an array, but this time with the [key, value] pairs. This method does not return the new array in the same order tho, for that you have to sort the array yourself.

const obj = {
  1 : 'somestring',
  2 : 42,
  3 : false
};

console.log(Object.entries(obj)); //[[1, 2, 3], ['somestring', 42, false]] -> ORDER NOT GUARANTEED

OBJECT.ASSIGN

Object.assign() uses two objects and combines them together. That was a really oversimplified answer since there is a lot more that goes on under the hood, but generally that is the target solution this method is going for. You have a target object, so the object you want to copy into and a source object which is the object that is copied to the target object.

const obj1 = {1: a, 2: b};
const obj2 = {1: c, 2: d};

const returned = Object.assign(obj1, obj2);

console.log(returned); //{1:a, 2:b, 3:c, 4:d}

That's all for now. I will be expanding this post probably in the future or coming back and correcting mistakes since this topic is something I've been extensively learning about for the last year. The goal of the post was to refresh my memory on how these things work and to hopefully explain them in simple terms for people that are struggling to understand them. I highly recommend you also check MDN for more detailed explanations for all of these functions and methods.

Thank you for reading!

FRONTEND DEVELOPER GUIDE - PART 3

Žane Suhadolnik — Mon, 25 May 2020 05:48:18 +0000

Welcome to part 3 of my blog series! :D

ROAD TO GETTING A JOB

Welcome! By now you should have learned a lot of stuff regarding actual programming and have made some personal projects.
Now comes the other side of working as a developer. Most of the time when people think "Programmer" they think we sit
behind computers all day. That's about 90% true, but so do lawyers, doctors, accountants and most people working today.
What we all have in common in the working world is communication.

You can have all the knowledge in the world about computers, but if you can't communicate that knowledge to people who
don't have your level of understanding then you aren't as effective as you might think. In this part we are covering topics
such as soft skills, making yourself known in the employment world, resumes and that dreaded word... interview.

Disclamer: I live in the EU. More specifically Slovenia. We have tech companies large and small here. The market is pretty good
for programmers here. That said I can't speak for people outside of this country, but I will give you some advice where to find
people who know about your market and economy. What I'm trying to say is take the advice in this part and adapt it to your situation.

SOFT SKILLS

What are soft skills?.
Get some soft skills. Seriously. Talking to people as a new developer can be very difficult. You don't really know the terminology
just yet + just the general anxiety of talking to people is crippling a lot of the times. In part 1 I linked an article that
talks about how to properly ask programming questions. Same applies for real life. You are going to be talking to other developers,
business managers and people who aren't neither. Learn how to talk to all. Context switch in your head and communicate clearly.
If you want a fun podcast that is all about soft skills in the software engineering world listen to Soft Skill Engineering.

At the end of the day, soft skills can only be learned if you constantly talk to people. Go to meetups, events and ask developers out for coffee.
The biggest thing you can do is be humble when talking to more senior people. You don't know everything, they don't either, but they have
way more experience than you. Talk, talk, talk. Maybe take a drama class? Improv? Standup? Oh and one more thing about communication: don't be a dick.

HEY, I'M HERE NOTICE ME!

You want people to find you online. In part 1 we talked about you setting up a GitHub account and having your projects hosted there. This is one of
the many entities of your online presence as a developer.

Another very important one still is having a LinkedIn profile. You don't have to be active all the time, just log on every week or so.
What you should do is pimp out your profile with skills, experience and education. LinkedIn serves as an online CV so treat it as such. It also serves
as a recruitment tool. Set your status to actively searching and you should be getting some recruiter email or messages. If you want you can look
at my personal LinkedIn profile and get an idea how stuff should look like.

Some other ideas are an active Twitter accound, StackOverflow page or personal blog.

Why are these important? An active GitHub profile with projects shows you are willing to show your projects to people for criticism, a blog can be
for ideas and tutorials, Twitter could be a shorter version of a blog. Make yourself seen online. Use your real name or some other identifier that
shows that a certain entity is you online. If you don't want to share your info online I completely understand. However companies won't. Just keep that in mind.

RESUMES

Resumes are a tricky thing. Each company looks at them differently. Some want a picture, some want a cover letter etc. I was nervous about this untill I found
this article. I has everything explained that you need for a developer resume so I won't echo what the original author already wrote. Don't take his advice as gospel, just take what you need and what seems fair and logical to yourself.

INTERVIEWS

Another tricky subject since it extremely depends on the company you are interviewing at. From my experience you will usually get an offer for an interview
through email. The first interview is probably going to be focused on general questions about yourself, your knowledge and your experiences. Just be truthful
with what you say, if you don't know something or are unsure, ask for a better explanation or simply just say "I don't know". Nobody is going to be mad or
think less of you if you don't know something.

After the "general" interview, you might be asked to wait so a software enginner can come in the room and maybe ask you some more technical questions. If you
are applying for a junior/entry level position saying you don't know something is again completely fine. This part would also include you solving some simple
problems on a whiteboard or on a PC, but these are reserved for maybe the second round of interviews.

The "general" interview is over now. Probably the same day or the next day you will get another email with a task to solve at home (again this is just from
my experiences). This problem doesn't have to be perfect, nothing is. You are applying for junior role so if you don't know how to use an API key from Google
Maps just yet, explain to them that you didn't know how to do that, but you tried your best to still make something. Aim for about 70% completion on the project,
write notes where you had trouble and how you approached the challenge.

You will most likely be called back to talk about the challenge etc. They might email you back saying "We would like to offer you a position" or "Sorry no can do".
If it's the later, that's ok, apply to another company and repeat the process untill you get a job. You will have experiences talking to managers and will eventually
lang something that makes you happy.

Additional resources

Need more practice for interviews? You should read this book and watch this video. They will explain things with much more experience and thought than I ever could.

Thank you for reading!

FRONTEND DEVELOPER GUIDE - PART 2

Žane Suhadolnik — Mon, 25 May 2020 05:47:21 +0000

Welcome to part 2 of my blog series!

PROJECTS TO BUILD

This part is going to focus on just some recommendations about building front-end web dev projects. They are going
to scale as the list goes down.

Make your own site using just HTML/CSS. No frameworks and no JavaScript. Write the code yourself.
Clone one template from here using just HTML/CSS.
Create a "Simon says", "Towers of Hanoi" or "Tick Tack Toe" game (HTML/CSS/JS).
Clone this.
Do CSS Zen Garden.
Sign up for freeCodeCamp. Do just the front-end projects, skip the tutorials.
Recreate your website using Vue, React and Angular.
Clone this dashboard using a framework of your choice.
Write your own CSS grid system.
Clone Reddit.
Clone Twitter.
Clone Facebook.
Clone the Netflix landing page.
Clone Spotify.

Some more resources that list projects:

FRONTEND DEVELOPER GUIDE - PART 1

Žane Suhadolnik — Mon, 25 May 2020 05:45:25 +0000

Welcome to the first official blog series that I'm doing to practice writing guides/tutorials.

Who this guide is for: complete beginners and practicing developers.
Who this guide is NOT for: intermidiate or advanced devs.

This is my "Baby steps to getting going doing front-end web development for beginners by a beginner". I'm not some
tech-speaker guy who made insane OSS projects or an advocate for a large tech firm. I'm a junior dev who a few months
ago got his first ever job and I want to share some tips on how I got there, so that maybe you can get your feet off
the ground and make some stuff.

This series will have 3 parts: Part 1: Resources to learn, Part 2: Making and hosting projects and
Part 3: Advice for job searching

WELCOME TO PART 1!

The core things that you need for a front-end developer focused productivity are the holy trifecta of web dev: HTML, CSS
and JS. I won't go into too much detail about each language and technology. That's what the resources are for. But in my
own words:

HTML is the skeleton and the whole reason why you can put things up on the screen in your browser. It serves as the architecture and structure of your site or the content if you will.
CSS is the styling component. Colors, fonts, positioning, size or things, animations etc. CSS does all of that and so much more.
JS is the interactivity component. This is the main thing you need to learn, the swiss army knife of web dev. If you can learn JS you can learn anything. It is the programming language of the web.

There are also things that aren't really programming or development specific, but are necessary to be productive in todays
web dev world:

Chrome Dev Tools is an essential tool for debugging, testing, checking and maintaining code. There will be resources to learn this but you can only learn from articles and videos so much. Best way to really learn dev tools is to work on projects.
Git/Github version control is also essential. I highly recommend this video by Traversy Media explaining how to make a repo, add code, do commit messages and push to master. Do this first before you do any projects or learning.
Markdown this isn't a necessity but it's a useful tool to write README files on GitHub and maybe blogs like this one.
VSCode you need an editor to write your code in. I recommend Visual Studio Code. If you need some help figuring out how they work this video will help.
Terminal/Console/CLI knowing how to operate a console is essential. Almost everything you are going to be programming will involve some use of a terminal. Use this video and this guide to learn.

Right. So are you aren't overwhelmed already are you? If you are it's ok. I was overwhelmed and so was everyone else that had
to learn this stuff. Don't worry about learning everything all at once, learn just the things you NEED. For everything else,
Google is your best friend.

I also highly recommend this
guide on how to ask programming questions. And yes it's essential because you are going to be doing two things a lot:

Asking questions
Searching for answers

Learning how to do these is the most important skill you can learn right now. Ok enough fluff, let's get to the resources.

HTML/CSS

These two are usually coupled together purely because you can't write CSS without HTML.

Shay Howe has two amazing tutorials for HTML and CSS both for advanced and beginner topics. It is my go to recommendation
for people learning these two. You can find the guide HERE. Do all the exercises, look at
the additional resources he provides, write code in your editor and push code to your repository. Don't use some online
editor, code on your own machine and save code to GitHub/GitLab. For references about HTML and CSS use MDN.
After you finish the Shay Howe guides I recommend you do two things: make your own website and do 100 days of CSS. To make
your own site you just need HTML and CSS. Make it ugly and messy, but finish it. Make it small. Use only things that are
necessary for showing who you are and what you do (introduction, what languages you know, experience and contact are good sections
to focus on). 100 Days Of CSS isn't recommended to do all the projects, just enough that you get good at CSS.
Do one project everytime you are bored or have an hour to kill.
Learn Bootstrap. This could easily be Foundation, Bulma, Semantic UI or no framework at all.
But Bootstrap is widely used to create websites faster. Redesign your personal site with Bootstrap. If you get stuck use the
official documentation or Google around. Teach yourself to know what you don't know.
At this point you can start learning JS, but if you still need practice you can clone the design of one of your favourite sites,
explore the different CSS frameworks mentioned above, learn more about SASS or LESS and maybe even Pug or HAML. The choice is
all yours, what matters is that you get to build something. You will not learn all of HTML and CSS by following guides, you learn
just enough so that you can use it somewhere. Don't go and learn the entire Bootstrap framework. Just use the assets and code
that you need for your project.
You might also be thinking: "Where can I host my sites?". I recommend one of the three options: surge.sh,
GitHub Pages or for more ambitions stuff Heroku. All of these are free
to use to a certain limit of data or size.

JavaScript

This part will be massive just a notice. The JS ecosystem is insanely large, but don't let that turn you away from learning it.
It used to piss me off just as much as you, but overtime you get to understand it and can write functioning applications and sites.

First off there isn't one amazing resource to learn JS. There are tons out there, some better than others. I will try and list
the ones that have actually helped me learn how to add JS to websites and how to use it the "modern way".
I would recommend starting with the Khan Academy videos
on DOM (Document Object Model) manipulation. You can also take the complete HTML/CSS/JS course there if you like. You might learn
something you haven't in the previous guides.
Next I recommend you maybe try and add some of what you have learned to your personal website. Maybe just a button that says "Hi!"
when you click it. After that I want to point you to javascript.info and
MDN's Javascript Documentation. Follow the javascript.info guide, learn as
much as you can from it, what you still don't understand you can lookup using MDN.
At this point I have to recommend that just doing programming exercises and doing guides won't be enough to learn JS. I strongly
recommend you start reading blogs, listen to podcasts, follow subreddits and watch videos on anything JS related. You need to learn
the terminology, design and architecture of writing JS and the guide alone won't teach you this. Consume a lot of programming media
related to JS.
After this you can head on to Wes Bos's JS30. You will need to understand ES6 by this point since
Wes is a heavy user of it. This is by far one of the best resources to really learn JS. You do 30 small projects in 30 days, or even watch them at your own
pace.
Next I want to recommend some sites similar to 100DaysOfCSS, where you can have on-going practice for JS. If you ever need more
practice hit up HackerRank, CodinGame or CodeWars.
Here you are ready to branch out and learn either React, Angular or Vue. They combine everything you have learned up untill this point. Pick one,
make something small with it, find out which one is best for you and which one makes you more productive. If you want to dive deep into more front-end
and back-end stuff I recommend Programming For The Web With JS.
If you want more Computer Science specific stuff do CS50 or
tackle some of the stuff in Teaching yourself CS.

That's kind of it! Those are my recommendations for what to learn. There are loads of things I probably forgot, but you are going to learn most
of them anyway when you go through all the resources :D

Hope you learn something and I will see you in Part 2!

What are constructor functions?

Žane Suhadolnik — Mon, 25 May 2020 05:43:39 +0000

Constructor functions have, at least to me, one of the coolest names in programming. The first time I had to explain to someone what constructor functions are, I got all gitty because I just got to use the word constructor.

Enough of the bullshit. This post will focus on how constructor functions are use in JavaScript
and React. To use my own reasoning for what they are: Constructor functions are functions that are called only once usually at the start of a script or in React terms when a component is loaded, we use a constructor functions to set the state of that component, usually using props which have been passed to that functions.

Constructors are functions, but have a few different properties to regular functions:

They are executed with the new keyword.
They start with a capital letter.

What does the new keyword do? Well when used it creates an object and binds it to this, the body of the new functions is ran, which also changes the this with new values, properties...

function Animal(species) {
  // this = {};

  // add properties to this
  this.species = species;
  this.size    = 'big';
  this.legs    = 4;

  // return this;
}

let animal = new Animal('Dog');

In short they are used to create AND initialize an object within a class while most other functions are created and then need to be called with certain parameters.

CONSTRUCTORS IN REACT

Because I haven't personally so far used constructors in any other framework other than React I would like to also explain my own reasoning for how React uses them. React used to have a function called getInitialState which I happen to still use daily on my job. This function was replaced by just a regular constructor for setting a component's state.

//Old way
getInitialState(){
  return {
    name    : this.props.name,    //this.state.name
    surname : this.props.surname, //this.state.surname
    age     : this.props.age      //this.state.age
  }
}

//Current way
constructor(props){
  super(props)
  this.state = {
    name    : this.props.name,    //this.state.name
    surname : this.props.surname, //this.state.surname
    age     : this.props.age      //this.state.age
  }
  //Any other variable you want to define for when state loads
}

You will most likely find the second way more often now, unless you are reading some legacy React code, but essentially both ways are the same with slight differences, like you having to use super(props) to refer to that component's parent class constructor. Or in more simple terms you are refering to the parent of that component, which also has a constructor.

Thank you for reading!

How to prevent react-carousel from adapting to image size?

Žane Suhadolnik — Sun, 03 Nov 2019 10:08:40 +0000

Demo of site: https://jozesuhadolnik.netlify.com/portreti

At the above page I'm using react-carousel to display images and give the user the ability to cycle through them. Every time there is a transition to the next image the entire container responds to the size of the image which causes this weird flickering. How can I force the container to be of a fixed size? I've tried changing every container style to no effect.

Site is made with GatsbyJS. Below are the files which are used for the Project page.

project.js

import React from 'react'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
import styled from 'styled-components'

import { Layout, ProjectHeader, ProjectPagination, SEO, Gallery, SideBar } from '../components'
import config from '../../config/site'

const BG = styled.div`
  background-color: ${props => props.theme.colors.bg};
  position: relative;
`

const OuterWrapper = styled.div`
  padding: 0 ${props => props.theme.contentPadding};
  margin: -10rem auto 0 auto;
`

const InnerWrapper = styled.div`
  position: relative;
  max-width: ${props => `${props.theme.maxWidths.project}px`};
  margin: 0 auto;
`

const Project = ({ pageContext: { slug, prev, next }, data: { project: postNode, images } }) => {
  const project = postNode.frontmatter

  return (
    <Layout customSEO id="outer-container">
      <SideBar right outerContainerId="outer-container" />
      <SEO postPath={slug} postNode={postNode} postSEO />
      <ProjectHeader
        name={config.name}
        date={project.date}
        title={project.title}
        areas={project.areas}
        text={postNode.body}
      />
      <BG>
        <OuterWrapper>
          <InnerWrapper>
            <Gallery images={images.nodes} text={postNode.body} />
          </InnerWrapper>
          <ProjectPagination next={next} prev={prev} />
        </OuterWrapper>
      </BG>
    </Layout>
  )
}

export default Project

Project.propTypes = {
  pageContext: PropTypes.shape({
    slug: PropTypes.string.isRequired,
    next: PropTypes.object,
    prev: PropTypes.object,
  }),
  data: PropTypes.shape({
    project: PropTypes.object.isRequired,
    images: PropTypes.object.isRequired,
    allMdx: PropTypes.shape({
      nodes: PropTypes.array.isRequired,
    }),
  }).isRequired,
}

Project.defaultProps = {
  pageContext: PropTypes.shape({
    next: null,
    prev: null,
  }),
}

export const pageQuery = graphql`
  query($slug: String!, $absolutePathRegex: String!) {
    images: allFile(
      filter: {
        absolutePath: { regex: $absolutePathRegex }
        extension: { regex: "/(jpg)|(png)|(tif)|(tiff)|(webp)|(jpeg)/" }
      }
      sort: { fields: name, order: ASC }
    ) {
      nodes {
        name
        childImageSharp {
          fluid(maxWidth: 1600, quality: 90) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
    allMdx {
      nodes {
        fields {
          slug
        }
      }
    }
    project: mdx(fields: { slug: { eq: $slug } }) {
      body
      excerpt
      parent {
        ... on File {
          mtime
          birthtime
        }
      }
      frontmatter {
        cover {
          childImageSharp {
            resize(width: 800) {
              src
            }
          }
        }
        date(formatString: "DD.MM.YYYY")
        title
        areas
      }
    }
  }
`

Gallery.js carousel component:

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { MDXRenderer } from 'gatsby-plugin-mdx'

import 'react-image-gallery/styles/css/image-gallery.css'
import ImageGallery from 'react-image-gallery'

const GalleryWrapper = styled.div`
  .image-gallery {
    max-width: 700px;
    max-height: 650px;
    margin: 3rem auto;
  }
  .image-gallery-image {
    text-align: center;
    background: #383838;
  }
`

const Text = styled.div`
  max-width: 450px;
  margin: 1rem auto;
  padding-top: 1rem;
  color: white;
`

const Gallery = ({ images, text }) => {
  const items = images.map(item => {
    return {
      original: item.childImageSharp.fluid.src,
      thumbnail: item.childImageSharp.fluid.src,
    }
  })
  return (
    <GalleryWrapper>
      {text && (
        <Text>
          <MDXRenderer>{text}</MDXRenderer>
        </Text>
      )}
      <ImageGallery items={items} />
    </GalleryWrapper>
  )
}

export default Gallery

Gallery.propTypes = {
  images: PropTypes.array.isRequired,
  text: PropTypes.string.isRequired,
}

How to use Emmet with React/JSX?

Žane Suhadolnik — Wed, 29 Aug 2018 06:13:46 +0000

Hi, hello, dober dan!

This isn't a tutorial sadly, more of a request for knowledge :D

Been learning React recently. As probably many of you I also use Emmet when it comes to writing HTML code more quickly. I wanted to use Emmet for JSX and found myself confused as to why it doesn't work consistently?

First thing I did was change the "Workplace settings" in VSCode as how this issue instructed: https://github.com/Microsoft/vscode/issues/41998

That worked, BUT when I created a new .js file in my src folder for example and tried writing React/JSX code in it, Emmet didn't work. The only solution I could figure out was to manually change the file type to javascriptreact every time I create a new file.

Does anyone have a link to a solution? Thanks :D

Just got my first job offer, going to take it. What are some tips for being the best junior developer I can be?

Žane Suhadolnik — Thu, 23 Aug 2018 05:35:33 +0000

Yesterday I got my very first developer job offer. Will be working with React, Node and MariaDB primarily.

What are some tips the more senior of you have for a junior starting his first job? :D

Edit: I really appriciate all the advice you guys are giving me, thank you so much!

I quit my job as a SysAdmin to focus on Web Development, Ask Me Anything!

Žane Suhadolnik — Mon, 04 Jun 2018 07:59:53 +0000

Little bit about me:

I'm turning 23 at the end of June.
A few months away from graduating with (I guess you could call it) IT degree focusing on computer science and programming.
Got burned out on my job as a SysAdmin and decided to quit while I still have the ability to.
I'm focusing on front-end currently (specifically Vue), but really wanna go full-stack in the future.
Amateur at programming, but I am learning every single day and reflecting what I can do better all the time.

AMA!