teleren/devto huggingface dataset:
Modern JavaScript that Internet Explorer 11 dislikes
Tags: javascript, ie11, jquery
Published: 2021-02-22 07:42:36

---
title: Modern JavaScript that Internet Explorer 11 dislikes
published: true
date: 2021-01-29 00:00:00 UTC
tags: javascript, ie11, jquery,
canonical_url: https://glpzzz.dev/2021/01/29/modern-javascript-that-ie-dislike.html
---

Yesterday I was call to fix some issues on a website I “fixed” some weeks ago. Main thing was to update the theme (Wordpress). They had a lot of old stuff, 3rd party libraries and the sort of stuff that you can expect of something written on 2017.

The biggest change was migrating forms validation to checking values on change, and before submit to the native HTML5 validation techniques.

And as part of the job I started to write the JavaScript code using the native features instead of jQuery or other “tricks”.

Now, I have to fix some stuff again because on 2021 there is some people still using Internet Explorer 11 (IE11).

Things that does not work:

- Arrow functions 
  - changed to old `function()` functions
- `{variable}` interpolation 
  - changed to old `Array.prototype.replace()`
- native `Array.prototype.forEach()`
  - changed to `$.each()` from jQuery (good in the context)
- native `String.prototype.replaceAll()`
  - changed to `String.prototype.replace(RegExp, string)`

The list is in construction…

PS: Thanks to my colleagues `epgeroy` and `geekmidget` for the remote debugging as I don’t have IE11 on my Ubuntu machine.
How To Set Up Tailwind and Typescript in Next.js IN ONE STEP
Tags: nextjs, typescript, tutorial, react
Published: 2021-01-28 23:30:43

**Run `npx create-next-app [your-project-name] -e https://github.com/wwsalmon/next-tailwind-typescript-example`.**

That's it. `cd` into your project and get to work with Typescript and Tailwind fully set up, no extra frills included.

