DEV Community: Eldar Dautović

My second fullstack project 🤩️

Eldar Dautović — Mon, 18 May 2020 21:18:23 +0000

Hello everyone! 🤗️

Today I would like to present to you my second little full-stack project. In theory, it is just a site that lets you see my latest projects and cool resources to browse from!

What's the technology? 🤔️

I used Vue.js for the Front End and Node.js in combination with Express.js and MongoDB for the Back End, also I would like to note that I used NProgress for some final touches.

What is my goal? 🏅️

The goal from this website is to establish all of my projects in a proficient way and with no hassle and also to deliver the latest cool resources to people who are in need of them.

You can check the project here.

How to use your free time? ⏰

Eldar Dautović — Sat, 16 May 2020 16:30:08 +0000

Hello everyone!🤗

Today I will try to give you some fun projects to work on in your free time. I personally think that these little projects will definitely help you improve your knowledge.

What is the purpose of these projects?🤔

The purpose of these projects is to face new problems and troubles that you will be able to face throughout your dev career.

RESTful API👩‍💻

Why RESTful API? For me personally, building API's helped me get to know the backend aspect and what it actually takes for your data to get to your fetch request. You can have a lot of fun building these. I recommend making simple CRUD API's for example Jokes API that you can call to get some jokes and you can also put in a cool random get request that gives a random joke to the user that is fetching. I made one of my own using Vue.js for frontend, node.js combined with Express.js and MongoDB. You can check it out: Random Programmer Puns.

Blog📃

Building blogs is time-consuming but the end result will always make you happy and proud of your result. Building a blog will take you to combine the RESTful API I mentioned above and a frontend which will be your glue. I suggest using Vue.js or React.js for creating the frontend but you can also use other frameworks or no framework at all! You can also make your blog use markdown just as Dev.to does! This is a really cool project to use especially to add to your portfolio or your CV. It will combine all of your skills!

Complicated website layouts🖼

Creating complicated website layouts is tedious but in the end, it will make you ready for real-life projects that you will face. You can take inspiration from dribble designers, design it yourself, or take part in an HTML & CSS challenge. You can also brush up on your SCSS knowledge by combining a lot of mixins to save your time.

The end!👋

This is all that I've prepared so far. I hope that you liked the idea behind this post. I love talking about code and being connected to people that like talking about it too!

How to improve your workflow? 🐱‍🏍

Eldar Dautović — Fri, 15 May 2020 23:11:26 +0000

Hello everyone! 🤗

I had a little break with Dev.to blogging. I just felt like I needed to take one just for my sake with school and everything. Today I prepared a post that I think will help you a lot with improving your workflow. In the next part you will be able to find some tips and tricks in which I tried to explain my view on workflow improvements.

🤯 Sketching out your problem

A lot of people just go out and start programming without taking some time to define their problem. Defining a problem and taking some time to sketch it out will spark up your problem-solving mechanism which everyone has but just has to use it in the right way. I suggest taking a pen and paper to manually write out your ideas. I personally get a lot more creative when I'm with my pen and paper, rather than on my PC or laptop.

🧐 Keeping track of progress

Keeping track of your progress while coding something will most definitely improve your workflow. I learned this while I was getting into some more intense projects in which I simply had to keep track of my progress so I simply don't forget something. There is a lot of platforms that help you a lot, but I personally use Trello which saved me a lot when I was working alongside my designer. You can create a board and add a lot of lists like to-do, completed, tested. Also using Trello improves your SCRUM abilities when it comes to adapting to that sort of mechanism.

🐱‍💻 Writing reusable code

Writing reusable code is really important when dealing with complex projects. You must learn how to evaluate when you need to create functions that you will use multiple times in your project. In return that function will save you a lot of time that you would have spent on searching that same piece of code all over again. One more thing that you should note that really improves my speed and lowers my stress is simply writing really clean and cool looking code.

🤖 Using every resource available

You should think about researching resources that you might find useful in your stack and use it. Using extensions is also one of the most important things I would state here. I highly suggest using Emmet Code Snippets. They help you learn syntax easier and simply cut down your writing time and plus it makes you feel like a boss.

👋 End statement

This would be the end of this post. I hope you enjoyed reading this and I hope that I helped someone with things they didn't know or just needed to expand their knowledge. I will try to continue making interesting content which goal will be to help you out in an entertaining way.

How to optimize a picture with no quality loss? 🤔

Eldar Dautović — Mon, 27 Apr 2020 09:38:19 +0000

Why do we optimize a picture? ❓

We optimize pictures in order to have better performance and smaller loading times when accessing the website.

How do we optimize a picture without loosing any of its quality? 🤯

There is a lot of picture compressors these days but the best I have used so far is TinyPNG. It helped me a lot when dealing with big hero section pictures. It shrinks down an image enormously and with that it helps you load images faster then you did before!

My portfolio 📜

Eldar Dautović — Sun, 26 Apr 2020 13:37:36 +0000

Hello 🤗

Hello everyone! This is my current portfolio I use and I made it a while back. It's fully made in HTML, CSS and a bit of javaScript for the form purposes.

What is the purpose of this post? 🤨

The purpose of this post is to get some feedback and to inspire some beginner front-end developers! I would appreciate if I would get some creative feedback on how it's currently looking! 🎉

Portfolio: https://salesmanunknown.github.io/

Vue routing

Eldar Dautović — Sun, 26 Apr 2020 11:17:58 +0000

Hello everyone!

Today I'll be helping you out getting into Vue.JS routing. It's really easy and I think that you will get into it very easy. This is my first post, I hope you will like it.

What is routing? ✈

Routing or router in web development is a mechanism where HTTP requests are routed to the code that handles them. To put simply, in the Router you determine what should happen when a user visits a certain page.

What we can use routing for? 🤔

Routing is mostly used to make website routes when visiting (e.g localhost:8080/home). This gives us a lot of functionality to work with. We can restrict people from visiting a page on our site if he e.g isn't logged in to access. Another good usage is when user tries to access a nonexistent website page we can redirect him to a certain page section (e.g '/not-found').

How to integrate Vue router? 😯

It's really easy to integrate Vue router into your project when starting it up. We will be creating our project in the Vue CLI which is really neat for creating new projects as it does everything for you.

After typing this portion we will manually select next features:

After that you can also add history mode for the router and let the app install.
Your App.vue file should look like this:

So 'router-link' is similar to our 'a' tag which we normally use to send someone to our designated link. The difference between those two is that 'router-link' sends you to the route you want to go and with that it renders the components of that route. The #id will always stay the same which means that it won't have to re-render to every component in order for it to work. It will stay as it should.

The next thing is the 'router-view' and to put it simply it just renders the components of each route you are currently visiting.

There is two ways you can create routes, I will show them in the next section.

The first object is an example of classic route you can integrate very easily as you see you just need to import the view you want to render on the route and set the object as you see on the picture.

The second object shows you how to lazy load a route. It is basically the same except of the last component argument. The difference is that this component is going to be lazy loaded. What is lazy loading a route and is it better?
Lazy loading a route is basically loading or downloading the route component upon it's rendering so we don't need to download every component we use. This is done because we can't predict if the client is going to visit that page and for the performance sake it is better to lazy load routes or in bundles.

This is basically the end of my first post I hope you like it and enjoy it! 📃