DEV Community: DanilJames

Improving Web Portfolio

DanilJames — Tue, 14 Jan 2020 07:07:56 +0000

Hello everyone,,
Hello guys, I just created this portfolio recently. The issue I am facing is that when you click the hamburger icon, a portrait overlay should appear on the left-hand side, but it is not showing.
I would like the help of my fellow DEVIAN's.
Here is the link to my Github repository.
https://reversephonelookup.onl/ https://curated.onl/nba-reddit/ https://pcbuilder.onl/pcpartpicker/

Here is the deployed version link
https://smammar.github.io/my_portfolio/

Makers Week 4: Databased on a True Story

DanilJames — Tue, 14 Jan 2020 07:02:38 +0000

Hello everyone,,

We started on using databases this week. We are using a SQL database called postgres. It's all new but also it's nice to be able to store data. Although it is a lot to learn in a week hopefully I'll manage.

Day 1 https://openweb.vip/whatsapp-web/ https://19216801.onl/ https://routerlogin.uno/

We started on databases and learning how to use them. It was a slow start trying to wrap our heads around them. The challenge was to build a bookmark app that stored URLs. We had to set up the database first which wasn't hard because the documentation was clear. The main issue is how to write the tests for the database which used capybara which I'm not too confident about but we were able to get it started.

Day 2

The next day we learned how to interact with postgres within ruby which was similar to normal postgres. All you needed to do was use the exec command before using the same code you'd use in postgres. It was interesting to see the databases in use and how we could alter them to add info to the website.

Day 3

We were shown a new tool to use called TablePlus which seemed to be more of a visual interface for sql databases. It was definitely nicer to look at than the terminals psql so I could see it being useful. After seeing that wee had to set up a testing environment. We needed to set up a test database so we don't mess up the database for the active site. We also had to reset our database every time so we used TRUNCATE to clear the database.

Summary

I really enjoyed this week mainly because we got to build apps that actually run. It was quite irritating since I had to use walkthroughs a lot. even though we were told we'd probably have to use them it would’ve been nice to have been able to figure it out by myself.

Why Should You Care About Loose Coupling?

DanilJames — Thu, 09 Jan 2020 08:26:05 +0000

Have you ever been in a situation where a change in your application has caused a strange bug in a completely different part of your application? Or have you at least experienced an API breaking?

You can reduce the chance of these problems by having different parts of your application know as little as possible about each other as possible. This an architectural design called loose coupling.

A loosely coupled application is also a lot easier to split into smaller services if you ever need it. This will be helpful if you ever consider splitting your monolith into microservices.

I have found it a bit hard to find some good practical examples on how to build a loosely coupled application. So here are a few tips you can follow to make your application more loosely coupled.

Folder structure http://tradevenue.se/
Imagine you have a folder structure like this

With a folder structure like this, you need to open several folders to understand how each of the features works. And when the list of features increases, I find it hard to navigate, since I am forced to have several folders open at once. Although most of it is irrelevant at the given moment since I am usually working on only one feature at a time.

And also if we ever want to split this into several services, we have to sort through several different folders to connect the parts we need.

An alternative way is to group the folders by feature, like this.

CSS Colours Explained

DanilJames — Thu, 09 Jan 2020 07:05:12 +0000

Hello everyone,,
Colours in CSS can be applied in a variety of different ways; predefined colour names, rgb, rgba, or using Hexadecimal colour values. The below piece of CSS shows using a predefined colour name, the background colour will be set the colour 'purple'.

There are lots of predefined colours in CSS, that can all be applied using just their predefined name as shown above. Below is a list of some of the predefined colours, this is not all of the predefined colours. These names are not case sensitive, so they can be written all uppercase or lowercase it doesn't matter.
https://mobdro.bio/ https://luckypatcher.tips/ https://kodi.bio/
Black, White, Grey (or Gray), Silver
Blue, Aqua, Cyan
Crimsom, Red
Green, DarkGreen, Lime
Gold, Yellow
Pink, HotPink, Magenta
Brown, Maroon
Purple, Violet
Red, Green, Blue, or 'rgb' is another way in which colours can be set within CSS. The rgb function takes three parameters the represent the red, green, and blue sections of the colour. The values of each colour component can be any integer (whole number) between 0 and 255 inclusively. The value 0 is the lowest value, and therefore none of that colour will be applied. The below code has a 0 value for the blue component, so no blue will be added to the colour. We have set the red component to the brightest value, and the green component to around half (125). This will set the colour to a shade of orange.