I made [`next-tailwind-typescript-example`](https://github.com/wwsalmon/next-tailwind-typescript-example) after manually setting up Typescript and Tailwind a few too many times. `create-next-app`, Tailwind, and Next make manual set up easier than ever, but it's still tedious to do it over and over again.

If you're curious, though, here's what the six-step manual setup looks like:

1. Run `npx create-next-app [your-project-name]` to get a Next project created and packages installed and such.
2. Install Typescript with `npm i typescript @types/react @types/node`. Rename all your `js` files to `tsx` ones. `tsconfig.json` and `next-env.d.ts` files will be created when you first run `npm run dev` or `next dev`, so you don't have to worry about any manual config.
3. Install Tailwind with `npm i tailwindcss postcss-preset-env -D`.
4. Create a `postcss.config.js` with the following contents:
	
	```
	module.exports = {
	    plugins: ['tailwindcss', 'postcss-preset-env'],
	} 
	```

5. Create a `tailwind.config.js` with the following contents:
	
	```
	module.exports = {
	  purge: [
	    './**/*.html',
	    './**/*.tsx',
	  ],
	  theme: {},
	  variants: {},
	  plugins: [],
	}
	```
	
6. Add the following to the top of your `global.css` file:
	
	```
	@tailwind base;
	@tailwind components;
	@tailwind utilities;
	```


Now get cracking away at whatever you're building!

I like to strip out `create-next-app`'s default contents as well, i.e. deleting `Home.module.css`, deleting the contents of `public` and `pages/api`, and clearing the contents of `index.js` and `global.css`. I also add a `_document.tsx` file to make it easy to link Google Fonts, for example. All of these configurations are made in my example repo.

*Originally published [on my blog]()*
What are Algorithms?
Published: 2021-01-28 23:24:34

In basic terms, an algorithm is a series of instructions that are followed to do something. In computing, algorithms provide computers with a guide to complete an action or multiple actions. 

A computer program is an algorithm, written in a programming language, that a computer can understand and execute. Computer algorithms need to be precise, you’ll usually “if”, “then” or “else” inside a computer algorithm. If the algorithm isn’t specific, the algorithm usually fails meaning the output of the algorithm will not be what it is supposed to be!

There are different types of algorithms that are meant to handle different tasks. Here are a few different types of computing algorithms:

Sort Algorithms - this type of algorithm is used to rearrange a given array or list elements using a comparison operator on the given elements.

Search Algorithms - this type of algorithm is used to locate specific data inside a collection of data. 

Hashing Algorithm - This type of algorithm is used to encrypt data. It inserts random characters into a given input and outputs the hashed input.

I hope you have learned a little from this high level overview of algorithms! Thanks for stopping by!
Day 297 : Link Up
Tags: hiphop, code, coding, lifelongdev
Published: 2021-01-28 22:55:11

_liner notes_:
- Professional : Today was the last day of our team retreat. Saw some more presentations from what team members have been working on. Then afterwards we got to kind of hangout and play some online games. After all that, I got to speak with the person that built the thing that I'll be adding some more functionality so I can make sure I knew where everything was and how it was done. Spent the rest of the day, getting it set up on my local machine.

- Personal : Last night I worked on getting the slides and audio recording to link up. Ran into an issue where the way I was triggering an action based on the audio position was skipping some actions. I have to think about how to do it another way. I think the issue is that there are actions where the timestamps are really close to each other. I think I have the logic worked out in my mind, just need to code it out. I'll work on that this weekend.

![Looking into a valley in Lakeland, England where two mountain ranges converge in the distance](https://dev-to-uploads.s3.amazonaws.com/i/pixzstweka7gx60g2y2c.jpg)

Going to play around with trying to get a video uploaded to storage, not from my local machine but from another storage location. Spend some time on that and then work on putting together the radio show for this week.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube RdB3lQm75cg %}
What is Array.map and How to Use It
Tags: javascript, map, basics
Published: 2021-01-28 22:41:45

While interning as a software engineer at AMEX, I've come to learn you can write the same line of code a thousand different ways, only ever so slightly more concise every time. Most of the time I can also find myself using a certain method without any regard as to how it is more beneficial to use than any other. One piece of code that I recognized became more often used in my arsenal is the <code>Array.map</code> method. I decided to take this opportunity to learn more about the method and share those thoughts.

# What is it?
<code>Array.map</code> is a function that creates a new array by calling a function on each element in an array.  Essentially, it's a loop in which the goal of that loop is to create a new array from a given array. 

# Imperative vs Declarative Programming
To understand <code>Array.map</code> and what it does, it helps to understand what imperative and declarative programming is. Imperative programming uses statements to mutate the state. Prior to using <code>Array.map</code>, I may have used a  <code>for</code> loop to push items into a new array.  

#### Imperative Programming
In this example I have an array of objects that contain some user data. Let's say my goal is to take this array of objects and convert it to an array of strings that only contain the usernames. I can approach this imperatively by creating a new empty array then use a <code>for</code> loop to push each individual username to a new array. 
![Screen Shot 2021-01-28 at 4.43.48 PM](https://dev-to-uploads.s3.amazonaws.com/i/tlmuszcnwc1hpk1tm1s2.png)
 
#### Declarative Programming
Now if I want to approach this same piece of code declaratively, I can use the <code>Array.map</code> method.  With <code>Array.map</code>, I can use a callback function to create a new array. A callback function is a function that will be called on later, which is why it has that name.  Once it's gone over every item in the array, the <code>map</code> function will return an array containing the values returned from each call of the function. This is how I am then able to compute a new value and return it, giving us our array of strings.
![Screen Shot 2021-01-28 at 4.49.53 PM](https://dev-to-uploads.s3.amazonaws.com/i/14f5uz57jjtn8t7kdnyv.png)
 

# Conclusion
After this, you can see that <code>Array.map</code> gives us the same result, only with less code written - as is always the goal to keep your work more concise - and without mutating the original internal array, or source. I hope I will was able to deliver a nice and gentle  introduction to <code>Array.map</code>. :)
Day 27 - Concatenation of Consecutive Binary Numbers
Tags: leetcode, python, challenge
Published: 2021-01-28 22:29:02

## The Problem 

>Given an integer `n`, return the __decimal value__ of the binary string formed by concatenating the binary representations of `1` to `n` in order, __modulo__ `10^9 + 7`.

 

__Example 1:__

```
Input: n = 1
Output: 1
Explanation: "1" in binary corresponds to the decimal value 1. 
```

__Example 2:__

```
Input: n = 3
Output: 27
Explanation: In binary, 1, 2, and 3 corresponds to "1", "10", and "11".
After concatenating them, we have "11011", which corresponds to the decimal value 27.
```

__Example 3:__

```
Input: n = 12
Output: 505379714
Explanation: The concatenation results in "1101110010111011110001001101010111100".
The decimal value of that is 118505380540.
After modulo 109 + 7, the result is 505379714.
```

__Constraints:__

* `1 <= n <= 105`

## Tests

```python
import pytest
from .Day27_ConcatenationOfConsecutiveBinaryNumbers import Solution

s = Solution()


@pytest.mark.parametrize(
    "n,expected",
    [
        (1, 1),
        (3, 27),
        (12, 505379714),
    ],
)
def test_concatenated_binary(n, expected):
    assert s.concatenatedBinary(n) == expected
```

## Solution

```python
class Solution:
    def concatenatedBinary(self, n: int) -> int:
        l = 0
        ans = 0
        for i in range(1, n + 1):            
            if i & (i - 1) == 0:
                l += 1
            ans = ((ans << l) | i) % (10 ** 9 + 7)
        return ans
```

## Analysis

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6jc2ego9p5zwsqs80gx3.png)
The lonely constant
Tags: programming, javascript, typescript
Published: 2021-01-28 22:05:07

--- series: Do I need this constant ---

All software projects have differences, but there are also things which never change, and one of them are utils - where we put all staff we don't know where to put, and constants file where we put all constants which we don't know where to put. There are also many variations of above, but still you will always find such place, or places in every project. 

Among these constants we can find so-called "lonely constants".

## The lonely message
In some famous constants file there is a lonely constant.
```js
const MESSAGE_TITLE = "Welcome to the 'Some Site'"
```
After some codebase search looks like constant is used only in one module of the application. Why is it then shared and not inside the module? I assume the author or A) thought somebody will need it, B) author didn't know where to put this constant. No matter what was the reason, constant which belongs to one specific domain of the application, should be kept there and not be exposed. As I am not a fan of telling people about magical programming patterns or principles, you need to forgive me for this one. This situation is exactly violation of ["You aren't gonna need it"] (https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it) principle.

