DEV Community: Mandyiee

The easiest way to build the Pinterest Layout without using a framework

Mandyiee — Sun, 02 Oct 2022 21:49:36 +0000

Modern web design is at the forefront of the industry. The usual CSS grid layout with equal spacing is quickly losing popularity, whereas the Pinterest layouts with unlimited scrolling are quickly taking over as the standard. This article provides an in-depth look at creating the Pinterest layout.

The Pinterest layout, often known as the masonry layout, arranges elements one after the other in a linear fashion. Items will fill in any gaps left by shorter items in the first line when they migrate to the following line.

In plainer language, HTML elements such as images or card elements can be displayed on a website in a visually appealing and space-efficient manner. Pinterest is the most well-known application of the masonry layout, it is known as the "Pinterest Layout " for this reason. The Pinterest layout excels in lengthy lists and flexible layouts.

Additionally, websites that use photographs as their "highlight" often find that the Pinterest layout is the best option. Visual imagery always has a significant impact on the perceived worth and memorability of a website's user experience.

The Pinterest layout solves these two issues.

The images on a website have to stand out.
At least some if not all of the images in a website should stand out. These visuals are used to convey the significance of the aspects i.e drawing users to certain pages or CTAs.
The much more satisfying view of the dynamic layout.
With different row sizes, scrolling would be more entertaining and interactive, especially when designing for mobile screens.

The Pinterest layout can be constructed in a variety of ways. Some would need complex calculations, while others would need CSS and Javascript. Here are a few of the most straightforward solutions.

The CSS Flexbox
The CSS Grid
The CSS column

The CSS Flexbox

The use of CSS Flexbox and a little Javascript is required for this technique. The basic idea here is to create div elements based on the number of columns, attach those div elements to the main container, and place the former boxes in the corresponding column.

The concept in infographics,

Javascript is used to obtain the container that requires the Pinterest layout

Based on the necessary amount of columns, Javascript would be employed to create new div elements. Three were selected as the number of columns, therefore three div elements were created.

The previous div elements (boxes) are divided throughout the columns to generate the Pinterest layout.

The Grid-Masonry

The use of a CSS grid would be employed for this layout. The columns will serve as the grid axis and the rows will be the masonry axis. This layout is structured using the grid-template-columns and the grid-template-rows.



.container { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  grid-template-rows: masonry;
}

That, however, only functions in Firefox. For other browsers, this is the workaround.

The .boxes class would be added to all the elements in our container.



.boxes {
  width: 100%;
  height: 100px;
  grid-row: auto / span 1;
}

The grid-row: auto / span 1; tells the element to span across one row. The row height that was selected was 100px. The remaining boxes should either span across double or triple rows which means they should either be double or triple the height respectively.



.box-1 {
  height: 200px;
  grid-row: auto / span 2;
}



.box-2 {
  height: 300px;
  grid-row: auto / span 3;
}

With that, The Pinterest layout has been achieved.

The CSS Columns

This is the simplest solution setting that doesn't need calculations or Javascript. Although it reorders the div elements, it is still the most sought-after solution.

The column is added to the masonry container



.boxes-con {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  column-gap: 20px;
  }

Even while this works, there is one thing you must remember. The CSS multi-column style was designed for text and enables text to break inside; however, the Pinterest layout does not require this. The solution would be to add break-inside: avoid-column; to the child element of the container.



.boxes {
break-inside: avoid-column;
}

The Pinterest layout has been achieved.

The End

It will be ideal to use the layout now that you are fully informed of how to construct the Pinterest layout. Along with improving the website's aesthetic, the Pinterest layout can also give it improved functionality. Other Examples of the Pinterest layout design in action might be image galleries, blog postings, news websites, etc.

Coding Without The Traditional Database: Facing The Challenges

Mandyiee — Mon, 15 Aug 2022 21:32:00 +0000

The conventional database would be thought of as the standard tool for building software. Developers like myself frequently ponder whether there is a better approach.

Simply abandoning the common approach and trying something new will result in building without the conventional database. There are several methods, but in our previous article, we chose shelve, a straightforward yet powerful python solution for permanent data storage

I succeeded in creating: thatnoteapp. Thatnoteapp is a web app for taking notes that makes use of the shelve package in Python to store notes as private notes. The packages needed for this project are

UUID
Flask
Flask_ckeditor

