DEV Community: Sam Sonter

Simple Toggle Button(On/Off)

Sam Sonter — Mon, 21 Mar 2022 18:08:00 +0000

Hi guys, I was doing a project that required an ON/OFF switch. I kinda had a tough time creating a switch button. After finding my way around, I thought this migth be helpful for other people.


    <div class="container">
        <div class="toggle">
            <div class="toggle-btn" onclick="Animatedtoggle()"></div>
        </div>
        <div class="text">OFF</div>
    </div>

Create elements "toggle", "toggle-btn", and a "text" with OFF property. Create a button property inside the the toggle-btn div.

let toggle = document.querySelector(".toggle");
        let text = document.querySelector(".text")
        function Animatedtoggle(){
            toggle.classList.toggle('active');

            if(toggle.classList.contains('active')){
                text.innerHTML = "ON";
            }
            else { 
                text.innerHTML = "OFF";

            }


        }

queryselect element ".toggel" to variable toggle.
do the same thing with "text".
classList toggle ('active') and then write a if loop for true "ON" and else "OFF".

Below is the full code template including stylesheet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <div class="container">
        <div class="toggle">
            <div class="toggle-btn" onclick="Animatedtoggle()"></div>
        </div>
        <div class="text">OFF</div>
    </div>
    <script>
        let toggle = document.querySelector(".toggle");
        let text = document.querySelector(".text")
        function Animatedtoggle(){
            toggle.classList.toggle('active');

            if(toggle.classList.contains('active')){
                text.innerHTML = "ON";
            }
            else { 
                text.innerHTML = "OFF";

            }


        }
    </script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    position: relative;
    background: aquamarine;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.container .toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 40px;
    background: rgb(8, 0, 15);
    border-radius: 55px;
    cursor: pointer;
    transition: 0.3;
}


.container .toggle .toggle-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 30px;
    background: rgb(132, 115, 148);
    border-radius: 25px;
    transition: 0.3;
}

.container .toggle.active {
    background:whitesmoke;

}

.container .toggle.active .toggle-btn {
    left: 40px;

}

.text {
    position: absolute;
    left: 2.5cm;
    font-size: 1.5rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin-left: 8px;

}

PLS FOLLOW MY TWITTER HANDLE

Anybody here familier with RactiveJS(not react Js)?

Sam Sonter — Tue, 15 Mar 2022 18:12:43 +0000

Important Javascript functions you have to know to be a better developer

Sam Sonter — Sat, 05 Mar 2022 09:31:18 +0000

Hi everybody, today I am going to show examples of few important Javascript functions.

DEEP COPY

JavaScript allows you to deep copy an object by converting it into string and then back into object.

Here is an example:

const deepCopy = (obj) => { 
JSON.parse(JSON.stringify(obj)) 
};

WAIT FUNCTION

Javascript can do a ship with a setTimeout function,
but it does not return a promise object, making it hard to use in async functions. So, we have to write our own wait sleep function.
Here is an example:

const wait = new Promise((resolve) => setTimeout(resolve, ms));

const asyncFunction = async() => {
    await wait(1000);
    console.log("async");

};
asyncFunction();

Intersection Observer

You can check if an element is visible at viewport.
I am going to make use of intersectionObserver()
to check if an element is visible in the viewport.