## The lonely cutter
In some famous constants file there is a lonely constant.
```js
const CUTTER = 'cutter'
```
After some codebase search looks like constant is used cross the whole app. It is not a local thing, as in our previous example. This is properly made global, but after some while you see that there is something more, another constant used close to this one.
```js
const BATTLESHIP = 'battleship'
```
Now the code which uses them:
```js
if (ship.kind === BATTLESHIP) {
 ...
} else if (ship.kind === CUTTER) {
 ...
} else {
 ...
}
```
Now it should be clear. We have two constants, which are tightly connected, and even more, they are one thing - type of vessel.
```ts
enum VESSEL_TYPE {
  BATTLESHIP,
  CUTTER,
  OTHER
}
```
## The very dry digit

In some module there is a lonely constant.
```js
const TWO = 2
```
It is a local constant of the module, so at least it is not exposed. After code investigation, it was clear that the reason why it was a constant, was avoiding repetition. Developer have seen few '2' in the code, and as was taught to do, followed the [DRY principle](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), and instead of repetition of '2', code had repetition of 'TWO' 😅, what a win...

In the code the incredible 'TWO' was used as number of digits after dot. So instead of naming it as just value synonymous, lets use name which defines the purpose.
```js
const DECIMAL_PART = 2
```

## Don't be so lonely my constant