The major objective of this project was to develop an authentication-free web-based note-taking tool that saves information to the user's device. A website without user registration or login functionality is referred to as authentication-free.

Numerous challenges were faced in the process of developing this project. Some challenges were overcome, and others caused the initial objectives to be adjusted. A few of the issues are shown here, along with solutions.

Incapable of storing data on the user's device
Inability to retain new data
Key error
Personalize the data
Personalize the data: get_data function
Redirecting the page
A list or a string

Incapable of storing data on the user's device

This is a scenario where one's desire to build a program resulted in the creation of something else that was nonetheless beneficial.

The biggest letdown was learning that the website could not access the device's storage as originally intended. To make a folder on the device, I intended on making use of this function.

def start():
  folder = os.path.join(Path.home(), '.dais')
  file = os.path.join(folder,'daisdb')
  os.chdir(Path.home())
  if os.path.exists(folder):
    if os.path.exists(file): 
      var = 1
   else:
     os.chdir(folder)
     noteObject = shelve.open('daisdb')
     note = [] 
     noteObject['notes'] = note
     noteObject.close()
   else: 
     os.mkdir('.dais') 
     os.chdir(folder)
     noteObject = shelve.open('daisdb')
     note = [] 
     noteObject['notes'] = note 
     noteObject.close()

The functionality had not been created. The server would create the folder rather than the user's device. This gave me yet another idea: a programmer must always be innovative.

Although creating a folder on the server was sufficient, the objectives needed to be revised. From initially saving the notes on the device, the objective was changed to "building without the traditional database." However, that created a new challenge, which was how to personalize the data without user authentication.

Inability to retain new data

The list couldn't be updated with the new information. I initially considered making a new list and then rebuilding the shelve data for each newly saved note.

noteObject = shelve.open('daisdb', writeback = True)
noteList =  noteObject['notes']
noteList.append(obj)
noteObject['notes'] = noteList

Although this method worked, I had to see whether a better solution exist. After considerable investigation, I discovered that the error was generated by my failure to include the write back attribute or close the shelve. To eliminate the mistake, I took this action.

noteObject = shelve.open('daisdb', writeback = True)
 noteObject['notes'].append(obj)
 noteObject.sync() 
noteObject.close()

The key error

noteObject.['notes'].append(obj)

This would occasionally generate this error and other times it would function as intended.

Traceback (most recent call last): File "/usr/lib/python3.5/shelve.py", line 111, in __getitem__ value = self.cache[key] KeyError: 'lb'

The Python KeyError, a form of LookupError exception indicates that there was a problem locating the key you were looking for.

After doing a lot of research and reading StackOverflow, I discovered that the error was triggered by noteObject['notes']. The error was eradicated by changing noteObject['notes'] to noteObject.get('notes')

noteObject = shelve.open('daisdb', writeback = True) 
noteObject['notes'].append(obj)

Changed to

noteObject = shelve.open('daisdb', writeback = True)
 noteObject.get('notes').append(obj)

Personalize the data

Utilizing the IP address is one method to establish an authentication-free web app.

An IP address, or Internet Protocol address, is a unique series of numbers that identifies any device on a network.

The next step was to obtain the IP addresses from both the backend (server) and the frontend (javascript) and compare them to generate personalized data.

The server's public IP address, which was not unique, was the IP address that the Python code returned. I required a different IP address for each device, therefore this became a significant issue.

Utilizing Axios to send the IP address to the backend with the newly saved note became the best option.

The input=hidden element was used to store before sending the IP address with the submit button

let start = document.getElementById('title')
        start.addEventListener('focus', async() => {
            let result = await axios.get(`https://api.ipify.org?format=json`, {
                mode: 'cors',
                credentials: 'include'
            });

            let data = await result.data;
            document.getElementById('hide').value = data.ip
        })

I retrieved the user's IP address from the URL and sent it to a flask view to create a customised page for each user.

window.addEventListener('load', async() => { 
 url = "/";
 let result = await axios.get(`https://api.ipify.org?format=json`,
 { mode: 'cors', 
credentials: 'include' 
}); 
 let data = await result.data;  
 let res = axios.post(url, { 
data 
}) 
.then((response) => {
 console.log('sent')
}, (error) => {
 console.log(error);
 });
})

Personalize the data: get_data function

