DEV Community: Delyce Twizeyimana

PROXY PATTERN

Delyce Twizeyimana — Mon, 27 Feb 2023 09:01:58 +0000

What is a proxy.
A proxy is a stand-in for someone else, similar to JavaScript, instead of interacting with the target object directly, we'll interact with the Proxy object.

A proxy takes two arguments, the first is the object its representing whereas the second is the handler where all behaviors of how to interact with the target object are defined.

Additionally, there are two methods get() which is invoked when trying to access a property and set() which is invoked when trying to modify a property.

As the get() method takes two arguments, set() takes three, where the third is the value that you want to set

const person = {
    name: "Anonymous",
    age: 21
}

const handler = {
    get: (obj, prop) => {
        console.log(`hello`, obj[prop])
    },
    set: (obj, prop, value) => {
             console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
        obj[prop] = value

        }

    }
}

const personProxy = new Proxy(person, handler)
personProxy.name
personProxy.age = 23

Not only proxies helping us to directly interact with our target object, it can also help us in validation in order to avoid changing the target object with wrong values.
for instance on set method we can have something like this:

set: (obj, prop, value) => {

        if(value < 20){
            console.log("Small value")
        }
        else{
             console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
        obj[prop] = value

        }

    }

And user age won't accept any value less than 20

As you have seen above we are accessing or changing values using obj[props], However, there is Reflect built in method which makes it easier for us to manipulate the target object when working with proxies.

set: (obj, prop, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    Reflect.set(obj, prop, value);
  }

Proxies are a powerful way to add control over the behavior of an object.

Nanotechnology

Delyce Twizeyimana — Thu, 15 Dec 2022 14:08:13 +0000

Nanotechnology is the term given to those areas of science and engineering where phenomena that take place at dimensions in the nanometer scale are utilized in the design, characterization, production and application of materials, structures, devices and systems.

There are different opinions around nanotechnology where scientists and engineers believe nanotechnology can be used to benefit human health now and in the future through applications such as better filters for improving water purification, more effective methods of delivering drugs in medicine and new ways of repairing damaged tissues and organs.

However, Improved control over materials does not just mean better products. As with any new technology, there are concerns about unknown effects – and perhaps some extra ones, simply because nanotechnologies are so incredibly small.
This is not just because they seem insidious due to their invisibility. The properties of materials are influenced by different effects at very small scales, where quantum mechanical laws trump classical physics. And biological systems, in particular, may respond to nanomaterials in ways we don’t like.

Many areas in which nanotechnology can be applied and be beneficial has been identified, such as

Future Transportation Benefits
Environmental Remediation
Energy Applications
Medical and Healthcare Applications
Electronics and IT Applications
Everyday Materials and Processes

Nanotechnology will help improve in different areas as mentioned above, Although it has some pros and cons. Some of the pros are: It offers the potential for new and faster kinds of computers, more efficient power sources and life-saving medical treatments, there are Invisible particles that fight cancer cells, faster microprocessors that consume less energy, batteries that last 10 times longer or solar panels that yield twice as much energy. But the disadvantage of it is that those Nanoparticles can get into the body through the skin, lungs and digestive system. This may help create 'free radicals' which can cause cell damage and damage to the DNA.

To sum up, In the future, nanotechnology might help us make electrical lines, solar cells, and biofuels more efficient, and make nuclear reactors safer. Nanotechnology might lead to huge advances in health care, improving methods for detecting and treating diseases like cancer.

While there are many nanotech uses, three areas of nanotech are paving the way to our future: Materials Science, Nanomedicine and Device Engineering.

Converting big strings of number into Number

Delyce Twizeyimana — Tue, 15 Nov 2022 08:41:59 +0000

there are several ways used to convert a string to number such as

Number(str)
parseInt(str, 10)
(+str)
(str * 1) and so on.. where str is a number string like str = "123"

str = "123"
'123'
console.log(+str)
Output: 123