To not make constants lonely, we need to follow common sense in naming, sharing and grouping of constants. If we will not share local things, if we will put proper names and if we will gather constants in domain enums/objects, then no constant will be lonely in our codebase.
Sprockets::FileNotFound in ... ... couldn't find file 'material_icons' with type 'text/css'
Published: 2021-01-28 21:49:16

Fix: this is how your `app/assets/stylesheets/application.scss` should look:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self  
 */

@import "materialize";
@import "https://fonts.googleapis.com/icon?family=Material\Icons";
How to center elements with CSS
Tags: css, html, tutorial
Published: 2021-01-28 21:38:30

Knowing how to center things with css is very necessary for our day to day as web developers. There are several ways to achieve the same, so it can get us confused. Today we are going to learn how to center things horizontally, vertically and both (horizontally and vertically) fully responsive.

We will work with two divs, one as a parent element and the other as a child.
```html
<div class="parent">
    <div class="child"></div>
</div>
```

###1. Horizontally
Center an element `display: block;` requires a fixed width, since it takes all the available width or, failing that, transform it to `display: inline-block;`
![center-horizontally](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0b7662c9-924b-4973-ad0f-7363b9b7b7f6%2FCenter_css(1).jpg?table=block&id=a5c10f02-1c0b-4b4f-93a8-6e277311203b&cache=v2)
**Method margin-auto:**
Giving it automatic margin from left to right, it automatically centers the element horizontally and is fully responsive.
```css
.child {
    margin: 0 auto;
}
```
**Using Flexbox:**
Flexbox is a more useful feature within css. We use it a lot for the layout. We can use `justify-content` in the parent element to achieve our goal. And it is also responsive. (Remember that by default `flex-direction` is `row` so all child elements will be placed in a horizontal row, if you want them to be placed vertically use `flex-direction: column;`)
```css
.parent {
    display: flex;
    justify-content: center;
}
```
###2. Vertically
Centering items vertically is confusing, so let's see how to get it right.
![center-vertically](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb630de56-6c13-4801-96f7-860fd63a6016%2FCenter_css(1).jpg?table=block&amp;id=29640023-d231-4f19-8424-d9709ab8db56&amp;cache=v2)
**Using Flexbox(again):**
Now instead of using `justify-content` we will use `align-items`.
```css
.parent {
    display: flex;
    align-items: center;
}
```
###3. Both(horizontally and vertically)
Centering elements both horizontally and vertically is very satisfying. We almost always have a situation where we want to center things so let's see 2 ways to do it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hhz08acn8uycqldi00gh.jpg)
**With Flexbox(yes again):**
As we've seen, flexbox helps us to center things both horizontally and vertically, so what if we put `justify-content` and `align-items` together?
```css
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
```
**Using Grid:**
This is the last method of the post and the fastest. It is my favorite, we can center the elements with only 2 lines of code!
```css
.parent {
    display: grid;
    place-items: center;
}
```
###Conclusion
There are many ways to achieve the same, such as using `position`, playing with `padding` and `margin`. Although it generally depends on the situation which method we will use. I recommend learning Flexbox and Grid as it helps us in various ways, reducing our lines of code. Share this post to whoever you think will help.
Git Commands from outside the repository
Tags: git, shell, cli, productivity
Published: 2021-01-28 21:36:25

This week i discovered something nice and really obvious if you think about it for a minute. But it never really dawned on me till now. 

With the parameter -C you can pass git the directory it's supposed to work on. This is great if you use git scripts a lot. No more navigation to the right folder, just pass the absolute path via -C and this should clean up the script nice and reduce the potential for error a lot. 

Just have a look at the documentation for the git command. 