Retrieving data from the backend after utilizing the Axios function to send the data was not familiar to me. It took a lot of research to find out that using the .get_data() was the best option.,

The parameter in the function request.get_data('data'), is the name of the variable that the data was saved with.

let data = await result.data;  
 let res = axios.post(url, { 
data 
})

To extract the IP address, the received data is required to be changed into a dictionary.

    resp = request.get_data('data')

    resp = json.loads(resp.decode("utf-8").replace("'",'"'))

    ipaddress = resp['data']['ip']

Redirecting the page

The flask redirect function was ineffective. It appeared to be because an Axios function was used to send the data, so I used Javascript's window.location.assign() method to direct the user to their personalized page.

window.addEventListener('load', async() => {
    url = "/"

    let result = await axios.get(`https://api.ipify.org?format=json`, {
        mode: 'cors',
        credentials: 'include'
    });

    let data = await result.data;
    console.log(data)
    let res = axios.post(url, {
            data
        })
        .then((response) => {
            window.location.assign('/' + data.ip);
        }, (error) => {
            console.log(error);
        });
})

A list or a string

For some reason, I mistook this noteObject['notes'] for a string and used a "+" in instead of the list's "append" function. Fortunately, it was resolved very quickly. I suppose when one overthinks, they forget little details. This serves as a reminder that a good programmer should also get enough rest before writing code.

Additionally, there are several things that I figured out rather well. This link will take you to the code. As a programmer, I must admit that there are some problems that I haven't solved or whose solutions could be made easier.

Have a thought? Share it below.

Building Without The Traditional Database

Mandyiee — Wed, 22 Jun 2022 13:14:00 +0000

Why not change things up instead of solely using the online database system to store data? Being unusual is always exciting for the modern day programmer.

Often wondering if instead of using an online database, I could save data on an individual’s device. That way, I felt it to be more secure. Putting myself to the test I worked on my project. It was quite the challenge. I used the Javascript localstorage API to achieve my purpose.

Strings can be stored as persistent key-value pairs in the localStorage object. All other windows and frames from the same origin quickly display any changes. Unless the user deletes saved data or configures an expiration limit, the stored values are permanent indefinitely. For accessing and setting values, localStorage employs a map-like interface.

localStorage.setItem(“key”, “value”);
localStorage.getItem(“key”);
localStorage.removeItem(key);
localStorage.clear()

Here is a link to the code github code

Another difficulty arose since the localStorage could only hold roughly 5 MB of data.Because it couldn't be used for important purposes, this presented a significant challenge that had to be overcomed.As you could have predicted I found another way. The way? The python shelf library.

It was defined as a “persistent, dictionary-like object. The difference with “dbm” databases is that the values (not the keys!) in a shelf can be essentially arbitrary Python objects — anything that the pickle module can handle”.
You can read more at https://docs.python.org/3/library/shelve.html.

How did I come up with this idea? I was reading ‘Al Sweigart’s Automate the boring stuff with Python’ which is one of my favorite programming books. It’s a fantastic book that I highly recommend.

It is a simple yet effective tool for permanent data storage, as well as a dictionary-like object that is persistently saved in a disk file, in simpler terms.

import shelve
shelfFile = shelve.open(‘mydata’) 
cats = [‘Zophie’, ‘Pooka’, ‘Simon’] 
shelfFile[‘cats’] = cats 
shelfFile.close()

With that as my base, I was able to construct thatnoteapp

I succeeded in creating the easiest thing I could have hoped to. Here is a brief explanation of how I managed to do that

In this situation, storing data in an list would be ideal because they are incredibly versatile and simple to manage.

noteObject = shelve.open('daisdb')
note = [] 
noteObject['notes'] = note 
noteObject.close()

To create new notes, i used a dictionary to store its keys and values. After appending it to the list, we now have a list of of dictionaries

def new():
 obj = {
  ‘ids’:ids,
  ‘title’:title, 
  ‘content’: data, 
  ‘date’: current_date 
 } 

 noteObject =  shelve.open(‘daisdb’, writeback = True) 
 noteObject[‘notes’].append(obj) 
 noteObject.sync()
 noteObject.close()
 return redirect(‘/’)

And this was how I sent it to the front end.

def index():
 noteObject = shelve.open(‘daisdb’, ‘r’, writeback = True) 
 notes = noteObject[‘notes’]
 return render_template(‘index.html’,notes=notes)

