DEV Community: Sakis bal

A Game-Changer for SEO: Harnessing the Power of Google Rich Content results

Sakis bal — Sun, 25 Jun 2023 17:53:51 +0000

SEO is pretty important these days and the more tools we utilize to gain more visibility the better. That is why we are going to look at Google Rich Content today and how to implement it on our websites.

What is Google Rich contents results?

In simple terms Google is basically a crawling machine that reads URLs and its contents and tries to understand how to query this content so its visible for everyone on the web.

To help google understand our content better and show it to the end user in a more presentable way we can provide google with structured markup data that describes certain features of our website. This structured data is then used by google to create Rich content results

Google rich results articles

Research has show that using Google Rich Content has increased the CTR of many big companies. According to Google one of those is Nestlé.

Nestlé has measured pages that show as rich results in search have an 82% higher click through rate than non-rich result pages.

Case studies of websites that have implemented structured data for their site

Types of supported rich content

Google supports a variety of markup data that generates rich content results. Some of my favourite are

Article 📚
Event 🎫
FAQ 🤔
Local Business 👨‍💼
Logo 🏢
Product 📦
Q&A ❓
Recipe 👩‍🍳
Video 🎥

Implementing Google Rich Content

To implement rich content we will need to use the Schema org data structure for our markup and add it inside our HTML. Let's look at an example of implementing the JSON LD data type.

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Title of a News Article",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "https://example.com/profile/janedoe123"
      }]
    }
    </script>

The above example is from the schema type of NewsArticle. You can search for the data type in Schema org to see all the available fields.

However you MUST include the required minimum fields from the Google documentation otherwise Google won't able to extract the necessary information to validate the data.

Some more important points to note is that the content that is described by the JSON should be visible to users on the website they are visiting.

For example if you are going to create a JSON that references an article it should be visible to users in your frontend.

How do i check if my website has rich content results?

Alright, you have created your neat JSON objects and you are ready to showcase your articles, videos and more on your search results. But how do you know if you implemented the JSON correctly and that google is actually aware of it?

Don't sweat because Google has created a neat little tool for us to test if our website supports rich contents and to warn us if we have a mistake on our JSON.

Closing thoughts

Think about ways you might add content as rich results in google. Maybe add Q&A content on your page or some videos that showcase your product.

Google rich contents are a great way to showcase your website in a more robust and colorful way. Take up more space on the search results and get your CTR up!

Important links:

👨🏻‍💻Securing Your Web Applications from SQL Injection with SQLMap

Sakis bal — Sat, 10 Jun 2023 11:46:02 +0000

Cover image by Pete Linforth

What is SQL injection
1. A practical example of SQL injection
SQLMap: Automated SQLi testing
1. Routes protected by authorization
2. Slowing down queries
3. Enumerating the database
Protecting against SQLi
1. Prepared query
2. Sanitize and escape user input
Legally test SQLMap on intentionally injectable websites

What is SQL injection

SQL injection is a way for attackers to change the queries that interact with the database and "inject" their own queries. A typical example is a query that has been composed from concatenation which includes user inputed variables.

$q = "SELECT * FROM users WHERE id = " . $_GET['id'];

The above query can be "injected" through the $_GET["id"] parameter.

SQL injection is still one of the most common ways to penetrate a website. A study from 2019 shows that 29% of websites are still susceptible to sql injection attacks

Credit: Web Application vulnerabilities and threats : statistics for 2019

A practical example of SQL injection

The above SQL code might run by doing a GET reques to

https://example.com/article?id=1

So it expects id to be 1. Which would result in the SQL query to be:

$q = "SELECT * FROM users WHERE id = 1";

However, if we think smart about it we know that we can extend the query to return more results.

If instead of 1 we would write something like 1 or 1 = 1 the query would extend and we would be able to get all user information from the database. The request would look like that:

https://example.com/article?id=1 or 1=1

and the query:

$q = "SELECT * FROM users WHERE id = 1 or 1=1";

SQLMap: Automated SQLi testing

There are many types of SQLinjection and it would take an awful amount of time to check for all types of SQLi against a target. This is why SQLMap was created. It automates the process of testing.

To download SQLMap if you are on Linux distribution you can type.

sudo apt install sqlmap

For Windows you can download the github version

git clone --depth 1 https://github.com/sqlmapproject/sqlmap.git sqlmap-dev

Keep in mind that you need to have python downloaded in your machine as well to run sqlmap.

SQLMap comes with a plethora of parameters and flags that we will explore in this article.

To start we will see a simple attack to a certain endpoint. We need to use the -u parameter to set the endpoint.