However, the above ways don't work when you have a very big string

let str = "6145390195186705543"
console.log(Number(str))
Output: 6145390195186705000

Here We get unexpected output, because we are dealing with a big string number.

Walk around:

BigInt values represent numeric values which are too large to be represented by the number primitive.

Using BigInt to convert a big string number

let str = "6145390195186705543"
console.log(BigInt(str))
6145390195186705543n

And here we get the expected output with n appended at the end
In case you want to do some mathematical operations on your output, yeah, it's possible e.g output + 1n

6145390195186705543n + 1n

6145390195186705544n

You can check how I used this to solve a problem on leetcode:
Question link: https://leetcode.com/problems/plus-one/

My Solution

var plusOne = function(digits) {
    let fin=[]
    let comb =singleValue(digits)
    comb = BigInt(comb)
    comb = comb +1n
    let arr = comb.toString().split('')
    for(let i=0; i<arr.length; i++){
        fin.push(Number(arr[i]))
    }
    return fin

};


 function singleValue(arr){
    let str = ""
    for(let i=0; i<arr.length; i++){
        str +=arr[i]
    }
    return str

}

CSS transition ...

Delyce Twizeyimana — Mon, 14 Nov 2022 11:46:48 +0000

When animating your CSS elements, you can prevent the effects from occurring immediately by delaying or slowing down by controlling the animation speed. That is transition

Transition has up to 6 properties which are:

transition

transition-delay

transition-duration

transition-property

transition-timing-function

N.B: If you don't specify the transition duration, no effect will occur since the default value is 0

transition-timing-function specifies the speed curve of the transition effect

it has the following values that :

ease: slow start, goes fast then ends slowly
linear: same speed from start to end
ease-in: a slow start
ease-out: a slow end
ease-in-out: a slow start and end
cubic-bezier(n,n,n,n): lets you define your own values in a cubic-bezier function N.B: n value must be between 0 and 1

Adding delay in transition

transition-delay specifies a delay in seconds for the transition effect

<div class="box">

</div>

.box{
  width: 10rem;
  height: 10rem;
  background: red;
  transition-duration: 1000ms;
  transition-property: background, width;
  transition-timing-function: ease-in;
  transition-delay: 200ms;
}



.box:hover{
  background:blue;
  width: 20rem;

}

for transition-property, when you have a lot of properties to transition its possible to write transition-property: all, However it is not recommended, it's better to specify them as its shown in the code snippet above.

Codepen link: https://codepen.io/delyc/pen/poKwWmx

Why is push() and pop() array methods said to be faster than shift() and unshift() array methods ?

Delyce Twizeyimana — Mon, 14 Nov 2022 09:24:18 +0000

Shift() and unshift() array methods are methods that occurs at the beginning of an array while pop() and push() operates at the back.

pop() and push() are said to be faster than shift() and unshift() but why is that so? Let's discuss it more down below.

let's discuss their time complexities

consider having an array of 10 elements

arr = [10, 12, 2, 3, 7, 100, 8, 28, 10, 1]

the first element is at index 0 as arrays are zero-indexed once you want to do any operation at the front of the array either adding or removing the rest of the array elements will have to be indexed

e.g * add 15 at index 0

when you do arr.unshift(15), the element that was at index 0 will need to be pushed one value behind so that the newly added value get index 0 and so on for other elements re-indexing

which is similar to arr.shift() which removed 10 and have 12 be pushed forward to occupy index 0 and so on

thus, this re-indexing will occur n number of times where n is the number of array elements

However, for push and pop since we are affecting at the back there is no need to re-index thus its on a single operation that we are doing i.e if you push something at the end the elements that existed in the array won't be affected

To sum up, we have seen that for push and pop the operation will occur only once at constant time hence their time complexity is O(1) and for shift and unshift whose operations occurs n number of times their time complexity is O(n).

which means pop and push are faster than shift and unshift because they have an efficient** time complexity** of O(1)