teleren/devto huggingface dataset:
TIL 4
Published: 2023-07-26 18:12:46

**More CSS**
Boxes and stuff

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

Height and Width:
```p {
  height: 80px;
  width: 240px;
```}

Borders:


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

Border Radius:

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

Padding:
```
p.content-header {
  border: 3px solid coral;
  padding: 10px;
}
padding-top
padding-right
padding-bottom
padding-left
```
Padding short hand:
```
p.content-header {
  padding: 6px 11px 4px 9px;
}
```
4 values (top->right->bottom->left)
3 values (top->left right->bottom)
2 values (top bottom -> left right)

Margins:
Pretty much the same as padding

Auto (auto adjust margin):

```
div.headline {
  width: 400px;
  margin: 0 auto;
}
```
Minimum and Maximum Height and Width:

```
p {
  min-width: 300px;
  max-width: 600px;
  min-height: 150px;
  max-height: 300px;
}
```

Overflow:

The overflow property controls what happens to content that spills, or overflows, outside its box. The most commonly used values are:

hidden
scroll
visible

Visibility:

hidden 
visible 
collapse
How generative AI is hitting the market?
Published: 2023-07-26 18:06:39

As of my last update in September 2021, generative AI was already making significant strides in various markets. However, since my knowledge is not current, I can provide a general overview of how generative AI was impacting the market at that time. Keep in mind that developments beyond 2021 are not covered.

Creative Industries: Generative AI has been employed in creative industries such as art, music, and storytelling. It can create unique artwork, generate new musical compositions, and even craft compelling narratives. Artists and musicians were using generative AI as a tool for inspiration and creativity.

Content Generation: In content creation, generative AI was used to automate the generation of articles, reports, and other written materials. Some websites utilize AI-generated content to keep their platforms updated with fresh content continually.

Gaming: The gaming industry was leveraging generative AI for procedural content generation, creating vast and dynamic virtual worlds, characters, and quests. This technology enhanced game development efficiency and offered more immersive gaming experiences.

Design and Architecture: Generative AI assisted designers and architects in creating innovative and optimized designs. It helped generate design proposals, optimize building layouts, and create 3D models with specific parameters and constraints.

Fashion: In the fashion industry, generative AI was employed for creating unique clothing designs and generating fashion recommendations based on individual preferences and trends.

Chatbots and Virtual Assistants: Generative AI powered natural language processing capabilities in chatbots and virtual assistants, making them more intelligent and capable of understanding and responding to user queries with context and relevance.

Healthcare and Drug Discovery: Generative AI played a crucial role in drug discovery and medical research. It could help design new molecules, predict molecular properties, and assist in the search for potential new drugs and treatments.

Video and Image Editing: Generative AI was used to enhance and modify images and videos. It allowed for automatic colorization, style transfer, and even the creation of deepfake content.

Personalization and Recommendation Systems: Many online platforms used generative AI to provide personalized recommendations to users based on their preferences, behaviors, and historical data.

Research and Development: Generative AI has been employed in various research fields, including natural language processing, computer vision, and reinforcement learning. It has significantly advanced research capabilities and opened up new possibilities in these domains.

Keep in mind that the field of AI is rapidly evolving, and newer applications and use cases may have emerged since my last update. Generative AI's impact on the market depends on ongoing developments in technology, regulations, and ethical considerations.
D3 #100DaysOfOSS
Tags: 100daysofcode, 100daysofoss, programming, opensource
Published: 2023-07-26 17:44:05

D3 #100DaysOfOSS with @saucedopen

Today, I updated and created easy-to-understand information on HTTP servers & Express.js. I also reviewed a pull request for the Raspberry Pi documentation.

Explored key HTTP elements - URL, Method, Headers, Body, and Query Params. It's like the post office of the web, receiving, sorting, and sending data!

Here is a code snippet to create an HTTP server using Express Js.
Prerequisites: Node.js and the Express.js library.

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