sqlmap -u "https://example.com/articles?id=1"

This will test a single endpoint for sql injection. However we still need to press "Y" on everything. This is sometimes useful but most times it is better to just go with the default behavior to speed up the process so you can add the --batch parameter.

sqlmap -u "https://example.com/articles?id=1" --batch

This speeds up the process a bit. However you still need to manually test every single endpoint and most websites have more than just 5 or 10 endpoints to test. So we would need a tool that let's us crawl through the links of the website and perform sql injection when it sees parameters sent to the backend.

Luckily SQLMap has a --crawl= parameter which does exactly that. Depending on the value it will crawl down as many directories from the root of the website.

sqlmap -u "https://example.com/articles?id=1" --batch --crawl=2

SQLmap starts living up to its name as we are actually truly automating the process. However we are not done yet. We can speed the process up a bit more by adding the --smart flag. This flag performs SQLi only if it finds positive heuristics. By adding --smart most endpoints will not be tested at all for SQLi which will speed to the process tremendously.

We can also add more threads so that more requests are executed if we are confident that the server can handle it by using the --threads= flag.

sqlmap -u "https://example.com/articles?id=1" --batch --crawl=2 --smart --threads=10

Routes protected by authorization

Most web applications have routes that are protected by authorizations. This means that they can only be accessed if we have logged in for example.

In typical PHP applications you can continue the session by sending a PHPSESSID cookie to the server.

In order to test the routes that are access after the log in has occurred we would need to add a --cookie="PHPSESSID=" flag. The PHPSESSID can be found in Chrome under application > Cookies.

sqlmap -u "https://example.com/articles?id=1" --batch --crawl=2 --smart --threads=10 --cookies="PHPSESSID=<String>"

Slowing down requests

If you are testing on a live website and you don't want to disrupt it you can use the --delay= flag which will delay each HTTP request by the value.

Enumerating the database

In this phase, after an SQLi has been found you can start enumerating the database to start seeing the users, databases, tables and column tables.

Keep in mind that the speed in which he exploitation will take place depends a lot on the type of SQLi that has been found.

In-band SQLi

