teleren/devto huggingface dataset:
Writing a NES game day 5
Tags: nes, assembly, gamedev, 6502
Published: 2023-07-17 17:07:39

I was looking at the rest of the code that we have in the code we are analyzing BUT it is just some code that is claearing the memory, and is way better explained in [nerdy nights website](https://nerdy-nights.nes.science/#main_tutorial-3) so let's continue with the blog.

In the weekend I was coding and following the tutorial (and in the future when I understand more of this I will be able to explain how all this assembler hell works) and first I was able to put a big and a little Mario on the screen as sprites.
Then I made Little Mario move back and forth with left and right pad and it is working.


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

Now, as you see there are other things in the picture, now I am working with the backgrounds (explaining this will be HELL). The problem that I am having now is that in the code I put this:

```
nametabledata:
    .byte $24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$20,$24,$24,$24,$24  ;;row 1
    .byte $24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24  ;;all sky ($24 = sky)

    .byte $24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24  ;;row 2
    .byte $24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24  ;;all sky

    .byte $24,$24,$24,$24,$45,$45,$24,$24,$45,$45,$45,$45,$45,$45,$24,$24  ;;row 3
    .byte $24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$53,$54,$24,$24  ;;some brick tops

    .byte $24,$24,$24,$24,$47,$47,$24,$24,$47,$47,$47,$47,$47,$47,$24,$24  ;;row 4
    .byte $24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$24,$55,$56,$24,$01  ;;brick bottoms

```

The thing is that it is loading in the reverse order (if you see, $24 is the sky tile in the .chr file and it is supposed that the upper part is filled with sky BUT the upper part is filled with the last row, so everything is upside down and I don't know why. If I can't change that I will need to see everything from down to top in the code wich will put another layer of complexity.
monotonic array
Tags: javascript, programming, beginners, interview
Published: 2023-07-17 16:21:30

## This problem was asked by Facebook.

**A monotonic array is an array whose elements, from left to right, are entirely non increasing, or entirely non decreasing. Return true if the given array is monotonic.**

```
Example
function monotonicArray(arr){

}
  
const arr = [-1, -5, -10, -1100, -1100, -1101, -1102, -9001]
console.log(monotonicArray(arr)) // true
```

**Solution**

```
function monotonicArray(arr) {
  let increasing = true,
    decreasing = true;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] > arr[i + 1]) {
      increasing = false;
    } else if (arr[i] < arr[i + 1]) {
      decreasing = false;
    }
  }
  return increasing || decreasing;
}

const arr = [-1, -5, -10, -1100, -1100, -1101, -1102, -9001];
console.log(monotonicArray(arr)); // true
```

**- This checks the array in O(n) time complexity by going through the elements sequentially and keeping track if the elements are either entirely increasing or decreasing.**
What are your goals for the week of July 17?
Tags: discuss, watercooler, motivation
Published: 2023-07-17 15:53:53

## What are your goals for this week?


- What are you building? 
- What will be a good result by week's end?
- Are you attending any events this week? 
  * Any suggestions of events to attend?
- Did you meet your goals last week?


### Last Week's Goals


- [:white_check_mark:] Continue Job Search. attended a virtual job for climate industry.
- [:white_check_mark:] I posted [CSS Battles](https://dev.to/jarvisscript/css-battle-test-your-skills-1ia6) last week.
- [:white_check_mark:] Code Challenges did some CSS Challenges
- [:white_check_mark:] Project work. Had a new project offered to me. I worked on the frontend for a new tool. Working to arrange a day to drop it.
- Events
  * [:x:] Attend Virtual Coffee(VC) Thursday.
  * [:x:] Other VC events if I can.
  * [:white_check_mark:] Attended a job fair.
- [:x:] Build some LEGO sets.
- [:white_check_mark:] Content updates and social media for a site.



### This Week's Goals

- Continue Job Search.
- Blog
  * Figure out some kind of images to add to these posts.
- Code Challenges
- Project work
- Events
  * Attend Virtual Coffee(VC) Thursday.
  * Other VC events if I can.
  * Attend Other events. Although as of Monday, nothing local this week.
- Build some LEGO sets. 

### Your Goals for the week


You've read my goals so I'll throw the questions back to you.


- What are you building? 
- What will be a good result by week's end?
- Are you attending any events this week? 
  * Any suggestions of events to attend?
- Did you meet your goals last week?



```html
-$JarvisScript git push
```
Which App or Website Would You Makeover & How?
Tags: discuss, beginners, codenewbie, ui
Published: 2023-07-17 15:50:31

Hey there, fellow devs! If you could improve or enhance any popular application or website, which would you choose, and what improvements would you bring to make it shine? 

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
Why I’m dumping reading news
Tags: productivity, news, learning, devjournal
Published: 2023-07-17 15:36:38

tl;dr

Why: lately I've noticed that reading all newsletters and blogs I'm subscribing to consumes a lot of my time and the knowledge which I get from them mostly falls in: superficial, unrelated to my current scope of work/applications, doesn't surprise me (i.e. I read what I expect).

How: I'm dumping as many newsletters as I comfortably can (cruel). Others I'm redirecting to a separate mail folder (filtering), so I don't have a sense of losing something, but they're not in my main mailbox, hence out of my sight (less cruel).

---

Last years I've been subscribing to various blogs and newsletters. Those provided me with a huge value, especially professionally starting in IT. As I don't have a formal IT background, they served perfectly in extending my "what I still don't know" knowledge.

When I started learning python, those subscriptions provided me with very great advice, insights, new topics, etc. which I didn't know about. And over a few months, I learned a ton of new stuff about python.

But as I knew more, I encountered fewer and fewer useful articles for myself coming randomly from subscriptions. Regarding python, I got more aware of what I still don't know and what I'd like to learn. I felt I was getting more value in deliberately finding appropriate resources myself. I was no longer as excited about all those subscriptions as I was before.

A similar thing happened with other topics: cybersecurity, management, startups, business, investing, containers, CI/CD, etc. I know that I'm no expert in all the topics, but 

1.  I either didn't feel like knowing something new after reading the article or
2.  I felt I have to do some hands-on practice to understand the content of an article better,
3.  or the topic is out of my current application domain.

Which means that a large amount of time I was spending learning/reading about the things, which aren't useful today but might be in the future. And that wouldn't be a problem, but

the time is limited. And as I'd been spending 1-2 hours a day reading the news and blogs (most of which I simply scrolled through), I felt it was no longer the best investment of my time.

Instead, concentrating on specific topics and having some deep learning with books or some projects feels more productive. And less obligations to my mailbox.

After the rise, shine, and fall of the news subscriptions, here I am without them again. Oh, that sense of freedom... And what will I do with all that time???

And have You ever been in such a situation? Let me know!
8 mistakes you must never make as a programmer
Published: 2023-07-17 15:31:49

As a programmer, it’s essential to be aware of common mistakes that can lead to poor code quality, decreased productivity, and missed deadlines. In this article, we’ll discuss eight mistakes that you must never do as a programmer to ensure that you’re writing high-quality code and working efficiently.

Not commenting on your code
One of the most common mistakes that programmers make is failing to comment on their code. Comments are a vital tool for making your code readable and understandable for others, and for yourself in the future. Without comments, it’s often difficult to understand the purpose and function of a particular piece of code, leading to confusion and wasted time.

Not testing your code
Another mistake that programmers make is failing to test their code. Testing is crucial for identifying bugs and ensuring that your code is working as expected. Without testing, you’re leaving your code open to bugs and errors, which can lead to wasted time and missed deadlines.

Not using version control
Version control is an essential tool for managing and tracking changes to your code. Without version control, it’s difficult to keep track of changes, collaborate with others, and roll back to a previous version if something goes wrong. Not using version control can lead to wasted time, missed deadlines, and the loss of important work.

Not paying attention to performance
As a programmer, it’s essential to pay attention to performance. Poorly optimized code can lead to slow performance, increased memory usage, and wasted resources. Not paying attention to performance can lead to wasted time and missed deadlines.

Not using proper data structures
Choosing the right data structure for your code is crucial for performance and readability. Not using the proper data structure can lead to poor performance and increased complexity.

Not keeping up to date with new technologies
As a programmer, it’s essential to keep up to date with new technologies and programming languages. Failing to do so can lead to a lack of knowledge and skills, which can make it difficult to write efficient and maintainable code.

Not following best practices
As a programmer, it’s essential to follow best practices for writing code. Failing to do so can lead to poor code quality, increased complexity, and wasted time.

Not asking for help
As a programmer, it’s essential to know when to ask for help. Failing to ask for help when needed can lead to wasted time, missed deadlines, and poor code quality.

In conclusion, it’s important to be aware of these common mistakes to ensure that you’re writing high-quality code and working efficiently. By avoiding these mistakes, you’ll be able to write better code, work more efficiently, and meet deadlines more easily. Remember, it’s always better to avoid mistakes than to fix them later.
How to inspect transient DOM elements
Tags: ui, javascript, frontend
Published: 2023-07-17 15:04:21

There are certain situations in web applications where a UI element will appear/disappear from the screen and it is challenging to inspect it.  This typically occurs when an element's presence in the DOM is based on `focus` or `hover` state which changes when you attempt to inspect it.  In this article, I'll cover a couple ways to overcome this.

## The OK way

An easy way to inspect an element which may be satisfactory in many situations is to use `setTimeout()` in combination with `debugger;` to effectively freeze the DOM, allowing you to then inspect anything at your leisure. The `debugger;` statement (documented [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger)) invokes the Javascript debugger and completely pauses execution.  When used in the callback of a `setTimeout()` timer, you can "schedule" the DOM to freeze after you've gotten the UI ready for inspection.

[Here](https://dkp79x.csb.app/) is a CodeSandbox example where you can play around with this technique.  In this example, if you click on the `<input>`, an options menu will appear. If our goal was to inspect one of the options in the menu, we'd have to contend with the fact that the menu disappears when we click anywhere outside of the menu.

To test this solution, open up the Developer Tools and add the following code to the Console tab: 

```
setTimeout(() => { debugger; }, 3000)
```

Once we submit this command in the console, you'll have three seconds to open the menu, before the execution is paused and the DOM is frozen.



![frozen DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yavw4diev725lvm9pjla.png)


One drawback of this approach is the DOM is _completely_ frozen. This means that if we wanted to do something like check the hover behavior on one of the options menu, we couldn't.

## The better way

A better way is to leverage Chrome's "Emulate a focused page" option in Developer Tools. You can quickly enable this option by using Chrome's [command palette](https://developer.chrome.com/docs/devtools/command-menu/#open) by pressing `Control+Shift+P` on Windows/Linux or `Command+Shift+P` on Mac. Once open, start typing "Emulate a focused page" or "emfo" for short.


![command palette - emulate a focused page ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwqql5m7xk0uwqtg0awk.png)

Once enabled, you can hit the "Select an element in the page to inspect it" button in Developer Tools.


![inspector button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqsu118x6gb5b89e8zju.png)

Lastly, click on the options menu or one of the options.  You'll notice that the menu does not disappear and you can even see hover styles.


![emulating a focused page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf9b06mlq6um9fnvlw34.png)
VSCode React Snippets Extension
Tags: webdev, react, vscode, javascript
Published: 2023-07-17 14:49:49

You can use VSCode React snippets extension to quickly initialize your React components: https://t.ly/aAucz


![vscode-react-snippets-extension-gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pun5g4r8wr5f60cj6l7.gif)
Đá gà phi như nào? Bí quyết chơi đá gà Phi bất bại
Tags: daga, dagaphi
Published: 2023-07-17 14:43:50

**[Đá gà Philippines](https://123b.wtf/bi-quyet-choi-da-ga-phi-bat-bai/** là hình thức cá cược đá gà trực tiếp tại các trận đấu từ trường gà Philippines. Mọi người có thể xem trực tiếp tại trường gà hoặc xem video trực tiếp được phát từ các nhà cái 123b.
Đá gà trực tiếp cực hay tại nhà cái 123b
Tags: 123b, 123bwtf, 123bcasino, nhacai123b
Published: 2023-07-17 14:42:00

**[Đá gà trực tiếp](https://123b.wtf/da-ga-truc-tiep-cuc-hay-tai-nha-cai-123b/)** là sân chơi hấp dẫn thú vị được nhiều anh em quan tâm. Cũng có rất nhiều người mới tham gia chưa hiểu rõ về cách đá gà trực tiếp như thế nào?. Bài viết đây **[123bwtf](https://123b.wtf/)** sẽ nói cụ thể chi tiết cho anh em tham khảo.
2 ways to create Lambda with Cloudformation
Tags: aws
Published: 2023-07-17 14:32:49

## 1. Inline Code
Cloudformation:
```yaml
AWSTemplateFormatVersion: "2010-09-09"
Description: Lambda inline code
Resources:
  MyInlineLambda:
    Type: AWS::Lambda::Function
    Properties: 
      Runtime: python3.x
      Role: arn:aws:iam::123456789012:role/lambda-role
      Handler: index.handler
      Code:
        ZipFile: |
          import os

          DB_URL = os.getenv("DB_URL")
          db_client = db.connect(DB_URL)
          def handler(event, context):
            user = db_client.get(user_id = event["user_id"])
            return user
```

## 2. Through Zip File on S3
Cloudformation:
```yaml
AWSTemplateFormatVersion: "2010-09-09"
Description: Lambda from S3
Resources:
  MyLambdaFromS3:
    Type: AWS::Lambda::Function
    Properties: 
      Runtime: nodejs18.x
      Role: arn:aws:iam::123456789012:role/lambda-role
      Handler: index.handler
      Code:
        S3Bucket: some-bucket
        S3Key: function.zip
        S3ObjectVersion: String
```
Serverless Framework:
```yaml
service: my-service

package:
  individually: true

functions:
  hello:
    handler: com.serverless.Handler
    package:
      artifact: s3://some-bucket/path/to/function.zip
```
Continuos Deployment in Embedded systems. Is it possible?
Tags: cicd, discuss, devops
Published: 2023-07-17 14:20:32

Hi all,

I've worked developing and shipping software to embedded systems for 10 years and I testified the long software development lifecycle for this kind of application.

I want to point some challenges to implement continuous deployment in embedded systems:

1. Real-Time Constraints: Many embedded systems operate in real-time environments, where timely and deterministic responses are critical. Continuous Deployment should consider the impact of changes on real-time performance and ensure that the system's real-time capabilities are not compromised.

2. Resource Constraints: Embedded systems often have limited resources in terms of processing power, memory, and storage. This necessitates careful optimization and thorough testing to ensure that new code changes do not exceed resource limits.

3. Firmware Updates: Deploying changes to embedded systems can be more complex than deploying web applications or server-based software. Firmware updates may require special procedures, bootloaders, and mechanisms to prevent bricking the device.

4. Testing Challenges: Automated testing in embedded systems can be more challenging due to hardware dependencies and the need for specialized testing environments. 

Based on my experience, I think that is very hard to implement CD for embedded systems, anyway, almost everything in tech is possible.

Do you code for embedded systems? Do you think that is possible to implement CD for embedded systems?

Cheers,
Toggle Feature for a Drop-down list on React using useState();
Tags: react, beginners, usestate, frontend
Published: 2023-07-17 14:10:25

While creating a navigation bar, I wanted to make a feature when a user clicks on an element, they can see a drop-down list. Also, when they exit the element, the list should toggle off.

## Full Code below of the navigation bar

```
import "./header.css";
import { FaBars } from "react-icons/fa6";
import { useState } from "react";

export const Header = () => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  return (
    <nav>
      <div className="nav__items">
        <div className="nav__logo">
          <img src="imges" alt="codestates logo" />
          <h1>COZ Shopping</h1>
        </div>
        <div className="nav__toggle">
          <FaBars
            size={34}
            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
          />

          {isDropdownOpen && (
            <div
              className="toggle__list"
              onMouseLeave={() => setIsDropdownOpen(false)}
            >
              <div className="toggle__list__item">My Page</div>
              <div className="toggle__list__item" id="item__middle">
                Product List Page
              </div>
              <div className="toggle__list__item">Bookmark Page</div>
            </div>
          )}
        </div>
      </div>
    </nav>
  );
```

## Breaking down the code to understand the toggle feature

First, using the useState Hook, we’re going to set a variable of isDropdownOpen with the function setIsDropdownOpen and have its default state set to false.

Currently, nothing will happen since we’re not making use of it.

```
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
```

Then we’re going to use an Event where if the FaBars component is clicked, it will toggle the setIsDropdownOpen to TRUE.

```
<FaBars size={34} onClick={() => setIsDropdownOpen(!isDropdownOpen)} />
```

Afterward, if isDropdownopen is TRUE, the following elements will render. If it’s isDropdownopen(false), the following elements will not render.

```
{isDropdownOpen && (
            <div
              className="toggle__list"
              onMouseLeave={() => setIsDropdownOpen(false)}
            >
              <div className="toggle__list__item">My Page</div>
              <div className="toggle__list__item" id="item__middle">
                Product List Page
              </div>
              <div className="toggle__list__item">Bookmark Page</div>
            </div>
          )}
```
However, we want the users to feel a better experience when using the toggle list, therefore, we’re going to add the feature where if the user’s mouse leaves the list, the toggled div will close.

And we can implement that using the onMouseLeave Event. The following Event will make the setIsDropdownOpen back to FALSE and close the list. And we can open the list again if we click on the toggle component <FaBars />

```
<div className="toggle__list" onMouseLeave={() => setIsDropdownOpen(false)}
            >
```
Ways to Improve Lambda Performance
Published: 2023-07-17 14:01:24

# ✒️Reuse the Execution Context
_what is the execution context?_ Lambda invokes your function in an execution environment (an isolated runtime environment). The execution context is a temporary runtime environment that _initializes any external dependencies_ of your Lambda code.

## 🏋️‍♂️Explanation Exercise:
Create a testLambda with a 3 sec timeout limit:

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

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

### Bad Practice:
```python
import json
import os
import time

def connect_to_db():
    time.sleep(3)

def lambda_handler(event, context):
    connect_to_db()
    return os.getenv('ENVIRONMENT_NAME')
```
Test with sleep 3 sec, no timeout as it is within the 3 sec limit we set. But everytime we call this lambda, it will always take 3 sec because it is trying to connect to the database everytime we run. This way of writing is not efficient.

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

Also, let's say if the connection to database took more than 3 sec, example 5 sec:

```python
import json
import os
import time

def connect_to_db():
    time.sleep(5)

def lambda_handler(event, context):
    connect_to_db()
    return os.getenv('ENVIRONMENT_NAME')
```
We will faced this timeout issue:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8ptbiyfcio0eicz41rj.png)

### Good Practice for Better Performance:
So a Good Practice is to put the connection code outside of the lambda handler function:
```python
import json
import os
import time

def connect_to_db():
    time.sleep(3)

# shift this out of handler
connect_to_db()

def lambda_handler(event, context):
    return os.getenv('ENVIRONMENT_NAME')
```
So even though the initial run will likely take 3 sec but subsequent run only took 1.64 ms, which is much more efficient! This is because it is _**re-using the execution context**_ of the previous invocation.

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