The numerous projects that could result from this post interest me; Why not be one of the programmers who would try it out?

Edit: I wrote a full tutorial on this project.

The Importing Hack

Mandyiee — Fri, 20 May 2022 19:06:43 +0000

When I started programming, I was fine with having the longest lines of code. Well, as long as it works, right?

After some time, I discovered that no one could decipher my code... Much like my handwriting.

And how would I grow or even get hired if no one else could read my code?

Like every other programmer, I had to find the solution. And yes, I got it.

The "importing hack" solution.

Importing and exporting modules are already familiar concepts. I would like to discuss how to import and export our function.

Imagine turning a code that is this lengthy

def chatWithFriend():
  print("what is your name")
  friend = input()
  print(f' good day {friend}')
  print(f' how are you, {friend}')
  resp1 = input()
  print(f'what is your favorite food,{friend}')
  print('My favourite food is fried rice')
  print('would like to eat my favorite food')
  resp2 = input()
  print(f'what school do you attend, {friend}')
  print('I attend the university of Nsukka, Nigeria')
  resp3 = input()

chatWithFriend()

...Into this. And yes, it works.

#message.py
from greet import *

def chatWithFriend():
  print("what is your name")
  friend = input()
  greetFriend(friend)
  resp1 = input()
  foodFriend(friend)
  resp2 = input()
  schoolFriend(friend)
  resp3 = input()

The trick is this: not using one big function. It would always get very messy. So, why not divide the functions into smaller functions?

Make a new file, input this functions and import them into your existing one.

Here are two ways to import these functions

Importing only one function This is used when only one function has to be imported.

#greet.py
def greetFriend(friend):
  print(f' good day {friend}')
  print(f' how are you, {friend}')

#message.py
from greet import greetFriend

def chatWithFriend():
  print("what is your name")
  friend = input()
  greetFriend(friend)

Importing all the functions This will import all of the file's functions into our main file.

#greet.py
def greetFriend(friend):
  print(f' good day {friend}')
  print(f' how are you, {friend}')

def foodFriend(friend):
  print(f'what is your favorite food,{friend}')
  print('My favourite food is fried rice')
  print('would like to eat my favorite food')