#100DaysOfCode #HTTPServer #100DaysOfOSS #expressjs #opensource
MyGet outage impacts builds and deployments
Published: 2023-07-26 17:29:28

Many development teams are seeing NuGet build issues and errors today with the [MyGet outage](https://status.myget.org/). You can resolve these issues by transitioning to our new NuGet package provider.

Learn more about how to transition to our new #Sitecore package provider in this support article: https://support.sitecore.com/kb?id=kb_article_view&sysparm_article=KB1002999
Some notes on Bash Shell Script
Tags: bash, shell, shellscript
Published: 2023-07-26 17:25:16

## #! Shebang
```
#! /bin/bash
```
Tell OS to use bash shell (interpreter) to run the script.

## Declaring Variable
```sh
list_of_variables=("put" "like" "this")
list_of_variables+=("you" "can" "append" "more")
list_of_variables+=("even" "more" "list_of_variables+=")
```

## If statement with environment variable
```sh
if [ "$ENABLE_DD_PROFILE" = "true" ]; then
  echo "something"
fi
```

## Print variable
The java_args[@] syntax is used to access the elements of the java_args array. The @ symbol tells Bash to expand the array, so that the individual elements of the array are passed to the Java program as arguments.

```sh
# method 1 to print all the arguments
for arg in ${java_args[@]}; do
  echo $arg
done

# method 2 to print all the arguments
printf "%s\n" "${java_args[@]}"
```
## Example of a non working java command bash shell script
```sh
#! /bin/bash

java_args=(
    "-Xmx1024m" # max heap size
    "-Xms512m" # min heap size
    "-XX:+HeapDumpOnOutOfMemoryError"
    "-XX:HeapDumpPath=./temp/heapdump"
    )

if [ "$ENABLE_DD_PROFILE" = "true" ]; then
java_args+=(
    "-javaagent:dd-java-agent.jar"
    "-Ddd.service=<YOUR_SERVICE>"
    "-Ddd.env=<YOUR_ENVIRONMENT>"
    "-Ddd.version=<YOUR_VERSION>"
    "-Ddd.profiling.enabled=true"
    "-XX:FlightRecorderOptions=stackdepth=256"
    )
fi

# if -cp and paths are placed before the javaagent, my java would not run correctly somehow. 
java_args+=(
    "-cp"
    "lib/*"
    "lib2/*"
    "-jar <YOUR_SERVICE>.jar"
    )

# print all the arguments
printf "%s\n" "${java_args[@]}"

# run java command
java ${java_args[@]}
```

## Run command

You need to chmod a shell script so that it can be executed by the user. By default, a newly created file has no execute permissions, which means that it cannot be run. The chmod command is used to change the permissions of a file.

`chmod +x` make the script executable.

```sh
$ export ENABLE_DD_PROFILE=true
$ chmod +x java_args.sh && ./java_args.sh
-Xmx1024m
-Xms512m
-XX:+HeapDumpOnOutOfMemoryError
-XX:HeapDumpPath=./temp/heapdump
-javaagent:dd-java-agent.jar
-Ddd.service=<YOUR_SERVICE>
-Ddd.env=<YOUR_ENVIRONMENT>
-Ddd.version=<YOUR_VERSION>
-Ddd.profiling.enabled=true
-XX:FlightRecorderOptions=stackdepth=256
-cp
lib/*
lib2/*
-jar <YOUR_SERVICE>.jar
Error opening zip file or JAR manifest missing : dd-java-agent.jar
Error occurred during initialization of VM
agent library failed to init: instrument
```

The Java error is intentional, as the main goal is to showcase my new knowledge of bash shell scripts.

Kthxbye.
My first Post!
Published: 2023-07-26 17:24:54

Hello, world!

Thats the post.

Will be chronicling my romance with programming languages and little titbits here and there.

I believe anyone can learn programming.

Artificial intelligence makes it faster and better for everyone.

Learning it.

We don’t have to let it do our thinking for us. 

Its an excellent search and summary tool for faster work done.

It can function as a debugger.

Thats the posts!
Writing a NES game, day 14, newbie mistakes
Tags: assembly, 6502, nintendo, gamedev
Published: 2023-07-26 16:59:05

One thing that I noticed in the game was that everything was running BUT in a separate way. So, everytime an event was launched you could see the other events freezing. So, you can see for a moment in the shooting stage that monsters freezed (for a short ammount of time). Not to talk about holding left or right buttons and everything was waiting me to release the button.

It was ALL caused because I had a **NEWBIE **error. I was using JMP to move to subrutines. There is an especific instruction for that JSR (Jump to subrutine, the name is clear). JMP is just an unconditional jump, but the way to do this in the correct way is to use the correct jump instruction.
I noticed all this while spending **HOURS** breaking my code to see why all the freezing errors happened (also sometimes randomly the program itself was freezed), looking at the obvious place: [the instructions table](https://www.masswerk.at/6502/6502_instruction_set.html)

It was like 1 am when the solution appeared and I could fix all (yes, this is making me go to bed really late).

Now the code is better with things like this:

```
engineplaying:
;read button
    LDA button

right: 
    CMP #%00000001
    BNE rightDone
    JSR moveRight
rightDone:

left: 
    CMP #%00000010
    BNE leftDone
    JSR moveLeft
leftDone:
```

Tomorrow we have to talk about how the scrolling will happen in the near future.
Roadmap for ReactJS Developers in 2023 | Zero to Hero
Tags: webdev, react, javascript
Published: 2023-07-26 17:18:29

Here is a roadmap that will take you from zero to hero as a React developer in 2023, whether you’re just getting started or looking to advance your abilities:

Learn the fundamentals of JavaScript

As JavaScript is the foundation of React, having a firm grasp of its principles is crucial. Start by studying objects, loops, conditionals, functions, and variables.

Learn the basics of HTML and CSS

The foundational languages of web development are HTML and CSS. To design HTML elements, style them, and leverage CSS frameworks like Bootstrap or Material UI, you should understand how to do all of these things.

Learn React basics

Learn the fundamentals of React first, such as components, props, state, and JSX. Online courses, YouTube tutorials, or React documentation are good places to start.

Top Marketplace For Buying Source Code, Pre-built Websites For Sale
Codemarketi is a new platform available for buying source code. Get an industry-specific website, prebuilt for you! Get…
www.codemarketi.com

Dive deeper into React concepts

Learn more about advanced React ideas like React Router, Redux, React Hooks, Context API, and Server-Side Rendering after you’ve mastered the fundamentals.

Mastering React Hooks: How to Use Them Effectively in Your React Applications
Developers can now use states and other React features in functional components thanks to React Hooks, a potent new…
medium.com

5 React Design Patterns You Should Know
One of the most widely used front-end frameworks is React, and for good reason. Its component-based architecture…
medium.com

Practice building projects

Building projects is the most effective method to learn React. A to-do list or a calculator are good places to start, and you can work your way up to more difficult projects like an online store or social network.

Online Movie Streaming Website in React and Nodejs with Full Source Code
React and Node.js are two powerful technologies used to build web applications. The React Node.js Movie App is a…
medium.com

Learn testing

Software testing is a crucial component, and React offers a variety of testing methods and modules. With your React applications, learn how to create unit tests and integration tests.

Learn about performance optimization

Performance optimization becomes increasingly important as your applications expand. Learn about code splitting, lazy loading, and other methods that can enhance the efficiency of your application.

Optimize Your Code Right Away with These 4 React Suggestions
For creating user interfaces, React is a well-liked and often used JavaScript library. React has many wonderful…
towardsdev.com

Stay up-to-date

React is always changing, so it’s important to keep up with the most recent developments and recommended techniques. Attend conferences, participate in online forums, read blogs, and keep up with the React documentation.
Stop naming functions `fetch()`.
Tags: javascript, webdev, programming
Published: 2023-07-26 16:58:59

Hello everybody, this is just a quick PSA. Here goes: **STOP NAMING YOUR FUNCTIONS `fetch()`!**

Between the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), and the [wide variety of modules involving functions named `fetch()`](https://www.npmjs.com/search?q=fetch), we don't need any more functions named `fetch()`.

Here are some alternatives:

1. `fetch_user_profile_from_email()`
2. `load_remote_web_content()`
3. `something_descriptive_that_will_challenge_your_typing_speed()`
4. `literally_anything_other_than_fetch()`
5. `there_are_a_lot_of_words_in_english_which_are_not_the_word_fetch()`

But I digress.

In most of my years since I stopped programming C primarily, namespace confusion hasn't been a huge problem. This `fetch()` business, however, is absolutely a massive namespace confusion, and we should stop it. Please. I'm begging you.
Open To Helping
Published: 2023-07-26 16:53:03

Last year companies started cutting back staff and lay-offs were common, this lead to an increase of the #OpenToWork badges on LinkedIN.

People wanted to help and that lead Alishah Novin to launch the yellow [#OpenToHelping badge.](https://www.linkedin.com/feed/update/urn:li:activity:6886755107132735488/) The LinkedIn community rose to the challenge and Yellow badges popped up to help the Green badges.

The #OpenToHelping movement caught wild-fire and has helped thousands. However - because it's not an official LinkedIn badge, there's no easy way to add the badge to your profile... until now.

For all those #helpers out there, I've collaborated with Alishah to build a LinkedIn [#OpenToHelping profile picture generator.](
https://christopherleejarvis.com/OpenToHelp/opentohelping.html) It's simple to use, and hopefully brings more and more helpers to the community.


![two column website. left column has a ring to upload an image. left column is instructions. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p886jt2bvhh2zmnt5cs2.jpg)

Alishah designed the badge maker and had much of the layout done. He wanted help to finish the project. That's when I joined. 
I tighten up the look of site. Added a share to linked in button you click it to create your own Open To Helping post on LinkedIn. Photoshop was used to make the preview avatar. 


Please check it out.
POWER BI
Tags: programming, productivity, tutorial, devops
Published: 2023-07-26 16:40:49

Power BI is a powerful business intelligence tool developed by Microsoft that allows users to visualize and analyze data from various sources. In 10 lines, here's a summary of its key features and capabilities:

**1.** Power BI is a data visualization tool that transforms raw data into interactive and visually appealing dashboards and reports.

**2.** It supports various data connectors, enabling easy integration with numerous data sources, including Excel, databases, cloud services, and more.

**3.** Users can create data models using Power Query and DAX (Data Analysis Expressions) to manipulate and transform data.

**4.** The tool offers a wide range of customizable visualization options, including charts, graphs, maps, and tables.

**5.** Power BI allows users to create dynamic and interactive reports, enabling data exploration and insights.

**6**. The Q&A feature lets users ask questions in natural language and receive answers in the form of visuals.

**7.** It supports real-time data analysis, making it suitable for monitoring live data and tracking key metrics.

**8.** Power BI offers collaborative features, allowing multiple users to work on the same report simultaneously and share insights with others.

**9**. Data-driven alerts can be set up to notify users when specific conditions or thresholds are met.

**10**. Power BI offers both desktop and cloud-based versions, with seamless integration between them, ensuring easy access and sharing of reports and dashboards across various devices.
Here's How To Create Your First PostgrSQL Extension Part 2
Tags: postgressql
Published: 2023-07-26 16:39:39

We will continue what we started [here](https://dev.to/mghrabi/heres-how-to-create-your-first-postgrsql-extension-part-1-45fe), Now let's create the necessary files, and go through each of them. We stopped where we created a directory for the extension `add_two_numbers`. In this Blog we will start by creating the `Makefile`.

1. **Makefile**:

``` 
MODULES = add_two_numbers
EXTENSION = add_two_numbers
DATA = add_two_numbers--0.0.1.sql
PG_CONFIG = /usr/local/pgsql-13/bin/pg_config
PGXS := $(shell $(PG_CONFIG) --pgxs)
include $(PGXS)
```
`MODULES`: list of shared-library objects to be built from source files with the same stem, which mean you should specify the name of the c file we will build which we will name `add_two_numbers`

`EXTENSION`: specify the name of the extension that postgres will use to identify our extension, we will name it `add_two_numbers` as well.

`DATA`: by this variable we specify the sql file that postgres will use to run the necessary queries to create and install the extension in the database.

`PG_CONFIG`: By this variable we specify the path to the **pg_config** binary file in the postgres database where we will install the extension, this will give the `make` command the necessary information for proper installation. Also we will need this variable in the following variable to get the path for a very important file that extensions use in the building process, this file which is `pgxs.mk`, it contains generic rules to build extensions.

`PGXS`: as we just said above, here we need to assign a command to that retrieves the `pgxs.mk` file location. In `$(shell $(PG_CONFIG) --pgxs)` the $(PG_CONFIG) will retrieve what we assigned (PG_CONFIG) variable which is the path to the pg_config file, that's to execute it with the `--pgxs` flag to get the path of `pgxs.mk` file.

`include $(PGXS)`: then this part is responsible to include `pgxs.mk` so that to apply the rules in that file to build the extension.

Very important Note: You can always refer to the other variables you can add to Makefile, as by opening `pgxs.mk` file you will find instructions on each variable especially for these we created, and for other variables that can be necessary for you later extensions, so take a look on it!. Get the file path by running `$(PG_CONFIG) --pgxs` to open it.
go.mod มีที่มาอย่างไร
Published: 2023-07-26 16:18:26

สำหรับคนที่เพิ่งจะเริ่มเขียน Go ก็คงจะต้องเล่าประวัติให้รู้คร่าวๆสักหน่อย ว่าทำไมเราถึงจะต้องมีไฟล์ go.mod และมันมีที่มาอย่างไร

เริ่มตั้งแต่ go ออกเวอร์ชั่น 1 เมื่อปี 2009 ในสมัยนั้นเราไม่มี go.mod ใช้กันนะครับ แต่ตอนนั้นเราใช้วิธีเก็บพวก lib ต่างๆที่เราจะใช้ไว้ใน directory ที่เราเรียกว่า `GOPATH` ซึ่ง ณ วันนี้ถ้าเราใช้คำสั่ง

```sh
go env
```

เราก็จะยังคงเห็นค่า `GOPATH` นี้อยู่เหมือนเดิม เพียงแค่วิธีบริหารจัดการของข้างในมันเปลี่ยนไป แต่ก็ยังคงใช้เพื่อเก็บ lib ต่างๆที่เรา import เข้ามาจากภายนอกมารวมไว้ในนี้ ซึ่งใน default ค่า GOPATH จะอยู่ที่ `$HOME/go` หรือ `~/go`

*หมายเหตุ: `~` เครื่องหมายนี้หมายถึง home directory ของเราเองเช่น `/Users/pallat` เป็นต้น

แต่เดิมนั้น เวลาเราใช้คำสั่ง

```sh
go get
```

เช่น

```sh
go get github.com/gin-gonic/gin
```

สิ่งที่เกิดขึ้นก่อนที่จะมี module ก็คือ Go จะไป git clone สิ่งที่ get ลงมาไว้ใน `$GOPATH/pkg` ตรงๆเช่นกรณีนี้ ก็จะได้ directory ใหม่หน้าตาประมาณนี้
`~/go/pkg/github.com/gin-gonic/gin` ซึ่งในสมัยนั้น เราก็จะประสบภัยเรื่อง version ตีกัน เช่นถ้าเราเขียนโปรแกรมแล้วต้องการใช้ lib A version 1  ในขณะที่เราก็ใช้ lib B version 2 ซึ่งถ้า lib B มีการไปเรียก lib A แต่เป็น version 2 ทีนี้มันก็จะไปเอา lib A version 2 มาทับ แล้วโปรแกรมเราก็จะใช้ไม่ได้ งงไหมครับ 😅

นั่นแหล่ะครับ ในยุคนั้นเราก็เลยเห็นตัวช่วยพากันออกมาให้เราเลือกใช้หลายตัว เช่น glide หรือ dep เป็นต้น โดยมีหลายตัวที่เลือกใช้วิธีจัดการผ่าน directory ที่ชื่อว่า `vendor` ซึ่ง go กำหนดให้สามารถใช้ directory นี้เป็นที่เก็บ lib เฉพาะของ repo นั้นๆได้เอง ซึ่งจะทำให้แต่ละ repo เลือกใช้ lib version ที่ต้องการได้เอง แต่ก็ยังแก้ปัญหา version ไม่ตรงกันในกรณีที่ lib แต่ละตัวไปใช้ lib ตัวเดียวกันต่าง version กันไม่ได้อยู่ดี

ซึ่งในปี 2018 เดือน Feb Russ Cox ก็ได้เสนอ proposal เรื่องการจัดการ Go versioning ขึ้นมาและทดลองใช้ในชื่อว่า `vgo` ก่อนที่จะ bundle เข้าไปใน Go1.11 ที่ออกมาวันที่ 24/08/2018 และในช่วงนั้นเราสามารถเปิด/ปิด feature นี้ได้ผ่านค่า `GO111MODULE` โดยกำหนดค่าได้ 3 ค่าคือ on/off/auto

ซึ่งต้องบอกก่อนว่า ในสมัยก่อนหน้านั้น เวลาเราจะเขียนโค้ด Go เราจะต้องไปเขียนกันใน $GOPATH/src นะครับ ไม่อย่างนั้นเราจะไม่เห็นพวก lib ต่างๆ ซึ่งสิ่งนี้จะสัมพันธ์กับค่า `auto` ที่จะกำหนดให้ `GO111MODULE` ว่าถ้าเราให้เป็น auto หมายความว่า ถ้าเราไปเขียนโค้ดใน `$GOPATH/src` เหมือนเดิม เราก็จะไม่ได้ใช้ Go Module ช่วยจัดการ versioning ให้ แต่ถ้าไปเขียนโค้ดไว้ที่อื่น เราก็จะต้องใช้ Go Module มาช่วยนั่นเอง

ก็จบแล้วนะครับ เป็นการเล่าประวัติคร่าวๆให้ได้รู้กันเล็กน้อยว่าเราเริ่มใช้ go.mod กันมาเมื่อไร อารมณ์เล่าความหลังให้ฟังกันครับ
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"
Tags: react, reactjsdevelopment, javascript, programming
Published: 2023-07-26 16:02:46

I created a web app with Vite-React and finalized it and build it and fixed all the errors. Deployed it to my Windows Server 2019 running with Plesk Obsidian. I tested it and worked as expected.

Next morning, when I went to test, is giving the following error in the Dev Console saying:
index-b657e41e.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

I have google, chat GPT and nothing seems to make it work. I have also tested my dist package locally on my MAC and runs as expected.

Yesterday, I had other issues and got resolved by doing the following:
Added the following Rule using the URL Rewrite in the IIS and created the following Rule:        

![Rule Created in IIS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hovvl4dpkm2sq17w3let.png)        
        

And then I had to go into Plesk and change the Web Application Firewall (modsecurity) from ON To Detection Only.

![Plesk Obsidian Firewall Change done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqinrrht1gmjuh1kytbs.png)

As far as that, all that fixed the other issues I had and left with the app working just fine.

This morning I proceed to update all Windows Updates that were important and the problem persist.

To see it when you use any browser, in my case Chrome, access : https://rs.develoware.co and it will display a blank screen and if you go into Developer Tools and check the Console tab you will see the error Im talking about. See attached image.

![HTML Code, IndexPage in the Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydywmwm44icx5vddvymi.png)

I don't know what else to do about this matter.

What could have changed during night time, that broke this app.

Any help will be greatly appreciated.

Thanks