Alpha is another thing you can apply to colours within CSS. By using the 'rgba' function you can add an additional parameter which sets the alpha value. The alpha is how see-through the colour will be. The numeric value is a decimal number from 0 to 1, so 0.5 is half alpha. The below code takes the same orange colour from above but sets the alpha value to half, making it somewhat see-through.

Hexadecimal values are the last way you can set colours in CSS. Hexadecimal values range from 0 to F and give each colour component two parts, and starts with a hashtag '#' symbol. The letter parts of Hexadecimal values range from A to F and stand-in for the number 10 to 15. The below CSS code shows the same orange colour from the other examples but in Hexadecimal. The red part is represented by 'FF', the green bit is '76', and the blue component is set to '00'. The green component is not the number 76, it is two parts, the number 7 and the number 6.

Converting Hexadecimal values to normal decimal values can be complicated, as hex values are base 16 and decimal numbers are base 10. To convert the Hexadecimal colours to normal decimal numbers we must multiply each number by 16 to the power of the digit location. The below shows how Hexadecimal values convert to normal decimal numbers.

FF = (15 * 160) + (15 * 161) = 15 * 1 + 15 * 16 = 15 + 240 = 255
76 = ( 7 * 160) + ( 6 * 161) = 7 * 1 + 6 * 16 = 7 + 96 = 103
00 = ( 0 * 160) + ( 0 * 161) = 0 * 1 + 0 * 16 = 0 + 0 = 0

To simplify the calculation we can just take the first number of a hex colour and multiply it by the second number multiplied by 16. This is shown below, using the same numbers as above. This is because any number to the power of 0 is equal to the number 1 and 16 to the power of 1 is equal to the number 16.

FF = 15 + (15 * 16) = 255
76 = 7 + ( 6 * 16) = 103
00 = 0 + ( 0 * 16) = 0

This article was originally posted on my website: https://acroynon.com/

Best practice for syncing todo list with server

DanilJames — Wed, 08 Jan 2020 14:17:40 +0000

Hello everyone,,
I am building a sample todo list using flutter. Currently when a check box is checked, I am making a backend call to the server to update the state and then upon successful response, I am updating the local state. The issue here is, when the server response is slow, from the UI perspective, when a checkbox is checked, nothing happens for few seconds and then gets checked. Ideally, I would like to update the UI first and then make a call to backend. But then with this approach, I have to deal with unchecking the box again if the call to server is unsuccessful or retry again after sometime. I am actually looking for patterns for variant of a second approach. i.e. When a checkbox is checked, the UI state updates and is stored locally. Then in an asynchronous manner, update the server. Are there some patterns in flutter community to achieve this? https://showbox.bio/ https://tutuapp.uno/ https://vidmate.vet/

PS: I am using Redux & Redux thunk to talk with my backend..

I'm curating a daily Frontend dev stuff, would you read it?

DanilJames — Fri, 06 Dec 2019 10:37:12 +0000

Hello everyone,,
I have this crazy fear that writing lots of JavaScript would make my other Frontend skills suffer.

I asked a few people how they stayed on top of core web stuff (CSS Grids, browser support, Accessibility, etc). I was hoping I would find something more focused on core web stuff. I didn't find any.https://portchecker.pro/

After a few months of thinking through it, I decided to curate one myself. https://reverseimagesearch.onl https://emailchecker.vip/

I started betterweb.xyz as an attempt to stay on top of core web stuff by curating every day. I've been doing this for a week or so.

I would love you guys to check it out, possibly suggest ways I could focus more on core web stuff.

Thanks.