const callback = (entries) => {
        entries.foreach((entry) => {
                    entries.forEach((entry) => {
                        if (entry.isIntersecting) {
                            //enter target in dom element.
                            //e.g entry.target.classList.add('animated');
                            console.log(`${entry.target} is visible`);
                        }
                    });
                };

                const options = {
                    threshold: 1.0,
                };

                const observer = new IntersectionObserver(callback, options);
                const btn = document.getElementById('.btn');
                const bottomBtn = document.getElementById('.bottomBtn');

observer.observe(btn); 
observer.observe(bottomBtn);

Customize the behavior of the observer using the option parameter. threshold is the most useful attribute.
It defines the percentage of the element that
needs to be visible in the viewport of the browser trigger.

HIDE ELEMENTS

you can toggle the visibility of an element using the style. visiabilty property and in case you want to remove it from the render flow, you can the style.display property.
Here is an example:


const hideElement = (element, removeFromFlow = false) => {
    removeFromFlow
        ?
        (element.style.display = 'none') :
        (element.style.visibility = 'hidden');
}

GET URL PARAMETERS

Easy search of parameters from a URL objects.
Here is an example:

const url = new URL(window.location.href);
const paramterValue = url.searchParams.get("pramaName");
console.log(paramterValue);

DECTECT DEVICE TYPES

Use navigator.UserAgent to detect the device running the app.
Here is example:

const dectectDeviceType = () =>
    /Andriod|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
    ) ?
    "mobile" :
    "desktop";
console.log(dectectDeviceType);

If you dont remove an element from the render flow , it will be hidden , but its space will be occupied. it is highly useful while rendering long list of elements.
The elements not in view can be tested using IntersectionObserver Can be hidden to provide a performance boost.

Essential Front-end Interview Questions.

Sam Sonter — Tue, 22 Feb 2022 03:48:57 +0000

1. Why are doctypes used in HTML?

Doctypes are not tags nor HTML elements but are document types declaration.
The documents are used or stated to tell the web browser about the html version or any markup language tha is used on the current page.

2. State ways of getting elements from a dom DOM.

getelementbyID
getelelementbyclassname
getelelementbyselector
getelelementbytagname
getelelementbyselectall

3. What is semantic HTML

Semantic HTML is used to to structure content appropriately so that they are displayed properly.
Structural content is what makes HTML pages readable. Also, properly structed content help search engnes understand web pages better and pushes the websites search rank higher.

4. What are the advantages of using CSS preprocessors?

CSS preprocessors facilitate adding variables and functions to increase code reusability.
CSS preprocessors makes code management easier.
It allows grouping of parent amd child elements into modular blocks.
Multiple stylesheets can be joined into one, using CSS preprocessors.

5. List common use cases for anonymous functions

They are used as arguments in other functions.
They are used to create and invoke immediate invokable function expressions.

6. Describe session storage.

Session storage & Local storage. - as the name suggests, this data is stored until the session or tab is closed. However, it is not cleared during tab reloads.

Local storage - this data is stored on the clients computer. The data has no expiration
however, it is limited only to string data. Local data can be accessed using JavaScript and HTML but cannot be transfered to the server-end.

7. What are higher-order functions.

Higher-order functions are functions that operate on other functions. They either take other functions as arguments or return them.

Follow me on Twitter for more tips.

JAVASCRIPT SPREAD OPERATOR

Sam Sonter — Mon, 21 Feb 2022 05:59:37 +0000

Hi everyone, I am here again with tips on how to write easy simple and clean code.

Going forward I will state an example on how to practice the use of Spread Operator

Look at the code snippet below (using objects & arrays to shallow and copy)

const newObject = {};
Object.keys(oldObject).forEach((key) => {
    newObject[key] = oldObject[key];
});


const newArray =[];
oldArray.forEach((element) => {
   newArray.push(element);
});

You can easily re-write that code in a much more simple way. Life will be much more easier for anyone reading your code.

const newObject = { ...oldOject };
const newArray =[ ...oldArray ];

Thanks for reading and happy coding.
SAM SONTER

The Difference between Static and Class methods in Python.

Sam Sonter — Fri, 04 Feb 2022 00:25:45 +0000

Object-oriented programming is a programming paragdigm that relies on the concept of objects.
These objects can have properties and their methods.

They are three types of methods in python:

Instance method
Class method
Static method

Instance method is the most comman type of method used in python class. To call an instance method, you need to create an object of the class and with the help of that object you can access instance method.

On other hand, both class method and static method can be accessed directly by using class name i.e without creating object of class. Though you can also access these methods using object of a class.

Class and Static methods have some basic differences. Let's have a look over the difference between class and static method.

Class method

A class method is a method which bounds to class rather than object or instance of the that class.
Class methods can be created using @classmethod
decorator.
It takes first parameter as class or any variable name which points to the class itself.
It can access and modify the state of the class, that will be applicable across overall classs and its instances.

class classExample:
    @classmethod
    def class_method(css, arg1, arg2, ...):
    # methody body

EXAMPLE:

class classExample:
#create variable
    x = 2
    @classmethod
    def modify(cls):
    cls.X = 5
    print(cls.x)

print(classExample.x) #2
obj = classExample()
print(obj.x) #2
classExample.modify() #5
print(classExample.x) #5

print(obj.x) #5
obj.modify() #5

As you can see, in the example an initial value of x is 2.

But when we modify the value x using class method i.e
modify(), its value changes to 5, which indicates that a classs mehtod can access and modify the state of class.

Static method

Static method is similar to class method, which also bounds to a class rather than object of that class.
Static method can be created using @static method decorator.
It doesn't take any specific first parameter like as in class methods.
It cant access and modify the state of the class

class staticExample:
    #create variable
    x = 2
    @staticmethod
    def modify():
        x = 5
        print(x)
staticExample.modify() 
print(staticExample.x)
obj = staticExample()

print(obj.x)
obj.modify

Sam Sonter

Easy use of F-Strings with Python.

Sam Sonter — Mon, 15 Nov 2021 01:48:12 +0000

F-Strings

Here, I am going to jump straight to printing out strings with Python. Take a look at this code using place holder format method.

    first_name = 'sam'
    last_name = 'sonter'

    intro = "My name is {} {}".format (first_name,last_name)
    print(intro)

    output:  My name is sam sonter

Python can also allow us to use the F-String to get same output. Check this out.

    first_name = 'sam'
    last_name = 'sonter'

    intro = f"My name is {first_name} {last_name}" 
    print(intro)

    output:  My name is sam sonter

I got rid of the format method and introduced the F string. I now put the variables inside the placeholders making the block of code easier to understand.

Now, I am going to use a dictionary in the next example.

    person = {'name': 'Sam', 'height': 188}
    sentence = "My name is {} I am {} cm tall".format(person['name'],person['age'])

    print(sentence)

The next example is pretty much the same with the first one except here we are using a dictionary. Now, let's use the F string.

    person = {'name': 'Sam', 'height': 188}
    sentence = f"My name is {person['name']} I am {person['height']} cm tall"

    print(sentence)

Many people might make syntax errors by using the wrong quotes. If you pay attention you can see i used double " outside my statement and single ' inside the statement to avoid syntax errors.

That is it for this article, thanks for reading and I hope you find this useful.
Sam Sonter

Hello everyone, I am currently looking forward on collaborating with webdevs on joint projects.

Sam Sonter — Thu, 11 Nov 2021 21:59:25 +0000

Here is my github ID:asapsonter
https://github.com/asapsonter
Twitter handle: asapsonter

PYTHON TRICKS FOR WRITING CLEAN AND EASY READABLE CODE.

Sam Sonter — Tue, 09 Nov 2021 05:31:57 +0000

Hello everybody, Today I am going state and explain few python tricks with examples.

        TERNARY OPRATORS/CONDITIONALS

Ternary oprators/conditionals evaluate code on True or False. It allows a single line replacing multi-line if and else statements. This basicaily replaces multi-line code but still makes the code understandable.

Re-write using Ternary

Now we have both if/else statement on a single line. Making the code simple and easier to read.

          ENUMERATE FUNCTION

This is a built-in python function that eases the task of interating through lists/tuples.
Enumerated objects can be used directly in loops or converted into tuples using list() method. Here is an example:

I am now going to state a cleaner code using Enumerate function

      WRITING SIMPLIFIED NUMERIC LITERALS

I will show use to use _ to simplify large numeric literals in code.
In the following example i will use an underscore help read large numeric values and an f string for easy read of its output.

404 Error

Sam Sonter — Mon, 01 Nov 2021 15:14:54 +0000

404 Error

What is a 404 error? It is commonly known as "404 page not found". This means the server is trying to tell us the requested webpage is not found on the server.

Causes Of Occurence

The URL or its content (such as files or images) was either deleted or moved (without adjusting any internal links accordingly)
The URL was written incorrectly or typed in the broswer incorrectly
DNS server complications
Junk files in current browser
The entered domain name doesn’t exist (anymore)
Error or broken HTML pages(broken HTML templates codes)

Forms Of Occurance

404 error
404 not found
HTTP 404 not found
Error 404
404 page not found
The requested URL was not found in server

How To Fix a 404 Error

Reload the page: It might be that the error 404 has appeared for the simple reason that the page did not load properly. This can be checked quite easily by clicking on the ‘Refresh’ button in your browser or also by pressing the F5 button.

Check the URL: Regardless of whether you have entered the URL address manually or been directed via a link, could be that a mistake has been made. For this reason you should check the specified path of the website. It could be that either you, or the person who entered the link, has mistyped something. Apart from spelling mistakes, it could also be that forward slashes have been left out or misplaced. But bear in mind that this can only really be checked with ‘clean’ URLs, as they contain unreadable words instead of incomprehensible abbreviations, letters, numbers, and symbols.

Go back through the directory levels: For example, if a URL of the following structure example.com/Directory1/Directory2/Directory3 causes a 404 error page, then you can always go back to the previous directory level (in this example: example.com/Directory1/Directory2) in order to check whether the desired page is linked there. All you need to do is clear the last directory in the URL. The link for the page you are looking for should be visible on the previous page. If it is not to be found on that page then you can also go back to the previous page and look for the correct link there. But if it so happens that this method is also successful and you eventually end up back on the homepage, then move onto the next tip.

Use the website’s search function: Many websites offer a search function as part of their homepage. By entering one or several keywords, it can help you find the specific page that you are looking for.

Use a search engine: You also have the possibility of using the website of your choice to find a website. As long as the desired site exists, you should be able to find it by entering the website domain and/or a keyword transcription of the subject matter.

Delete the browser cache and cookies: Ifyou can access the website from another device, and the HTTP 404 error only seems to appear on a certain computer, then the problem could lie with your browser. Therefore you should delete the browser cache as well as all cookies for this site, and this may then finally allow you to access the page.

Search engines, such as Google and Bing, will have a negative impression of a site if it has many 404 errors. Once the crawlers have established that many requests are being met with 404 codes, it presumes the site isn’t very well maintained.

Aarga Sam

RUBY, C++

Sam Sonter — Sun, 31 Oct 2021 23:26:58 +0000

Why do most people hate Ruby on rails and C++?

PyDictionary

Sam Sonter — Thu, 21 Oct 2021 01:15:42 +0000

Any knows an alternative for PyDictionary?