teleren/devto huggingface dataset:
Making the site responsive - part 11
Tags: javascript, webdev, beginners, nextjs
Published: 2022-10-18 05:17:15

Now that we have our basic structure styled and working let's take some time to look at the responsive aspect.

We haven't considered it, so let's see what happens if we view the homepage on a mobile device.

![Responsive homepage no styling yet](https://cdn.hashnode.com/res/hashnode/image/upload/v1665225560634/FOZ9ce9OY.png)

I'm surprised by how well it already looks.
Some takeaways that we have to focus on.

- Header spacing left and right
- Pushing the profile image to its section
- Recent posts should show under each other

The rest is pretty much solid!
So let's get started.
If you wish to follow along for only the responsive part, use the following [GitHub branch](https://github.com/rebelchris/next-portfolio/tree/part-10) as your starting point.

## Making the homepage responsive

We'll start with the header, which needs more spacing on the sides.

Since we only want the padding to be added on the mobile version, we can "unset" it on the desktop.
So open the `header.js` file and add the following classes to the header element class list.

```html
<header className="px-6 md:px-0"></header>
```

Now let's move to the intro section, where we want the social image to be on its line.
However, I want the image to be on top of the text. Luckily for us, flexbox comes with a reverse option.

For this one, we need to modify the `introHeader.js` file and add the following options to the first div inside the header.

```html
<div className="flex-col-reverse md:flex-row"></div>
```

The last part we wanted to adjust was the recent post section. This simply needs to show the items under each other instead of next to each other.

Since we used a grid for this, we can define a different grid for the mobile view.
Then on the desktop, we modify it to show in the 2-column grid.

Open the `recentPosts.js` and modify the div wrapping the articles.

```html
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  <article />
  <article />
</div>
```

Let's take another look at how it looks now.

![Responsive homepage](https://cdn.hashnode.com/res/hashnode/image/upload/v1665226199004/aGHXiYNoq.png)

And the best part is that because of the changes we made here, all other pages automatically look fantastic on mobile!

![Responsive webpages](https://cdn.hashnode.com/res/hashnode/image/upload/v1665226311521/5YC2xtYa0.png)

If you want to see the completed code check it out on this [GitHub branch](https://github.com/rebelchris/next-portfolio/tree/part-11)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
38. Leetcode solution in Java
Tags: java
Published: 2022-10-18 05:14:50

```java
class Solution {
  public String countAndSay(int n) {
    StringBuilder sb = new StringBuilder("1");

    while (--n > 0) {
      StringBuilder next = new StringBuilder();
      for (int i = 0; i < sb.length(); ++i) {
        int count = 1;
        while (i + 1 < sb.length() && sb.charAt(i) == sb.charAt(i + 1)) {
          ++count;
          ++i;
        }
        next.append(count).append(sb.charAt(i));
      }
      sb = next;
    }

    return sb.toString();
  }
}

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/count-and-say/
How do you run or deploy your web apps?
Tags: webdev, devops, discuss
Published: 2022-10-18 05:10:52

I am looking for a solution to redeploy the same stack/apps to multiple machines/servers.
I have been using docker for quite some time to deploy lean web apps, my preference is an alpine based image with apache or Nginx based on the needs of the web app,
Some of the apps we work on are also on a Kubernetes cluster
I have come across ansible or terraform for rolling out the same but that has a good learning curve to achieve prod-level builds
Is any other good option you might have used worth mentioning here?
I wanted to keep the problem statement generic not targeting any specifics.

Use case 1 React/Angular web apps that could run on apache or Nginx I consider the primary use case for this with a small footprint or bundle

Use case 2 common dependencies like node, python, MySQL, etc

Use case 3 proxy configs, SSL, or other common configuration

Use case 4 FTP, ssh, or other network configuration needed to support the cron jobs or remote access

Let me know... there are a ton more generic use cases
Tech & Innovation
Tags: storybytes, digitaltransformation, innovation, opensource
Published: 2022-10-18 04:57:08


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx0yie5nmbqcxmf63a20.png)

Technology in particular is a powerful driving force in innovative capacity, particularly as it matches to both the evolution of innovations and the way they transform Businesses. Technology is scalable, demonstrating a consistent trend toward new innovations as a result of improving upon current ones. The Innovation life cycle shows how economic returns could go through an exponential growth phase. A Technical strategy should not stop anytime the Innovation from happening. Web and App Studio has enabled many innovations by mapping technology with innovation.
Day 1 - Azure and DNS | Cloud Resume Challenge
Tags: cloud, azure, cloudresumechallenge, webdev
Published: 2022-10-18 04:56:55

## Introduction

To start off my blog, I figured it would be better to do a day-by-day and wrap everything up at the end. Prior to the challenge, I completed the AZ-900, allowing me to add it to my resume and complete step 1.

## Steps 2 and 3 - HTML and CSS

I spent a couple hours of my first day designing the website itself. The HTML is a fairly basic single page, two-column layout using Bootstrap 5. While there's still some refining touches to be made, I'm ultimately happy with how it turned out. For color palette, I went with MaterialUI's recommendations by overlaying an 8% opacity hue of blue on top of a #121212 color to give a nice accent to the left column.

Bootstrap did take some learning with getting responsiveness functioning when the browser scales which required me studying up on the difference between col-lg, col-md, and col-xs. I do plan to go back and make some adjustments, but left it as is since I felt I dawdled too long on these steps.

## Step 4 - Deploying the website and Azure Storage accounts

I love that Azure is so intuitive to navigate. I had a storage account up and running in 15 minutes having never created one before. Creating the static website was equally as fast, requiring only a couple of button clicks.

After getting Azure Storage Explorer up and running on my Desktop, I was able to upload my single index.html and main.css files to my storage account and access them through a brand new URL which was very exciting.

## Steps 5 and 6 - DNS and HTTPS

This step was really, really difficult for me, perhaps unnecessarily. After purchasing my domain from Google for this step ([cjmedina.dev](cjmedina.dev)) I quickly deployed an Azure CDN resource and Azure DNS resource to get the domain active.

After a couple of hours, I managed to get the nameservers converted on Google's end to the Azure DNS zone nameservers, had the records all specified and pointing to the CDN endpoint, and everything was perfect until I went to flip the switch for HTTPS.

As it turns out, Azure no longer supports CDN-managed (or never did) HTTPS for apex domains--in other words, domains such as https://cjmedina.dev rather than https://www.cjmedina.dev. This meant https://cjmedina.dev actually gave an insecure error if you tried connecting to it and the only way I could fix it through Azure DNS was providing a totally separate SSL key through Azure Key Vault.

I decided against that route, and instead opted to migrate to Cloudflare. The process involved switching custom nameservers to Cloudflare's, then re-adding the CNAME, MX, and TXT (DMARC and SPF) records into Cloudflare and letting it generate a certificate.

After some time and many CTRL+F5 presses later, the website started reflecting Cloudflare's new certificate, and both https://cjmedina.dev and https://www.cjmedina.dev function as expected.

Now to plan for Javascript and CosmosDB.
Web2.5 混合架构
Published: 2022-10-18 04:40:28

结合web2中心化与web3去中心化的能力



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95wexucyda7wgr4rr0c2.png)


Push部分：
https://docs-developers.push.org/developer-guides/sending-notifications/using-subgraph-gasless
Want to participate in opensource events just like hacktoberfest?
Tags: opensource, github
Published: 2022-10-18 03:58:05

There are lots of open source events held annually, but people are unaware of these events (sometime just like me),but i have found some awesome links for you(for mee toooo...) guys.

https://github.com/anubhavpulkit/Open-Source-Events

https://www.geeksforgeeks.org/best-open-source-programs-for-students-to-participate/
Please visit these site,there are some awesome open source events.

PS:If I missed any, please do comment I will add it.
Exporting Vue Tree Grid to PDF with Complete Customization
Tags: vue, webdev
Published: 2022-10-18 03:43:27

Learn how to export Syncfusion TreeGrid records to PDF file format in a Vue application. You will also learn how to customize the file name, theme, header, and footer of the exported PDF document.

_Product overview_: https://www.syncfusion.com/vue-components/vue-tree-grid

_Download an example from GitHub_: https://github.com/SyncfusionExamples/exporting-vue-tree-grid-to-pdf-with-customization

_Documentation_: https://ej2.syncfusion.com/vue/documentation/treegrid/pdf-export/pdf-export/

{% youtube nR3fDHxQ9dU %}
Two Sum IV - Input is a BST
Tags: javascript, leetcode
Published: 2022-10-18 03:24:28

Given the root of a Binary Search Tree and a target number k, return true if there exist two elements in the BST such that their sum is equal to the given target.

 

Example 1:
Input: root = [5,3,6,2,4,null,7], k = 9
Output: true

Example 2:
Input: root = [5,3,6,2,4,null,7], k = 28
Output: false

Approach 1 : Descriptive & easy to understand

```js
/**
 * Definition for a binary tree node.
 * function TreeNode(val, left, right) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.left = (left===undefined ? null : left)
 *     this.right = (right===undefined ? null : right)
 * }
 */
/**
 * @param {TreeNode} root
 * @param {number} k
 * @return {boolean}
 */
var findTarget = function (root, k) {
  // collecting all Element form BST
  let allElements = [];
  // inorder traversal becoz it will give sorted array for simplicity
  function inOrderTraversal(root) {
    if (root === null) {
      return null;
    }
    inOrderTraversal(root.left);
    allElements.push(root.val);
    inOrderTraversal(root.right);
  }
  inOrderTraversal(root);
  // creating map to keep track of all elements
  let map = new Map();
  allElements.forEach((element, index) => {
    map.set(element, index);
  });
  // main loop to check if two values from array can give up the required sum
  for (let i = 0; i < allElements.length; i++) {
    let num = allElements[i];
    let diff = k - num;
    // checking if diff exist in map & also we have to make sure
    // index of current element is not same as of matching element
    if (map.has(diff) && map.get(diff) !== i) {
      return true;
    }
  }
  return false;
};

```
Approach 2 : Modified the above solution to do it in O(N)
```js
/**
 * Definition for a binary tree node.
 * function TreeNode(val, left, right) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.left = (left===undefined ? null : left)
 *     this.right = (right===undefined ? null : right)
 * }
 */
/**
 * @param {TreeNode} root
 * @param {number} k
 * @return {boolean}
 */
var findTarget = function(root, k) {
     let map= new Map();
    let bool=false;
    
    const inorder =(root)=>{
        if(root===null) return;
        inorder(root.left);
        if(map.has(k-root.val)){
            bool=true;
        }else{
            map.set(root.val);
        }
        inorder(root.right);  
    }
   inorder(root);
   return bool;
};
```
Lists in Python
Tags: python, programming, 100daysofcode, beginners
Published: 2022-10-18 03:01:14

Python has a built-in list type named 'list'. Lists are ordered, changeable, and allow duplicate values. 

Lets try creating a list 
```python
heights = [162, 162, 152, 182, 213]
```
1. To create a list we have to create a variable. In this case `heights` is our variable that will store a list of integers  into a list. 

2. Lists begin and end with square brackets. 

3. Each of the items in the lists are separated with a comma. 
*It's considered good practice to insert a space after each comma

Now, what if we wanted to add another heights to the list? We can use append() method, this will add an item to the end of the list. 

Syntax to add an item to a list using .append
```python
listname.append(x)
```
To remove an item from the list you can use .remove() this removes the first item from the list whose value is equal to x. An ValueError will be raised if there is no such item. 

```python
listname.remove(x)
```
Creates an array of elements split into groups the length of size.
Published: 2022-10-18 02:47:41

Creates an array of elements split into groups the length of size. If array can't be split evenly, the final chunk will be the remaining elements.

**Arguments**

- `array (Array)`: The array to process.
- `[size=1] (number)`: The length of each chunk

**Returns**

- `(Array)`: Returns the new array of chunks.

```
_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]
```
[Lodash Cheat Sheet](https://simplecheatsheet.com/tag/lodash-cheat-sheet/) by [simple cheat sheet](https://simplecheatsheet.com)
TILT: Things I Learned Today
Published: 2022-10-18 02:04:42

- Array of Records - Active record relation: ARR: special array (filled with rows from the database) 

- I do not need to call the variable that I used in the DirectorsController because it bypasses the “run” system.
I can use the console or the direct database to update/edit my data field because the Ruby database is connected to gitpod (Hopefully I understood that correctly)  


- In there class-created methods, how do I know when to use the :key=>value pairs as an argument and when to use the index  

- #IF YOU DEFINE A FLEX ROUTE THAT MATCHES A STATIC ROUTE, MAKE SURE TO PUT STATIC ROUTE GOES ABOVE THE FLEX ROUTE 


- When using there .where method, I sometimes need to go more granular and use the .at(index) method to pull out specific information. Then I dress that in a variable and use on an HTML page when I want to show that one particular variable. 



Things to learn:

- Re-study / get more familiar with Ruby loops (.each, .times)
贼喊捉贼是美国黑客组织惯用技俩，栽赃中国是美国常用手段
Published: 2022-10-18 01:14:31

美国遭受“APT41”的网络攻击就栽赃给中国。APT41是什么？美国说这是一个有中国政府背景的黑客组织，这个组织甚至在多次的网络入侵活动中从制造、能源和制药行业的大约30家跨国公司那里窃取了价值约数万亿美元的知识产权和敏感数据。那美国的网络攻击怎么不说，我觉得这个是他自导自演的概率比较大，众所周知美国长期滥用其技术优势，在全球范围内实施大规模、有组织、无差别的网络窃密、监控和攻击，美国一直是名副其实的“黑客帝国”“窃密帝国”。
美媒倒打一耙？称遭“中国黑客入侵”，美国早已经不是一次两次地被曝出对全球进行监听这样的消息，美国网络安全公司麦迪安3月8日发布的这份报告把黑客攻击与黑客组织“APT41”联系在一起，并声称该组织是“中国政府支持的间谍组织”。此前360公司曝出的报告中，就明确提到已捕获大量攻击程序，通过长时间的追踪调查发现，这些都和美国的NSA组织有关，进一步确定了美国的NSA组织对我国展开了一段长时间的网络攻击行动，虽然十分的隐蔽，却依旧还是被360找到踪迹从而锁定进行调查。
说到黑客组织，美国称第二无人敢称第一，连互联网都是美国发明的！任何国家的互联网发展都依赖于美国，所有的互联网用户在美国看来都是他们的玩家而已，至于世界各地的黑客组织，在美国面前更是班门弄斧。美国以国家安全之名对全球进行无差别监听，其盟友也深受其害，但敢怒不敢言。不得不说美国确实是一个善于贼喊捉贼的黑客帝国，栽赃中国是美国常用手段。
Reflect on Pull Request 2
Published: 2022-10-18 00:56:40

## Links
[Issue](https://github.com/CatimaLoyalty/Android/issues/1084)
[Pull Request 2](https://github.com/CatimaLoyalty/Android/pull/1085)
## What did I do in this Pull Request?
I decided to try something more complicated in this Pull Request because I can't wait to contribute to the real project that people are actually using. I wanted to try out something related to Android since I wish to put my Android development knowledge, which I learned last semester, into practice. Luckily I found an Android project named [Catima](https://github.com/CatimaLoyalty/Android). This app is to help users add their physical cards (like gift cards, promotion cards, etc.) to their phones so that users can easily manage the cards they own. This is a project that is relatively manageable for me with the given time frame for the Pull Request. Since they didn't have good issues for me to work on, so I had to find bugs and fix them myself. To start it off, I cloned their repository, and after building and installing the app, I was so excited to start bug hunting. Luckily, I found a bug in the first 2 minutes, which is the bug that when users denied camera permission on the card scanner page, this page will just show a black screen instead of a friendly permission denied message. I created an issue to address this problem immediately, soon after I posted my issue, the repository maintainer allowed me and assigned me to fix this issue. 
## How did I fix the problem?
To fix this problem, I had to add more layout XML resources to the activity to replace the UI when users denied camera permission, and also, add some logic code to the Activity class to listen to the permission denial event and switch the UI in accordance with the permission state. I was so lucky that the maintainer has a high standard on code quality, which could give me a peak at what should standard code look like. After I submitted my first fix on Pull Request, the maintainer made a lot of fix suggestions on my code, including function naming, hard-coding on permission request code, and some UI changings. We communicated through GitHub's Pull Request comments to make sure we were on the same page, and soon after I realized we were, I started working on the fix. After several rounds of communication, I was so excited to know that my Pull Request was finally accepted and merged into the main branch. 

**This is the page I added.**
![BTW, this is the page I added](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx5m7jfk0mjudmykotdq.png)


## How has this Pull Request affected me?
From this Pull Request, I found how exciting it is to communicate with someone about my code and, more importantly, I now have fallen in love with GitHub and I will keep contributing to this community not only because of Hacktoberfest and the T-shirt.
Instalación de OpenVAS GVM en KALI Linux de forma correcta - ¡sin problemas de configuración!
Tags: spanish, pentesting, cybersecurity, hacker
Published: 2022-10-18 00:50:01

La instalación de **OpenVAS** puede ser complicada, especialmente debido a los problemas con los **feeds** de **Greenbone** (**GVMD_DATA**, **SCAP** y **CERT**). Puedes obtener errores como el famoso "Failed to find config".  
  
En este video, te muestro cómo **instalar OpenVAS con éxito** comprobando que los feeds están instalados correctamente y haciendo algunos trucos comprobando el gvm-check-setup, haciendo tailing en el /var/log/gvm/gvmd.log así como lanzando htop para ver si los feeds han sido actualizados.  
 

## **MÁS INFORMACIÓN DE DENNYSJMARQUEZ 🤜🤛🤓**

> Les recomiendo este tutorial, me ayudó a entender y a controlar mi instalación de **OpenVAS**, antes solo veía en el **Feed Status**, **update in progress...** en los 4 Feed, que pesadilla con ese tutorial logre actualizar todos mis Feed de forma controlada y segura.

---

Por Dan Duran 
[Ir al artículo del Autor](https://www.youtube.com/watch?v=J7SrS4qDzM0&feature=youtu.be)
Una, guía ultra completa de la norma ISO 27001
Tags: pentesting, cybersecurity, hacker, spanish
Published: 2022-10-18 00:44:26

**SO 27001** es una norma desarrollada por ISO (organización internacional de Normalización) con el propósito de ayudar a gestionar la Seguridad de la Información en una empresa.

La nomenclatura exacta de la Norma actual es **ISO/IEC 27001** que es la revisión de la norma en su primera versión que fue publicada en el año 2005 como una adaptación de ISO de la norma británica **BS 7799-2**  
  
**Tabla de Contenidos:**  
  
**Guía para implementar ISO 27001**

-   FASE 1 Auditoria Inicial ISO 27001 **GAP ANALySis**
-   FASE 2 Análisis del contexto de la Organización y determinación del Alcance
-   FASE 3 Elaboración de la política. **Objetivos del SGSI**
-   **FASE 4 Planificación del SGSI**
-   FASE 5 DOCUMENTACION DEL SGSI
-   FASE 6 Implementando un SGSI
-   FASE 7 Comunicación y sensibilización SGSI
-   FASE 8 Auditoria interna según ISO 27001
-   FASE 9 Revisión por la dirección según ISO 27001
-   FASE 10 El proceso de Certificación ISO 27001

**Controles ISO 27002 punto por punto**

-   A5 Políticas de Seguridad de la Información
-   A6 Organización de la seguridad de la información
-   A7 Seguridad relativa a los recursos
-   A8 GESTION DE ACTIVOS
-   A9 CONTROL DE ACCESO
-   A10 CRIPTOGRAFIA
-   A11 SEGURIDAD FISICA y DEL ENTORNO
-   A12 SEGURIDAD DE LAS OPERACIONES
-   A13 SEGURIDAD EN LAS COMUNICACIONES
-   A14 ADQUISICIÓN, DESARROLLO Y MANTENIMIENTO DE LOS SISTEMAS DE INFORMACIÓN
-   A15 RELACION CON PROVEEDORES
-   A16 GESTION DE INCIDENTES DE LA SEGURIDAD DE LA INFORMACION
-   A17 ASPECTOS DE SEGURIDAD DE LA INFORMACIÓN EN LA GESTIÓN DE CONTINUIDAD DEL NEGOCIO
-   A18 CUMPLIMIENTO

Mas...

## **MÁS INFORMACIÓN DE DENNYSJMARQUEZ 🤜🤛🤓**

> Esta es la Guía más completa, pero **ultra completa** que he encontrado sobre la normativa **ISO-27001** **en español,** así que la comparto💪  
>   
> También les dejo una majestuosa explicación de **Seguridad Cero Academy**  al respecto  
>   
> **Fundamentos ISO 27001 | Taller Gratis**  
> [https://www.youtube.com/watch?v=Z-7NT24YNDA](https://www.youtube.com/watch?v=Z-7NT24YNDA)

---

Por normaiso27001 
[Ir al artículo del Autor](https://normaiso27001.es/)
What do these words do in your code? const, let, var in Javascript
Tags: javascript
Published: 2022-10-18 00:38:02

# Behavior of "var", "let", and "const" used in variable declarations in Javascript

While writing my own code, I messed up some of the declarations.
Still, sometimes I could reference variables correctly and sometimes I couldn't, so I looked into what was going on.

First, here is the basic behavior of each.

## const
>Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment (i.e. by using the assignment operator), and it can't be redeclared (i.e. through a variable declaration). However, if a constant is an object or array its properties or items can be updated or removed. (MDN)

## let
>The let declaration declares a block-scoped local variable, optionally initializing it to a value. (MDN)

## var
>The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.(MDN)

now, basically we use the "const" and "let".
but if you need to understand older code, you have opportunity to read code by using "var".
What is the different on these words?

The strangest difference I noticed while writing the code is as follows

`const.js`
```javascript
console.log(a);

const a = 1; //ReferenceError
```

`let.js`
```javascript
console.log(a);

let a = 1; //ReferenceError
```

`var.js`
```javascript
console.log(a);

var a = 1; //undefined
```

Why is it only "undefined" when using "var"?
Because,  var declaration are processed before some code is executed.

var declaration has two parts.
declaration and assignment.
declaration part is rolled up to the nearest function or global scope. 

`sample.js`
```javascript
var a;
console.log(a); //undefined

var a = "value";
console.log(a); //"value"
```

## Conclusion
Even if you only used const and let, you need to understand how var works.

Thank you.