teleren/devto huggingface dataset:
Maximum Value of Equation of Ones with Addition and Multiplication Operations - An Interview Problem
Tags: cpp, python, career, interview
Published: 2020-07-06 03:25:45

Given an integer `n`, find the maximum value that can be obtained using`n` ones and only addition and multiplication operations. Note that, you can insert any number of valid bracket pairs.

Example:

Input: n = 12  
Output: 81  
Explanation: (1 + 1 + 1) \* (1 + 1 + 1) \* (1 + 1 + 1) \* (1 + 1 + 1) = 81

## Approach: Dynamic Programming

Observe that, in order to find the answer for `n = 5`, we need to consider the maximum answer obtainable from the answer of `2` and `3`, `1` and `4`. Thus, this problem has an **optimal substructure** property.

```text
                    5
        /                 \
    op(1, 4)            op(2, 3)
    /  \                /       \
    1   op(2, 2)       op(1, 1)  op(1, 2)
        /      \          / \      /  \
    op(1, 1) op(1, 1)    1   1    1   op(1, 1)
    / \        / \                    / \
   1   1      1   1                  1   1
```

Here, op(m, n) = max(answer for m + answer for n, answer for m \* answer for n).

Clearly, from the tree above there are a lot of **overlapping sub-problems**. Owing to this and optimal substructure property, this problem is an ideal candidate for dynamic programming.

**Bottom-up approach:**

C++ code:

```cpp
#include<iostream>
#include<vector>
#include<algorithm>
using namespace std;

long long getMaximumValue(int n) {
    vector<long long> dp(n + 1);
    // dp[i] denotes maximum value that can be obtained from i ones
    dp[0] = 0; // base case: with 0 ones answer is always 0
    dp[1] = 1; // base case: with 1 one answer is 1
    for (int i = 1; i <= n; ++i) {
        for (int j = 1; j <= i / 2; ++j) {
            dp[i] = max({dp[i], dp[j] + dp[i - j], dp[j] * dp[i - j]});
        }
    }
    return dp[n];
}

int main() {
    cout << "n = " << 5 << " Maximum possible value " << getMaximumValue(5) << endl; // prints
    cout << "n = " << 12 << " Maximum possible value " << getMaximumValue(12) << endl; // prints "81"
    return 0;
}
```

Python code:

```python
def getMaximumValue(n):
    dp = [0] * (n + 1)
    # dp[i] denotes maximum value that can be obtained from i ones
    dp[0] = 0 # base case: with 0 ones answer is always 0
    dp[1] = 1 # base case: with 1 one answer is 1
    for i in range(2, n + 1):
        for j in range(1, i // 2 + 1):
            dp[i] = max(dp[i], dp[j] + dp[i - j], dp[j] * dp[i - j])
    return dp[n]

if __name__ == ' __main__':
    print('n =', 5, 'Maximum possible value', getMaximumValue(5))
    print('n =', 12, 'Maximum possible value', getMaximumValue(12))
```

Time Complexity: `O(n)`
Space Complexity: `O(n)` due to storing states in `dp` array

**Exercise**: Code the top-down approach.
Create a reading progress indicator (on scroll) in JavaScript
Tags: css, javascript
Published: 2020-07-06 03:19:28

Reading progress indicators are generally used on long form articles.

They provide a visual clue for readers indicating how far they are from the end of an article.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nxq3mh6eu5gi0rrmrmja.gif)

Let’s get started by adding the basic markup for the progress bar to our HTML.

```html
<div id="progress-bar"></div>
```

Next the CSS.

The transition makes the changing of the width appear smoother, you may prefer it without.

```css
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  z-index: 99;
  background-color: #b22222;
  transition: width 1s;
}
```

With the HTML and CSS in place we can start to build the functionality with JavaScript.

First we define our progress bar element.

```javascript
const progressBar = document.getElementById("progress-bar");
```

Next we add a function to detect how far a user has scrolled and set the progress bar width accordingly.