In-band SQL Injection occurs when an attacker is able to use the same communication channel to both launch the attack and gather results. (https://www.acunetix.com/websitesecurity/sql-injection2/)

This type of attack is very fast in comparison to

Inferential SQLi (Blind SQLi)

an attacker is able to reconstruct the database structure by sending payloads, observing the web application’s response and the resulting behavior of the database server. (https://www.acunetix.com/websitesecurity/sql-injection2/)

With Blind SQLi you should focus more on extracting key databases and tables instead of trying to dump the whole database which will be impossible on most cases.

To start enumerating you can use the --dbs flag. This will show all the databases that are available. After choosing a database with the -D flag you would search in the same way for the tables with --tables and then choose a table using -T flag.

sqlmap -u "https://example.com/<EXPLOITED URL> -D myapp -T users --dump"

With the above code you would dump the data from the table users

Protecting against SQLi

Photo by Pixabay

Prepared query

The easiest way to protect against SQL injections is to use prepared statements. Never concatenate user inputted parameters inside of SQL queries. For example the above query should be

$q = "SELECT * FROM users WHERE id = ?";

This would prevent SQL injection from happening.

Sanitize and escape user input

If for whatever reason you are unable to make a prepared statement and you need to concatenate a string to a query you should be absolutely certain about what values make it inside the Query.

On our example above we can make sure that the $_GET parameter is sanitized and is always an integer before being used inside the query

$s = (int) $_GET['id'];

In this way we can make sure that whatever the user is requesting will have to be an integer

You should escape the character when necessary as well. If the input is not strictly and integer and when it can be a string you should strip it to make sure the input will not escape the query.

$s = addslashes($_POST['descr']);

Legally test SQLMap on intentionally injectable websites

If you really want to test the tool online there are websites out there that are intentionally weak against SQLi attacks. http://testphp.vulnweb.com/ is one of them.

Parrot Ctf

Parrot Ctf has a lot of free labs which let you test different hacking skills. Here is a lab that is specific to SQLi.

Conclusion

SQLMap is a powerful tool for exploiting security issues. Use it wisely, and use it legally on sites that you have permission to run tests on. Lights off, have a fun weekend!

Universally Bad Programming Practises (and their alternatives) pt.1

Sakis bal — Thu, 26 Jan 2023 19:47:30 +0000

The focus of this post is to highlight bad programming practises that can occur on any modern programming language or framework. We are going to try and identify bad practises that are unquestionably wrong and should be avoided.

To try and analyse these bad practises, undestand why they are happening and how they can be solved we will need a programming language to show some concrete examples. We will use PHP for this as i am most familiar with it.

So one of the unquestionable bad practises used is...

Uncontrolled usage of global variables 🤪

(in reverse)

Our usual suspects are Global Mutatable States

Global means that it can be accessed from every point of our code. A usual example for this is the $_POST, $_GET or $_SESSION parameter in PHP.

Mutatable means that it can change its value from everywhere. $_SESSION parameter is an example of a parameter that is going to be used throughout our application and can change its state.

State is the current situation. For example a switch of a light has two states. Being on or off. Based on its history it can only go from one state to another. If it is On the only state it can go into is being off.

One clear example of widespread use of Global mutatable states is the $_SESSION variable in PHP.

An example of uncontrolled usage of a global variable🔧

Let's suppose that you are saving in a session the information of a cart in an e-shop. $_SESSION['cart']. Your use of the session variable is justified as the user will need access to the cart information througout his visit. Let's look at an example of a function that takes a decision based on the cart length

function sendNotificationEmailBasedOnCartLength() {
    if (sizeof($_SESSION['cart']) > 4 && $_SESSION['cart']['hasSentEmail'] == 0) {
        sendSomeEmail();
    }

    $_SESSION['cart']['hasSentEmail'] = 1;
}

Unessesary global injection ❌

Issues that injection presents:

Maintainabillity:
In this example we can see that there is an unecessary injection of the global variable $_SESSION['cart'] inside function. This function is at this point dependant on the $_SESSION variable to function. Even if we decide later that we have found a better way to store and retrieve cart information we will have to identify every point that $_SESSION is used and change the usage.
Readabillity:
One more problem that arises from injecting these global variables is that whoever is reading the function doesn't know that these variables exist in the first place. It is not obvious as they are not stated as parameters. This degrades the readabillity of the code.

This is an error-prone approach. If your project does not have test suites you will have to debug this slowly and a lot of mistakes will eventually land on production.

Uncontrolled change of global state

Here we are changing the hasSentEmail value of cart to 1 to inform the application that we have already sent an email to this cart and to not do it again.

Where else does this value change? We have absolutely no clue The hasSentEmail value from $_SESSION variable could change at any point in our application from any function if we do not have any controlled way of using this session. If we are doing a session_start() and opening the session gate in every file there could be a session mutation in any file. This creates unpredictabillity and destabilizes our program.

Solutions! 🤔

Limit the globallity of the $_SESSION

function sendNotificationEmailBasedOnCartLength(int $cartSize, int $hasEmailBeenSentForCart = 0) {
    if ($cartSize > 4 && $hasEmailBeenSentForCart == 0) {
        sendSomeEmail();
    }
}

First you would need to decouple the function and the session. Pass any information you need about the session inside the parameters of the function. This limits the global variable to a local variable.

Better control of $_SESSION by limiting it's usage

Second, you should not access the $_SESSION['cart'] variable directly in any file. Choose a file and create a class that is responsible for creating the session, retrieving it and changing it. By having a single class that is responsible for these actions you can be assured that the global variable will not have an unexpected state somewhere down the road.

session_start();

class Cart {
    private $products;

    public function __constructor() {
        if (!$_SESSION['cart']) {
            $_SESSION['cart'] = ['products' => [], "emailIsSent" => 0];
        }
    }

    public function initializeCart() {
        $_SESSION['cart'] = ['products' => [], "emailIsSent" => 0];
    }

    public function addProduct(Product $product) {
        $_SESSION['cart']['products'][] = $product;
    }

    public function setEmailIsSent() {
        $_SESSION['cart']['emailIsSent'] = 1;
    }

    public function getCart() {
        return $_SESSION['cart'];
    }
}

Here can see a simple example of creating a class that is in the only mutator and retriever $_SESSION['cart']. If you decide in the future to retrieve information for the cart or creating a new cart you are not dependable on the $_SESSION['cart'] variable as you can swap the functionallity of these functions anyhow you like and the your app would work the same.

Additionally we can decide that only these classes will have the abillity to interact with sessions and remove all session_start() instances from anywhere else making sure that this global variable will only change its state in this controlled enviroment.

The session['cart'] variable can only hold the values specified by this class.

In conclusion

We did show why having a global variable mutate uncontrollably in our application is bad as it creates:

Unpredictabillity
Maintainabillity issues
Unredabillity

and we demonstrated with the use of classes that control the mutations and retrieval of these variables how we can make our application cleaner and easier to adapt to change

Sources:

Global mutatable states

PHP 8.1 On New Heights With Amazing New Additions 🎉

Sakis bal — Thu, 29 Apr 2021 17:04:37 +0000

PHP Improvements

PHP is on a roll lately and spoiling us with some amazing additions. On PHP 8.0 there were additions like Union Types which helped us set more complex static types, JIT with big performance improvements, named arguments and these are just a few.

Now PHP is adding Enums, Array unpacking with string keys, and Fibers driving the language to new heights.

What are those enums and why should i care?

To those who aren't aware enums (enumerations) are used when a variable is supposed to take a specific range of values. Until now if you wanted to create an enum-like type in PHP you would have to directly use static variables or associative arrays like below:

class Car
{
    static $carState = [
        "RUNNING" => "RUNNING",
        "STOPPED" => "STOPPED"
    ];

    private float $_speed = 0;
    private string $_name;
    private string $_state;

    public function __construct(float $speed, string $name, string $carState)
    {
        $this->_name = $name;
        $this->_speed = $speed;
        $this->_state = $carState;
    }
}

Here we could use the state to determine which types of cars states we have. Most code editors would type-hint the types when we pressed Car::$carState.

Do you see the issue with that? The class has no idea if you actually used the types that we have selected! A solution to this would be to simply manually check in the constructors or in setters if the variable that is passed has the appropriate values. But you probably agree that this sucks, and can lead to more bugs than we should have to handle.

Enums are here to solve this issue.

<?php

enum CarTypes {
    case running;
    case stopped;
}

class Car
{
    static $carState = [
        "RUNNING" => "RUNNING",
        "STOPPED" => "STOPPED"
    ];

    private float $_speed = 0;
    private string $_name;
    private CarTypes $_state;

    public function __construct(float $speed, string $name, CarTypes $carState)
    {
        $this->_name = $name;
        $this->_speed = $speed;
        $this->_state = $carState;
    }
}

by using this new built-in data type we can automatically skip all the checks and let enum do it for us. Neat!

What about fibers?

Fibers are utilizing 'green threads' to create virtual parallelism. While the computer is busy doing work in controllers or fetching data from database fibers helps regulate the traffic between those actions.

According to the RFC:

The Fiber API is not expected to be used directly in >application-level code. Fibers provide a basic, low-level >flow-control API to create higher-level abstractions that >are then used in application code"

This means that you will probably not use Fibers in your production code but will rather use them with the help of frameworks that utilize them like ReactPHP.

to see all changes of PHP 8.1 visit the following website
https://stitcher.io/blog/new-in-php-81

The Encapsulation Principle Explained

Sakis bal — Mon, 15 Mar 2021 21:44:26 +0000

Image by pexels (Just drive it!)

Instructions Unclear

It’s Christmas, I got myself a new GPU as a gift and instructions as to how to add them to my computer. Not much time passed until I realized that the instructions book I got were not as clear as I hoped it would be.

Instruction book: Pages 410 😳

Contents:

What is a GPU
How does a GPU work
Advanced Image Processing Algorithms
…

There’s not much to say. The book was bad.

Hell, it would be easier to just attend a whole semester of hardware classes instead of reading any more of this. It went on and on about things I never really wanted to know! All I wanted to know is how to put the GPU inside the computer and just play and chill a bit.

Now if that instruction book was a class inside a program it would have violated one of the most basic programming rules: Encapsulation, or else the art of exposing to the client only the important parts of your code, or the parts the client needs.

Why Encapsulation?

We have already explained what encapsulation is but to understand it better we need to see the alternatives of NOT encapsulated our class.

class Car:
  def __init__(self, speed, model):
    self.speed = speed
    self.model = model

toyota = Car(30, 'Toyota')

myCrazyWeirdCar = Car(50, 'Lamborghini')
myCrazyWeirdCar.speed = 41000

Look, I would never call myself a mechanical engineer but even I understand there is something fishy going on here with this car. myCrazyWeirdCar is about to go outside the earth’s orbit and conquer mars if it continues with this speed, and that probably isn’t what the author of this code above wanted to happen.

Let’s fix this:

First I am assuming the car owner wanted to just get the car’s speed higher.

class Car:
  def __init__(self, speed, model, maxSpeed = 300):
    self.__speed = speed
    self.__model = model

    if maxSpeed > 400:
        self.__maxSpeed = 400
    else:
        self.__maxSpeed = maxSpeed

  def speedUp(self, speed):
    If speed < 0: 
        return

    totalSpeed = self.__speed + speed
    if totalSpeed > self.__maxSpeed:
        self.__speed = self.__maxSpeed
    else:
        self.__speed = totalSpeed

  def describe(self):
      return self.__model + " is going at " + str(self.__speed) + " km/h !"


toyota = Car(30, 'Toyota', 220)
myCrazyWeirdCar = Car(50, 'Lamborghini', 300)
toyota.speedUp(300)

print(toyota.describe())

Now what we changed is that we gave our class attributes a little more privacy. (that is what the __ is before the attribute names). This means that these attributes are not accessible anymore directly!

No more Mr. 4000 car speed allowed. Or any sort of

myCrazyWeirdCar.speed = 40000

Now, why is that a good thing?

The Problem With Not Encapsulating

To operate the car the client does not need to directly change the speed of the car. By giving the client the ability to change it we get three problems

The client knows too much about our class

He doesn’t know anymore what the class is supposed to do or what he is supposed to change. Do we use the class to have a data type that has a speed attribute that we can use? Do we use it to the model of the class and retrieve the model info? What is the class’s reason to exist?

The state of the Car class becomes unpredictable.

If the user is allowed to take any attribute anytime and change it directly to whatever he wants the Car Class becomes unpredictable and thus needs more and more checking in every method that we use.

For example, if the user could directly manipulate the speed to be a negative number then the car would be able to run at a negative speed. This would then need to be checked on every single method we are using.

Unable to change attribute names

Using the attributes directly leads to a problem where you can’t change the attribute names anymore because they are used in random places on your code. Changing one attribute name now requires you to check every file for its usage and change its name. This is most definitely not SOLID.

You against yourself

Now you are probably wondering: OK, but I AM the developer and I control these values so I can just like not change them to some unpredictable value?

Well, that is what many people including myself think. But then I get lazy at some point and just want the car value to change to some unpredictable value just for this one case, and then you end up making exceptions to support this one case and then your car isn’t a car anymore, and the story goes on.

You are primarily protecting you from yourself when creating a class. Remember that. So it’s better to isolate the attributes from a class and let them be private and just expose the functionality you need.

Take for example the class method from above:

def speedUp(self, speed):
    If speed < 0: 
        return

    totalSpeed = self.__speed + speed
    if totalSpeed > self.__maxSpeed:
        self.__speed = self.__maxSpeed
    else:
        self.__speed = totalSpeed

Our car can accelerate to any speed we want without ever going more than the intended max speed. The user already inputs a max speed when creating the object so he expects the class to stop at max speed. He doesn’t need to know how it is done, he just inserts a speed and the method is encapsulating the logic behind it. Neat right?

In conclusion

If you want to help your future self-use encapsulation because:

It helps you write cleaner software and design your classes to exist without having them questioning their reason for existence.
Make classes reusable by hiding their complexity
Fewer checks per class method because of the unpredictability of attributes.

Repository Pattern With Javascript

Sakis bal — Thu, 11 Mar 2021 22:06:26 +0000

Photo by Cleyder Duque from Pexels

Explain it simply

The repository, in simple words, is a pattern used to keep a loose connection between the client and the server data storing procedures hiding all complex implementation. This means that the client will not have to be concerned as to how to access the database, add or remove items from a collection of items, pointers, etc.

Why Would I Want To Use It

Let’s make a scenario where you just call API endpoints from your client and use it in a certain way. In a real-world scenario, you would probably call the same endpoint on different points in your files depending on where you need to use the data. For example:

const todoItemsElContainer = document.getElementById("todo-items");
fetch('http://example.com/todoItems.json')
      .then(response => response.json())
      .then(data => {
           const todoItemDiv = document.createElement('div');
               todoItemDiv.id = data.ID;

           const innerText = document.createElement('p');
               innerText.textContent = `${data.DESCR} duration: ${todoItemDiv.duration}`;

           todoItemDiv.appendChild(innerText);
           todoItemsElContainer.appendChild(todoItemDiv);
       });

function addTodoItem(description, duration) {

    const data = {
        DESCR: description,
        DURATION: duration
    }

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    return response.json();
}

Issues with the above approach

There are several issues with the above code example. For one in the first fetch call we are mixing the presentation with fetching of the data. This makes the fetch non-reusable.

Furthermore, what happens now if we want to change a certain attribute of the requested object now?

Let’s suppose the API changes and we need to change an attribute name from todoList.DESCR to todoList.DESCRIPTION. We will have to go to every single instance and change that attribute to the new attribute name.

This is quite unproductive and might lead to accumulating mistakes and errors over time. (There is a chance we forget some instance unchanged and find that out later, which would be very frustrating).

Another possible scenario is that there will be some business logic involved in the procedure. By scattering around functions that are related to that object you are creating more violations to SOLID. But enough talking about the problem. What is the solution?

Repository Pattern to the Rescue

With the repository pattern, you manage to map attributes that come directly from the database to the repository model which gives us flexibility. If the attributes of the item change we can easily change them at the ONE spot where they are used: The Repository. No need to go to every file the object is retrieved, respecting the SOLID principle.

The power of abstraction and inheritance gives us the power to create a default use for simple API object management to minimize the boilerplate. Then with inheritance, the concrete implementations can overwrite the default behavior.

Additionally, business logic is encapsulated in functions inside the Repository. If the implementation ever changes you have it all in one place to change it however you like.

Below is an example of the TodoItemRepository.


class TodoItem {
  /**
   * Naming attributes the same as in the database
   * helps when adding the items back to the database.
   */
  constructor(id, description, duration) {
      this.DESCR = description;
      this.DURATION = duration;
      this.ID = id;
  }

  getDescription() {
      return this.DESCR;
  }

  getDuration() {
      return this.DURATION;
  }

  getId() {
      return this.ID;
  }
}

class TodoItemRepository {

    constructor() {
         this.todoItems = [];

         this.todoItemDataContext = new TodoItemDataContext();
    }

    getAll() {
        return this.todoItemDataContext.getAll().then(response => {
            if (Array.isArray(response)) {
                response.map( todoItem => {
                    this.todoItems.push(new TodoItem(todoItem.ID, todoItem.DESCRIPTION, todoItem.DURATION));
                })
            }
            return this.todoItems;
        });
    }

    add(todoItem) {
        this.todoItemDataContext.add(todoItem).then((newTodoItem) => {

            this.todoItems.push(todoItem);
        }).catch((error) => {
            console.error('Error:', error);
        });
    }

}

First of all above, we decoupled the fetching of the data with the presentation of it. Now we can reuse it.

If now the database changes the DESCR attribute to DESCRIPTION all we need to do is change our Repository class to accept this change. In short, the design became more SOLID. Note here that you need to use getters, or setters (make the attributes private) within your application so you are not dealing directly with the attribute names.

In Conclusion

The repository pattern:

Helps us keep the code SOLID
Is an abstraction that hides the complexity of communicating with the data persistence layer
Makes our code more robust

Learn More About The Repository Pattern

The {Zero, One, Two, Many} Tip For Better UX

Sakis bal — Tue, 09 Mar 2021 14:18:20 +0000

*(image from pexels)

Being consistent with your code designs is hard, you need to be careful to watch out for all possible states that your code might fall into and take care of those, but where do we start?

When creating a new component I usually find myself having already created the data necessary to populate the component. This means I am usually starting my design with one to two copies of the specific component.

todoItems.map( todoItem => {
    <TodoItem todoItem={todoItem} />
})

Sometimes the lazy part of ourselves takes control and just lets this component like this and moves on to the next subject. But there is a problem with this approach.

Zero Items case

In case there are 0 todo items the page will look ugly and empty. What should there be instead?

Help the user navigate and add a new to-do item.
Inform him that there should be something there instead of nothing.

The other case that we should take care of is the MANY items case. What happens if we got 1000 items?

Many items case

In that case, we need to have considered how these elements will look like.

Add a "see more" button.
Load data asynchronously if possible for best UX.
Let the user minimize it after opening it.

Following this {zero, one, two, many} tecnique you will never have to encounter these nasty empty designs again!

Flex Your Design Skills With Flexbox 💪

Sakis bal — Thu, 09 Apr 2020 15:21:37 +0000

Flexbox

Flexbox (Flexible Box Layout Module) is a a trendy way to make your design flexible without the need of using tricky positioning tricks or float.

Why Flexbox

Flexbox is ideal for times where you need to re-order elements on certain circumstances, or if you want to scale your elements vertically, horizontically or if you want to align your elements.

Terminology

To use the flexbox you will first need to know about 2 core elements:

The flex container which is the outter element embracing all other elements.
The flex item which are the elements inside of the flex-container

Flexbox rules

Order

To change the order of the elements that you got inside the flex container you will need to use order: . Elements with the same number will be positioned as they would have been positioned by default. Lower numbers than other numbers are positioned to the left if we have a row orientation and to the top if we got a column orientation. We will analyze these further down below.

Flex-grow

Flex-grow is used to specify which elements will take up more space
inside the container than other elements. By default the flex-grow value is 0 which means that the elements will not take up the remaining space of the flex container. Let's take an example where we got 3 elements and all got flex-grow: 1. All elements will take up the same remaining space of the flex-container, but if one element has flex-grow: 2 it will take twice as much remaining space as its other siblings.

Flex-direction

Flex direction comes in handy when you want to reverse the order of your flex items or if you want to totally change their orienation from a row to a column. To do that you can select one of the following option:

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

Flex wrap

You may be wondering at that point "What if i got items inside a flex-container and i want to have more than one row for my items?". Well flex-wrap got us covered as you can do exactly that by using:

flex-wrap: wrap

or

flex-wrap: wrap-reverse

This will make elements that need some space to go to a new row so that they aren't squished together.

Flex shrink

Although flex-shrink looks a lot like flex-grow (They are very close cousins), they do sligtly differeny things. While flex-grow let's elements take up the remaining space of the flex container flex-shrink let's items with higher flex-shrink numbers sacrifise more of their own personal space to give it to other siblings around. Flex shrink truly is the good guy here.

Conclusion:

Flexbox is a great tool for making a robust layout. It can be best used with:

Scalling horizontically.
Scalling vertically.
Re ordering elements.
Flexible designs.

Hope to see you here on part 2 😃

The box model explained

Sakis bal — Tue, 07 Apr 2020 18:59:43 +0000

Generally

Positioning and spacing is one of the core reasons of css existence. Slick designs simply need a little whitespace around them so that every element can shine with its own glamour.

One of the concepts that i didn't really get in the beggining of web development was the difference of padding and margin. In my eyes these two were doing identical things as i wasn't using them for any cutting-edge design.

Therefore i decided to run back on the basics and talk about some good old margin and padding.

Box model

Before beggining we need to clear up what the box model is. To better understand how margin and padding
actually differ from each other we need to first see how they are different in the box model

As you can see above, every element has the content area where all the content we can see resides. For example on a p tag that would be the text within.

Then we have the padding which extends the inner elements width and height and pushes outwards the border and margin of the element. After that the border is outside of the padding giving us the option to create a square outside the padding area.

Last but not least the margin is outside
of our element giving us the option to move the element around ( Note here that the margin still affects the height and
width of our element. You still need to count it in when you want the absolute height and width of an element)

Css by default assigns the height and width of an element to the content area. So to actually get the real width
and height of an element you need to calculate the following:

actual height and width of an element: height + padding + border + margin

Tip: By opening the developers console (right-click inspect element) you will see the box model on the right.

This should give us an easier time understanding what a margin and padding property is.

Margin

Now we are ready to talk about the margin property

As our respected friend w3schools states:

The CSS margin properties are used to create space around elements, outside of any defined borders.

Let's begin by seeing the properties:

margin-left: x;
margin-right: x;
margin-top: x;
margin-bottom: x;
margin: x ?y ?z ?w

where x,y,z,w can have the values of px|rem|%|vw|vh.

margin is shorthand for all the 4 of the above margin properties. It goes clockwise starting from the top element if you add all 4 of the values. If you just add x,y the the margin of x will be applied on top and bottom of the element and the margin of y will be applied to the left and right of the element. If only x is applied the the margin will be applied to all 4 sides

Examples

margin:20px

margin:10px 20px

margin:10px 20px 30px 40px

Margin is perfect for "pushing" your element away from other elements. For example when you got a p element that you need to move a bit away from other p elements, just a bit whitespace to make our paragraph visually pleasing.

tip: You can use margin: 0 auto to horizontically center an element's content. Be aware that the element needs to have a width specified for this to work.

Padding

Now it's time for the padding.

Padding properties are almost identical to margin properties in a lot of ways which is logical considering the similarities these 2 share.

padding-left: x;
padding-right: x;
padding-top: x;
padding-bottom: x;
padding: x y z w

Where x,y,z,w can have the values of px|rem|%|vw|vh.

Same as above padding is a shorthand for all the other properties. Padding is ideal for cases where you want to extend the border
away from the element or if i want to give space between the background color of an element and the content inside.

I hope this guide was helpful! Have a nice day and remember to stay inside 🦄

Useful resources i use on day to day basis.

Sakis bal — Fri, 03 Jan 2020 19:00:27 +0000

When i work on a project i use several different resources that come in handy everyday. I picked them up from several other people who mentioned them on their resources list and just kept using the best ones. While surfing facebook i got in contact with some people who asked about some help on their design. I then proposed to them to use one of these resources that i will list here and they were totally blown away. Until now i had no idea that there were still people who had no idea that these extremely useful resources existed. That is why i decided to make a post of it. Here is the list:

Ui Gradients

Whenever i am looking for a beatiful gradient to overlay on an image or to put as a background Ui gradients is a no-brainer and my usual first place to go.

Go to ui gradients

Flaticon

Small beatiful icons like facebook, and instagram can be found here. Why bother doing the tedious work of making an icon when you can have them easily free on flaticon? Just don't forget to reference the creator of the icon on your own website. This way both you and the creator wins!

Go to ui flaticon

Dribbble

Dribble is a place where designers upload their creations and get feedback on them. It is also a place for developers and other designers to get inspiration from to create their own masterpieces!

Go to dribbble

Pexels

Pexels is the go to website if you need HD images to put either as a placeholders on your new websites or as real photos as pexels has a free to use policy for their images. It has thousands of beatiful images and i use them on most of my projects.

Go to pexels

Google fonts

Thousands of beatiful open source fonts are found here and can be used for free ! Google fonts is fast and reliable.

Go to pexels

More resources?

If you made it down here, thank you for reading through my resource list, i hope you create something amazing with these resources. If you have any other resource that you want to share with me or others please comment it down below!

How i plan to elevate my designing skills on 2020 🎉

Sakis bal — Wed, 01 Jan 2020 10:59:58 +0000

Designing is a big part of the web development proccess and it is the best way to attract new users to your platform. I always lacked the ability to make unique beatiful designs. You know this feeling after successfully finishing a website and getting the feel that this looks professional? . That is what i plan on achieving to feel after making most of my new websites on 2020 🎉. But how do i plan to achieve this?

Copying 50 different beatiful designs

This way i will be able to start having a feel about what is and what isn't beatiful in general. It will give me a good sense about which fonts go well together and which colors match good. While 50 is definitely an excessive number i do believe strongly in the repetition makes the master mentallity

Reading more and more about graphic design

While doing a copy of a website might be useful to get a feel about your design quality it doesn't state exactly why you get the feeling of quality on your design. A good designing book will hopefully give me an idea of what exactly quality means on designing standards and help me create my own stunning designs.

**Are You aware of any better ways to help me get better on designing?**

If you have any resources, or any other ways that i could follow to become a better designer i would deeply appreciate it! Just comment down below.

Oh and while we are at it, this is my first official post on dev 🎉! Thanks to dev for giving us free entertainment and i hope i will be able to entertain or help people with my posts as i continue writing!

DEV Community: Sakis bal

A Game-Changer for SEO: Harnessing the Power of Google Rich Content results

What is Google Rich contents results?

Types of supported rich content

Implementing Google Rich Content

How do i check if my website has rich content results?

Closing thoughts

👨🏻‍💻Securing Your Web Applications from SQL Injection with SQLMap

Table of Contents

What is SQL injection

A practical example of SQL injection

SQLMap: Automated SQLi testing

Routes protected by authorization

Slowing down requests

Enumerating the database

Protecting against SQLi

Prepared query

Sanitize and escape user input

Legally test SQLMap on intentionally injectable websites

Parrot Ctf

Conclusion

Universally Bad Programming Practises (and their alternatives) pt.1

Uncontrolled usage of global variables 🤪

An example of uncontrolled usage of a global variable🔧

Unessesary global injection ❌

Uncontrolled change of global state

Solutions! 🤔

Limit the globallity of the $_SESSION

Better control of $_SESSION by limiting it's usage

In conclusion

PHP 8.1 On New Heights With Amazing New Additions 🎉

PHP Improvements

What are those enums and why should i care?

What about fibers?

The Encapsulation Principle Explained

Instructions Unclear

Instruction book: Pages 410 😳

Why Encapsulation?

Let’s fix this:

The Problem With Not Encapsulating

The client knows too much about our class

The state of the Car class becomes unpredictable.

Unable to change attribute names

You against yourself

In conclusion

Repository Pattern With Javascript

Explain it simply

Why Would I Want To Use It

Issues with the above approach

Repository Pattern to the Rescue

In Conclusion

Learn More About The Repository Pattern

The {Zero, One, Two, Many} Tip For Better UX

Zero Items case

Many items case

Flex Your Design Skills With Flexbox 💪

Flexbox

Why Flexbox

Terminology

Flexbox rules

Order

Flex-grow

Flex-direction

Flex wrap

Flex shrink

Conclusion:

The box model explained

Generally

Box model

Margin

Examples

Padding

Useful resources i use on day to day basis.

Ui Gradients

Flaticon

Dribbble

Pexels

Google fonts

More resources?

How i plan to elevate my designing skills on 2020 🎉

**Are You aware of any better ways to help me get better on designing?**