```powershell
git help git
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4ul08n4ynijwita78aqc.PNG)
SQL Review - WHERE, SELECT
Tags: 100daysofcode, sql
Published: 2021-01-28 21:16:43



I've recently started teaching myself SQL as part of the #100daysofcode challenge and I thought I would make some notes in order to review some of the things I've learnt.
SQl is the language used for storing, manipulating and retrieving data. The SQL Language is used with MySQL, SQL Server, MS Access, Oracle and other systems. 

SQL stands for Structured Query Language. It can execute, retrieve, insert, update, delete and create records in a table in a database. 

#### SQL Statements
Most of the actions you need to perform on a db are done with SQL statements. 

Ex. 
`SELECT * FROM employees;`
This line of code is using the SELECT statement to query all the column names from the employees table using the * (which means all columns) 

SQL keywords are not case sensitive, so SELECT is the same as select, but it is common practice to to capitalize keywords. 

####SELECT SYNTAX

SELECT Syntax is as follows: 
```SELECT column1, column2 FROM table_name;``` 

An example of this is:
 ```
SELECT age, salary 
FROM employees;
```
Where age and salary are both columns in the employees table.

#### SELECT DISTINCT
The SELECT DISTINCT keyword is used to retrieve unique values in a table, so values will not be repeated in the result set. Since a column can often have duplicate values, using the DISTINCT keyword is a good way of removing those duplicates. 

For example, customers may purchase the same kind of fruit. You may just want the data for the kind of fruit purchased, and not necessarily all data for all the fruit each individual purchased. 

Instead of typing ``SELECT Fruit FROM Customers;``
We would type:
``SELECT DISTINCT Fruit FROM Customers;`` 

We can get even more specific while using the DISTINCT keyword. 
For ex:
```SELECT COUNT (DISTINCT Fruit) FROM Customers;```

As the keyword COUNT may suggest, this query will count the number of distinct values in a column and return that value to you. 

#### The WHERE Clause
The WHERE clause is used to filter information in a query statement. 
The syntax is as follows: 
``SELECT column1 FROM table_name WHERE condition;``

For ex:
```
SELECT * FROM employees
WHERE State = "Idaho";
```
This will return all the information about employees who live in Idaho. 

#### Text and Numeric Fields
You must use single or double quotes around text fields in SQL. The opposite is true for numeric fields, as they do not require quotes and will result in an error. 

Note: You must have a semicolon at the end of each query for it to run. You can't just do whatever, this isn't javascript ;)

That's it for Part 1. Thanks for reading!
Sudo vulnerability : Linux users are warned
Tags: devops, beginners, linux, docker
Published: 2021-01-28 21:03:50

So, you (to my regular readers)  remember my post where I mentioned why docker is easily hackable!!! 
I also differentiated // between advantages of being rootless.
 
If you don't remember links of these articles, you can search these  in my profile.

Coming to caption. Yes [sudo] has vulnerability named :
CVE-2021-3156.

So what is it?

It has been given the name Baron Samedit by its discoverer.

This could allow any unprivileged local user to gain root privileges on a vulnerable host (without authentication).

This vulnerability was present more than 10 years.

Though it only allows escalation of privilege and not remote code execution, CVE-2021-3156 could be leveraged by attackers who look to compromise Linux systems and have already managed to get access (e.g., through brute force attacks).

What to do?
1)
RUN :
```
sudoedit -s '\' `perl -e 'print "A" x 65536'
```
If you receive a usage or error message, sudo is not vulnerable. If the result is a Segmentation fault, sudo is vulnerable.

2)
Read this https://www.qualys.com/2021/01/26/cve-2021-3156/baron-samedit-heap-based-overflow-sudo.txt

3)
Workaround:
None. Sudo version 1.9.5p2 or a patched vendor-supported version must be installed.
Fix:
The bug is fixed in sudo 1.9.5p2.

(Currently, I can't reply on dev.to . The reason moderators believe my one of reply to post was not in context with title of article. And believe it was as readers liked my reply 😂. 

The reason I am not asking them to allow to lift ban as I believe it was one-sided decision taken by dev.to and after all portal belongs to them 😭. 

So if you reply on this post... I won't be able to reply. Keep one side communication here if you like with me. However you can reply to others.)