```javascript
const setProgressBar = () => {
  let scrollDist = document.documentElement.scrollTop || document.body.scrollTop;
  let progressWidth = (scrollDist / (document.body.scrollHeight - document.documentElement.clientHeight)) * 100;
  progressBar.style.width = progressWidth + "%";
};
```

Last we check if the page contains a progress bar.

If it does then we call the setProgressBar function when the user scrolls the browser.

```javascript
if (progressBar) {
  window.addEventListener("scroll", setProgressBar);  
}
```
Day 35 : #100DaysofCode - A Code Challenge Completed
Tags: 100daysofcode, codenewbie
Published: 2020-07-06 03:13:40

The weekend is over so better content coming soon, but today I completed code challenges, which was cool. 

The ones that I completed were relatively easy, but it still feels good to be able to find solutions to coding challenges as a "codenewbie" 

<h3> Challenge 1 - Remove the vowels from a string </h3>

The challenge asked for me to create a function that takes a string as an argument and returns a new string with all vowels removed.

I wrote the following code: 

```
def disemvowel(string) 
  string.gsub(/[aeiouAEIOU]/, '')
end
```

It worked perfectly and I was able to move on to the next challenge. However, as I go through challenges I realized that I do not only want to find the "answer" but I want to find multiple ways to solve the answer. So I also found another way to solve the problem using <a href="https://apidock.com/ruby/String/tr"> tr </a> which "returns a copy of str with the characters in from_str replaced by the corresponding characters in to_str." :

```
def disemvowel(string)
  string.tr('aeiouAEIOU', "") 
end
```

Both ways will work but as a software engineer it is important to constantly find different or new solutions for all problems that are presented to you. The same code can be written in many ways and in many different languages, it is important to learn and know different solutions for various issues that may arise. 

Excited for future code challenges and the solutions I develop.

Song of the day:

{% soundcloud https://soundcloud.com/say3beats/saye-afro-kaytra %}
Know when Ajay Devgan's Maidan film will be released
Published: 2020-07-06 02:58:02

Maidan movie - Bollywood filmmaker Ajay Devgan is very happy with the success of his film Tanaji-The Unsugn warrior, Ajay became the next Project Main busy after the release of this film. His project is on top of a biopic in which Ajay Devgan is working on the biopic of Indian football team coach Saeed Abdul Rahim, the name of this movie is Maidaan.

Love first look of Ajay Devgan's movie maidaan is shared on his social media account. While sharing this, Ajay Devgan has also announced its release date. Earlier this movie was to be released on 27 November 2020.

Maidaan movie review and release date
But due to coronavirus, the release date of this movie has been postponed because 35% of this movie is still shooting.

Why did the shooting of the Maidaan movie stop?
Although the shooting of this film was supposed to start on 21 March 2020 but due to coronavirus, the film stopped shooting due to which the producer is losing Rs. Due to which it is costing millions to maintain it.

Now the entire set has been broken, now the new set is being prepared. The first schedule of the film and the second schedule have been completed in Mumbai, now the third schedule will start in Kolkata from 3 Novmber.

Maidaan movie review and release date
Maidaan movie review in Hindi
In this movie, Golden Era of Indian Football is shown. In this film, the journey of Indian football team from 1952 to 1962 is shown. The film is based on the true story of Abdul Rahim, the manager and coach of the football team. The film stars Abdul Rahim as Ajay Devgan.

At this time the football team gained international fame. This film is directed by amit Ravindra Sharma aur Boni kapoor is producing this film.

Maidaan movie review and release date
It stars Ajay Devgan in the film as Ajay Devgan opposite Jahnvi Kapoor and south movies actress Kriti Suresh is also working in this movie. Kirti Suresh that this will be Bollywood's first debue movie.

The release date of this movie is 13 August 2021. The film will be released in Hindi, Tamil, Telugu and Malyaalam languages. The release of this film has been given by ajay devgan himself on his Instagram.
https://hellohindime.com/maidaan-movie-release-date-review-in-hindi-2021/
Fizzbuzz
Published: 2020-07-06 02:56:13

Fizzbuzz is a test that was devised to filter out 99.5% of candidates who are very weak programmers. It also shows what style of programming people use, as this question can be handled a many number of ways. 

Here is the problem: Write a program that outputs the string representation of numbers from 1 to n. But for multiples of three it should output “Fizz” instead of the number and for the multiples of five output “Buzz”. For numbers which are multiples of both three and five output “FizzBuzz”.

Before I tackled this question, I thought more about scalability than just immediately answering the problem. I had thought if I hashed the keys and the values, I would be able to add more keys if it was needed. Here is my original solution: 
```js
var fizzBuzz = function(n) {
    
    
    let result = []
    let fizzObject = {
        3: 'Fizz',
        5: 'Buzz',
        // 7: 'Jazz'
    } 
    let numArray = [3,5]
    
    for(let i = 1; i < n + 1; i++){
        let result_str = ''
        numArray.map((key) => {
            if(i % key === 0){
               result_str += fizzObject[key]
               }            
        })        
        if(!result_str){
            result_str = i.toString()
        }
        result.push(result_str)
    }    
    return result
};
```
Notice the commented out "7" key and value "Jazz". If I wanted to extend this solution, I can do it easily! However, it is very slow. So I tested out my other solution to see how fast, albeit naive, it is:

```js
var fizzBuzz = function(n) {
    let result = [];
    for (i = 1; i <= n; i++) {
        if (i % 3 == 0 && i % 5 == 0) result.push("FizzBuzz");
        else if (i % 3 == 0) result.push("Fizz");
        else if (i % 5 == 0) result.push("Buzz");
        else result.push(i + "");
    }
    return result;
};
```

This solution is much faster, but it may become messy depending on how many lines of code you need to add to account for new modifications.
Center elements in CSS like a boss
Tags: webdev, css, discuss
Published: 2020-07-06 02:36:43

I found that a lot of devs are confused when it comes to center element in CSS. 👀
Here is the trick I always use when starting a web development project.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mjtoqk54n6x0wzxkrm46.jpeg)
Here is the gist link : https://gist.github.com/Kolawole39/b39693399dd8851a6e9e95c10a61b70a
And you? How do you proceed? Please feel free to comment.👇
Responsive Websites: Media Queries 
Tags: html, css, design
Published: 2020-07-06 02:32:49

Hi friends! 

Today I want to tell you a little bit about media queries! Let's keep it short and simple as usual, yes?

# What is a media query?

THIS is a media query:
<center>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mjtdge24ki2ss685a6hg.png)</center>

Simple looking, right? 

Our media queries specify what css to display in a browser given a device's specific dimensions. It gives our browser information about the device a user is on, the width of that device, and the orientation of the device, amongst other things. 

Without specifying a type of media like say, "print" or "screen", the query will default to "All". Read about more media query types <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">here</a>. 

# What goes in a media query?

<center>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m09ff75ogjgrdkic7xae.png)</center>

As you can see, we create the @media rule, add the query type, and then specify widths. Not all media queries will include both a min and max width, but notice that you can specify different conditions using logical operators. 

# What does this mean for mobile-first design?

Well, this means that you should design websites mobile-first, and then use media queries to size up your sites, not down. 

*tablets: use a min-width of 768px. 
*desktops: use a min-width of 1200px

These are pretty good standards according to Skillcrush. 

# DON'T FORGET
Don't forget to include the following line of code in the head tag of your html!

<center>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w6qa7b4h9acmjem1boq8.png)</center>

It is the HTML5 method that allows us to control the size of the viewport, or the user's visible screen, and gives it instructions for the width and scale. Read more about it <a href="https://www.w3schools.com/css/css_rwd_viewport.asp">here</a>.

<br>
Care to see an example of media queries in action? 

Tada! 