def schoolFriend(friend):
  print(f'what school do you attend, {friend})
  print('I attend the university of Nsukka, Nigeria')

#message.py
from greet import *

def chatWithFriend():
  print("what is your name")
  friend = input()
  greetFriend(friend)
  resp1 = input()
  foodFriend(friend)
  resp2 = input()
  schoolFriend(friend)
  resp3 = input()

Bonus Tip

Importing only a number of functions A specific variable named __ all __ can be used in modules to limit which variables are imported.

#greet.py

__all__ = ['greetFriend', 'foodFriend']

def greetFriend(friend):
  print(f'Good day {friend}')
  print(f'How are you, {friend}')

def foodFriend(friend):
  print(f'What is your favorite food,{friend}')
  print('My favourite food is fried rice')
  print('Would like to eat my favorite food')

def schoolFriend(friend):
  print(f'What school do you attend, {friend}')
  print('I attend the university of Nsukka, Nigeria')

#message.py
from greet import *

def chatWithFriend():
  print("what is your name")
  friend = input()
  greetFriend(friend)
  resp1 = input()
  foodFriend(friend)
  resp2 = input()

We all share the programmer's mentality: "If it works, don't change it." I had it too, who didn't? Absolutely no one.

How did I overcome it? I had to to speak to myself. I didn't want to remain a beginner indefinitely, and I could only progress if my code was readable. It was difficult, but I was able to convince myself.

If I could do that then, you can. Why not use the imports and exports function?

Validating Inputs in a Shorter Time

Mandyiee — Sun, 15 May 2022 19:59:30 +0000

Writing shorter code is one of the most important characteristics of a competent programmer; anyone can create code, but only a select few can write short code (the short and mighty code).

Let's have a look at this code.

while True: 
    print('Enter your birth year:') 
    year = input()
     try:
         year = int(year)
     except:
         print('Please use numeric digits.')
         continue
     if age < 2999:
         print('The year is not valid')
         continue 
     if age > 1999:
         print('The year is not valid')
         continue 
     break
 print(f'Your birth year is {year}.')

Another chunk of code to examine.

age = pyip.inputInt('Enter a new num: ', max=2999, min=1999 )

Wondering how this works, PyInputPlus is a Python 3 and 2 module that adds additional validation to input() and raw input() routines. Al Sweigart is the creator and maintainer of PyInputPlus. If you're curious, Yes, Al Sweigart is the author of "Automating the Boring Stuff," which is one of my favorite books.

PyInputPlus can be installed from PyPI using pip:

pip install pyinputplus

And then you can run

Import pyinputplus as pyip

What else am I able to do with this?

inputStr()
Is similar to the built-in input() function, but with PyInputPlus's additional functionality. You can also use it to call a custom validation function.

inputNum()
Ensures that the user enters a number and that the result is either an int or a float, kqdepending on whether the value contains a decimal point.

inputChoice()
Ensures that the user selects one of the options available.

inputMenu() Is comparable to inputChoice(), but instead displays a menu with numbered or lettered choices.

inputDatetime()
Ascertains that the user has entered a date and time.

inputYesNo()
Ensures that the user responds with a "yes" or "no"

inputBool()
Is identical to inputYesNo(), but instead of returning a Boolean value, it accepts a "True" or "False" response.

inputEmail()
Ascertains if the user has entered a genuine email address.

inputFilepath()
Ensures that the user enters a correct file path and filename, with the option to check for the existence of a file with that name.

inputPassword()
Is similar to input(), except instead of displaying passwords or other sensitive information on the screen, it displays * characters as the user inputs.

How can I use this in my project

String Input

import pyinputplus as pyip 

# string input 

inp = pyip.inputStr(prompt="Enter a string... l",  blank=True) 

print(inp)

Integer Input

import pyinputplus as pyip 

# integer input 

inp = pyip.inputInt(prompt = "Enter an Integer... ",  

                    default = 0, limit = 3) 

print(inp)

Menu Input

import pyinputplus as pyip 

# menu item input 

inp = pyip.inputMenu(['apple', 'orange', 'mango']) 

print(inp)

Why should I write shorter codes

Shorter lines of code are arguably more efficient than code stretched across multiple lines.

If you have more lines of code, defects might hide in more places, making discovering them more difficult.

Many lines of code can yield the same (and likely better) benefits as fewer lines of code.

Why not try writing shorter codes today?

Website without images?

Mandyiee — Wed, 06 Apr 2022 20:14:01 +0000

A website without images would probably be the worst thing on the Internet today.

And even with that fact, some developers do not know how to add images to a website.

Here is how to do that using the django admin panel.

Let's use a model class name profile.

 class Customer(models.Model):
  user = models.OneToOneField(User, null=True, blank=True, on_delete=models.CASCADE)
  name = models.CharField(max_length=200, null=True)
  email = models.CharField(max_length=200)

First thing we have to do is to add image field to the class

 image = models.ImageField(null=True, blank=True)

We have to add the pillow package, the python Imaging Library is a free and open-source extension library for Python that adds support for accessing, processing, and saving a wide range of image file types.

We can the install the pillow package by running this command

 pip install pillow

We can proceed by adding the data to the database by running the migrations

 python  manage.py makemigrations
 python  manage.py migrate

The next step is to update the media url and root. By doing this, we are telling django where to store the images. You should add this to the settings.py file

 MEDIA_URL = '/images/'

 MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

We should head to the site's urls.py file and import some packages

 from django.conf.urls.static import static
 from django.conf import settings

This is how it should look like.

 from django.contrib import admin
 from django.urls import path, include
 from django.conf.urls.static import static
 from django.conf import settings

 urlpatterns = [
     path('admin/', admin.site.urls),
     path(' ', include('store.urls')),
    ]

Then we add this to the urls.py file. This is to add a route for the images

 urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

After this,we can upload the image using the django admin panel.

Finally, we can render the image on the html file.

 <img class="thumbnail" src="{{profile.image.url}}">

Bonus Tip

What if the image was deleted or missing. We would not want the entire website to suddenly stop working.

There are two ways of going around this error

1. Add a property decorator to the model class

 @property 
    def imageURL(self):
       try:
        url = self.image.url
       execpt:
        url = ""
       return url

2. Use an IF statement

   {% if product.image %}
       <img class="thumbnail" src="{{profile.image.url}}">
   {% else %}
       <img class="thumbnail" src="{% static 'images/placeholder. png %}">
   {% endif %}