```css
body, html {
      font-family: Gotham, Helvetica, Arial, sans-serif;
      font-size: 1em;
      text-align: center;

    }

    section {
      width: 50%;
      margin: auto;
    }

    h1 {
      font-size: 2em;
      color: #7b7d70;
    }

    h2 {
      font-size: 1.5em;
      color: #4eafb8;
    }

    p {
      color: #ff8641;
    }




/***** TABLETS *****/
@media (min-width: 768px){
  h1 {
    color: #02cbd2;
  }

  h2 {
    color: #fcc02a;
  }

  p {
    color: #7b8f8e;

  }
}


/***** DESKTOPS *****/
@media (min-width: 1200px){
  h1 {
    color: #6e4b61;
  }

  h2 {
    color: #cabd61;
  }

  p {
    color: #c19e74;
  }
}
```

This CSS is written mobile first, which is why we don't specify the widths for viewport widths smaller than 768px. Then, we create a note in our CSS to separate sections for tablets and desktops. Notice the min widths, as well as the lack of a media query type.


#That's all, folks! 
As always, feel free to comment, critique, and make suggestions! Happy coding!
Rest Parameters and Spread Operators in Javascript
Published: 2020-07-06 02:28:36

Javascript has a functionality where depending on where it's used, `...` can either be a `rest parameter` or a `spread operator`.

### Spread Operators

`spread operators` allow an iterable object like an `array` to be expanded, unpacking each element from the `array`. 

```js
let fourToSix = ['four', 'five', 'six']
let numbers = ['one', 'two', 'three', ...fourToSix ]

=> ["one", "two", "three", "four", "five", "six"]

```

### Rest Parameters

A `rest parameter` will bundle up all remaining elements in a parameter into an `array`. 

```js
const greetings = (friend, ...everyoneElse ) => {
  console.log(`Hello, ${friend}!`)
  everyoneElse.forEach(person => console.log(`Nice to meet you, ${person}!`))
}
 
greetings('Lei', 'Cierra', 'Aiden', 'Pierre', 'Miranda')
```
```bash
=> Hello, Lei!
=> Nice to meet you, Cierra!
=> Nice to meet you, Aiden!
=> Nice to meet you, Pierre!
=> Nice to meet you, Miranda!
```
Why does indexing in arrays start from zero?
Tags: javascript, java, c, python
Published: 2020-07-06 02:18:23

Prehistory: the idea to write this article appeared after the exam on programming and algorithmization, during which I proved to the teacher for about an hour that the program written by me works correctly.

The task was the simplest one, in which I needed to perform certain operations with the element number n (read n from the standard input thread).  And the teacher, setting n = 100, for example, saw that the 99th element was changing...

Let's get to the point.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sjlyj5n0bbb927etft9x.jpg)
Why do we count from zero, and not from one, because it would be easier for everyone?

The point is that the array index is the shift of an element address in memory by an average number of bits relative to the beginning of the array (the first element) calculated by the formula n * size where n is the element index, size is the number of bits occupied by one array element (it depends on the data type).

For example, if we have an array numbers[] that contains elements of an integer data type (int) that occupy 4 bytes each, i.e. 32 bits (more details below), the shift of an element with index 5 (numbers[5]) relative to the beginning of the array will be 5 * 4 bytes = 20 bytes = 160 bits.

Here we can conclude that the first element in the array is the one with index 0, since we will get the numbers[] array above by the example:  0 * 4 bytes = 0 bytes = 0 bits.  The shift relative to the beginning of the array is 0 bits, which means that the element numbers[0] is the first element.

We can also make sure that the numbers[1] element is not the first element, as it is shifted from the beginning of the array by 8 bits.

So don't confuse and ask people around you not to confuse "element with number 3" and "third element".

More about 32 bits occupied by the int type.  The number of bits allocated by modern compilers for int type data on 32-bit systems and processors is given.  On 16-bit platforms 2 bytes are most often allocated, that is 16 bits.

Hope the article was useful.
Readability vs Fewer Lines of Code
Published: 2020-07-06 02:04:50

This is a trade off that I've struggled with. Some ways you might be able to see this in my code is seeing a mixture of single line conditional statements such as,
``` if (condition is met) return something```
multiple line if statements with curly braces, such as
```if (condition is met) {
      return something
   }```
and an even shorter conditional
``` conditionToMeet && return something```.
They all do the same thing, however I feel I must be consistent with the way I implement my conditionals. And the difference is when you need to add an else statement. I just don't like having multiple different ways. I'm not sure. This is something I have to think about more.
Predefined parameters can be default value for next ones
Tags: todayilearned, javascript
Published: 2020-07-06 01:58:43

JavaScript ES6 allow us to initialize named parameters with default values.

But cooler than that is knowing that we can use earlier defined parameters as default value for the next function parameters. Examples:

```javascript
function createContainer(height = 180, width = height) {
    return [height, width]
}
createContainer() // [180, 180]
createContainer(300) // [300, 300]
createContainer(120, 240) // [120, 240]
```

```javascript
function greet(name, salute = 'Hello', message = `${salute}, ${name}!`) {
    return [name, salute, message];
}

console.log(greet('Beatriz')) 
// ['Beatriz', 'Hello', 'Hello, Beatriz!']

console.log(greet('Beatriz', 'Good Morning'))
// ['Beatriz', 'Good Morning', 'Good Morning, Beatriz!']

console.log(greet('Beatriz', 'Hi', 'Thank you ;)')) 
// ['Beatriz', 'Hi', 'Thank you ;)']
```
How to use BEM
Tags: css, webdev
Published: 2020-07-06 01:23:10

<meta name="monetization" content="$ilp.uphold.com/q7fd2nAFqDWb">
You may have heard of a CSS technique called BEM. It stands for **Block Element Modifier**, and that is just a naming convention for your CSS elements. Naming conventions are needed for just about every single identifier in every language because they establish a commonly agreed-on interpretation for a particular pattern of characters. Naming conventions are present from the case of your variable names in programming languages to names given to keys and their children of a JSON or XML document.

BEM is an extraordinarily simple naming convention because is only has three kinds of names: blocks, elements, and modifiers. I would like to explain the meaning BEM gives to each of these terms before talking about how they are written in code.

I like to view **Block** as a unit of HTML that can be displayed by itself on a blank page without other supporting classes. For example, a modal dialog you design can be considered a block.

As for **Element**, that is a child of a block, which theoretically can be displayed on its own but not without losing the semantic design of your block/ If you display a yes button without its modal dialog then you are no longer displaying a modal dialog.

A **Modifier** is a CSS class which changes the CSS properties of blocks and elements but cannot be displayed by itself, because it only exists as a CSS class. A Modifier would be like creating a blue border when you hover over the yes button.

## The naming convention itself

Tag names and IDs are frowned upon in BEM and aren't used in naming, instead class names are used exclusively.

For a block, the selector is a single class name such as `.block { color: #042; }`.

For an element, we put the name of the block selector, followed by two underscores, and then the element selector name: `.block__elem { color: #042; }` You can also style elements that are under a node with a specific modifier using `.block--mod .block__elem { }`. This will style all `block__elem` elements under a node that has the `block--mod` class.

A modifier for a block has the block selector name, followed by two dashes and then the modifier selector name, and looks like this `.block--hidden { }`. An element modifier looks the same but with the block name replaced with the element name: `.block__elem--mod { }`

## Concrete example

Suppose we have the following CSS:

```css
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }
```

The `form` selector is a block, an HTML form, `input` and `submit` are elements, which are buttons, and `theme-xmas`, `simple` and `disabled` are the modifiers. The element and modifier names begin with the block name in the CSS, but only because this is required CSS syntax. In other words, in user interface diagrams you wouldn't label the elements and modifiers with `form__` or `form--` at the beginning.