teleren/devto huggingface dataset:
Removing the last element of an array in Javascript
Tags: javascript, webdev, beginners, tutorial
Published: 2022-11-06 16:53:50

One of the most frequent operations we perform on an array is removing the last element. There are a few different ways to do this - but one of the most common is to use the `pop()` method. Consider you have the following array:
```javascript
let myArr = [ "🍎", "🍏", "🍐", "🍍" ];
```

To remove the last element, all we have to do is apply `pop()`:
```javascript
let myArr = [ "🍎", "🍏", "🍐", "🍍" ];
myArr.pop();
console.log(myArr); // [ "🍎", "🍏", "🍐" ]
```

**Notice** here that this removes the last element and modifies the original array. We have permanently changed the original array by using `pop()`.

Another common method is to use the `splice` method. Again, `splice` will modify the original array, and works in much the same way. There is no real reason to use one over the other:

```javascript
let myArr = [ "🍎", "🍏", "🍐", "🍍" ];
myArr.splice(-1);
console.log(myArr); // [ "🍎", "🍏", "🍐" ]
```

Finally, another way to accomplish this without changing the original array is to use `slice` (not to be confused with `splice`). `slice()` differs from both `pop()` and `splice()` in that it makes a [shallow copy](https://fjolt.com/article/javascript-shallow-copies) of the original array. Removing the last element with `slice` looks like this:
```javascript
let myArr = [ "🍎", "🍏", "🍐", "🍍" ];
let newArr = myArr.slice(0, -1);
console.log(newArr); // [ "🍎", "🍏", "🍐" ]
console.log(myArr); // [ "🍎", "🍏", "🍐", "🍍" ]
```

Here, we store our sliced array in a new variable since and the original array remains unchanged. However, shallow copies have some quirks, such as sometimes leading to the original array changing - so it is not an independent copy. [You can learn morea about shallow copies and how to create deep copies here](https://fjolt.com/article/javascript-shallow-copies). 

You can also learn more about [the slice method here](https://fjolt.com/article/javascript-slice).
Learning to code in the wilderness
Tags: beginners, codenewbie, motivation
Published: 2022-11-06 16:49:39

Project specs:
Become a decent python junior and escape the (film) industry where I burned out and crashed at 35.
I like new ideas, learning, and to solve problems, so i figured I'd look for an industry where one gets paid for that sort of thing.

```
commit 33% of CS50 (HEAD -> master)

    C is the deep-ish end of the pool but I'm glad I 
    went for it

commit 100% Python for Everyone 
    
    Worth it for the calming presence of Dr Chuck.

commit Some tiny Django projects

commit Some katas

commit 50% of python automation Google certificate  

   Research said recruiters don't roll eyes at those quite as 
   much as the rest.

commit 20% of 'Test-Driven Development with Python'

   Learning the mindset, coding along

commit Working on a small portfolio project

   This is the most anxiety inducing part atm

```

Yes, I'm the sort of person who needs to have a few things on the go, and, far as neurology understands, different times of day are better for different types of learning/work. 

Right now I'm 
working through CS50 to catch up to the front-end bit, so it'll be where I'm at with the TDD book
Listening to the Google humanoids 
Gathering courage to sign up for some open source project.

I wrote this mostly to keep myself on track, but if you're on a similar boat or feel the calling to help newbs, I'd appreciate you dropping me a line.
Step One: Design front-end mock up using figma
Tags: webdev, beginners, design, javascript
Published: 2022-11-06 16:46:23

This was a very humbling part of the process, especially when I looked back after finishing the project at all I *thought* I was going to fit into the app. 

I learned that this part is crucial, it's the visual equivalent to making an outline for a written essay, and the more detailed and more thought out, the easier it'll be for you when you go to actually build the thing. 

It feels like a step you can skip, but please, be kind to your future self and do not try! If you're anything like me, you probably get really excited when you first come up with an idea, and *think* you can see it perfectly in your head. You can't wait to get started -- and good on you for capturing that momentum and energy, it's also essential if you want to finish any project to move when you're excited -- but please be kind to yourself and sketch out your idea, get it out of your head in some capacity!

It not only helps guide you, during the process of building -- when you're stuck or if you need to stop for a couple weeks mid-way through building the project -- but most importantly it helps you see the gaps and weak spots in your idea and design. For some reason our brains love to smooth over those inconvenient gaps, like a blur filter. 

It amazes me how the general stereotype of programmers can be that they're solo workers, when it involves so much communication to build anything. The best programmers I know are so good because they can communicate their ideas well, either before hand or during when they're stuck. The first piece of advice I ever got when I first started learning coding was that the best skill you can learn initially is to know how to ask for help. 

And it's proven to be so true. Whenever I'm stuck, writing out my question on stackoverflow often clears up my confusion, before I even hit submit on the question. If not, then after about 10 minutes as I imagine a person reading my question, it's like magic and the missing link pops into my head! Likewise, calling a friend and explaining it to them, often before they can even respond, I have an idea on what was missing. 

This first design step is similar to that, it's getting the idea out there, and since inevitably we'll want others to use our project, or enjoy it in some way, involving them as early as possible simply makes sense. 

Anyway, I learned to love this step, and would love to hear your thoughts: 

How do you first get started on a project? Do you have any "go-to" design steps? Tips on how to keep your project realistic and simple? Write them below 🫶
JSON in Different Languages
Published: 2022-10-19 17:43:31

JSON is a data format that uses Javascript notation to layout the structure of the data. But Javascript isn't the only language that can represent these structures in code.

```json
// Javascript
{
  "firstitem" : "first data", 
  "list" : [
    "bold",
    "italics"
  ]
}
```

I'm utilizing the two main structures, generally referred to as 'object' `{}` and 'list' `[]` because that is how Javascript talks of them. Most languages can represent these in one or more ways. These structures don't produce JSON, but libraries (beyond this article) can make the translation.

----

```lua
// Lua
{
  firstitem = "first data", 
  list = {
    "bold",
    "italics"
 } 
}
```
Lua is almost the same with just object `{}` notation even for lists. The equal rather than colon is used for association. We also don't quote the field names, though Lua does allow spaces like JSON, `["first item"] = "first data"`.

```python
// Python
{
  'firstitem' : 'first data', 
  'list' : [
    'bold',
    'italics'
  ]
}
```

Python looks really close, but string literals are single not double quote. We can also use tuples to build your list.

```python
// Python
{
  'firstitem' : 'first data', 
  'list' : (
    'bold',
    'italics'
   )
}
```

This makes the list syntax different, but you'll get the needed output.

----

```csharp
// c#
public class Data
{
  public string firstitem { get; set; }
  public List<string> list { get; set; }
}
```

C# is a statically typed language so we define a type that matches the structure. However C# has many different features and we can get away with much more.


```csharp
// c#
new {
  firstitem = "first data", 
  list = new List<string> {
    "bold",
    "italics",
 } 
}
```

```csharp
// c#
Dictionary<string, object> data = new {
  { "firstitem", "first data" },
  { "list", new List<string> {
    "bold", "italics",
  }},
};
```

This one is a cheat. The specification of `object` just places the data in to the libraries "general" representation, for example Newtonsoft's Json library would use a JObject, JArray for the type you could cast to.

----

```d
// D
public class Data
{
  public string firstitem;
  public string[] list;
}
```

```d
// D
new class {
  auto firstitem = "first data";
  auto list = [
    "bold",
    "italics"
  ];
}
```

```d
// D
Variant[string] data = [
  "firstitem" : Variant("first data"),
  "list" : Variant([
    "bold",
    "italics",
 ])
];
```

Unlike in C# where all types have an `object` representation, there is not parent for all types with Auto-Boxing. D does however provide a type, `Variant`, which can hold other types and that needs to be explicitly created.
9 preguntas de entrevista de Angular 👇
Tags: angular, entrevista, javascript, webdev
Published: 2022-11-06 16:44:01

Estas son las 9 preguntas que todo desarrollador web de Angular debe de saber antes de ir a una entrevista

### 🧪 ¿Qué es RxJS?

Es una librería que permite crear código reactivo a través de observables. Es saber bien RxJS es clave para poder hacer buen Angular dado que esta construido con ella

### 🚚 ¿Qué es un service?

Es un patrón que permite extraer la lógica de negocio del los componentes en los providers, de tal manera que el componente solo se va a enfocar en template y el diseño del mismo

### 👀 ¿Qué es un observable?

Es un objeto que emitirá un valor en algún momento del tiempo a sus subscriptores. Gracias a los operadores puede modificar los stream de datos emitidos

### 🤔 ¿Es Angular un framework o librería?

Es un framework porque propone patrones que deben ser utilizados, y no solo se enfoca en resolver solo un problema, si no también da las herramientas para manejar otros temas como el routing, http request, etc.

### 🎬 ¿Qué es una directive?

Agregan comportamientos al DOM. Existen 2 tipos:

Estructurales, como el ngIf, ngFor, ngSwitch

De atributo, genera cambios de apariencia

### 🎺 ¿Qué es pipe?

Son funciones pura y memoizadas (generalmente) que son utilizadas para dar formato a texto en el template. Existen pipes puros he impuros. 

Los puros solo se ejecutan si la instancia del cambio es diferente

Los impuros se ejecutan cada vez que el valor cambia

### ⚡️ ¿Qué es AoT?

La compilación Ahead-of-Time (AOT) compila la aplicación build time, de tal manera que disminuye el tiempo de carga de la aplicación ya que el browser no no tiene que interpretar el template

### 🖥 ¿Para qué sirve ng-content?

Permite insertar contenido dentro del componente dinámicamente haciéndolo más reutilizable

### 🏃 ¿Diferencias entre reactive vs template-driven forms?

Reactivos son:

•  Sincrónicos 
• Validaciones en lógica de componente
• Tiene un API de bajo nivel, así que es más escalable

Template driven:

• Asincrónicos
• Utilizan directivas para validaciones

Si gusto este contenido:

♥️ Dale like a este post para que otros puedan verlo

🤙 No olvides seguirme @marianocodes en [Twitter](https://twitter.com/marianocodes) y [LinkedIn](https://www.linkedin.com/in/marianocodes/)
HNG INTERNSHIP ADVENTURE
Published: 2022-11-06 16:31:02

One of the magic words in programming that I’ve come to learn is ‘git’ as a programmer you’ll understand the power of saying git this or git that. Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. 

I was able to use one of the git commands on my project in the ongoing HNG i9 internship and the magic git command I used is the ‘git add’ which is a git command that allows you to add a change in the working directory to the staging area. The staging area is a place to record things(data) before committing(initiated with another git command). 


For more information join us here : 
https://zuri.team/
HTMX + JSX prototype syntax for server side html.
Published: 2022-11-06 15:58:20

```tsx
// a HTMX approach with JSX?
import { Fragment, JSX } from "preact";
import { nanoid } from 'nanoid'

interface Options {
  path: string
}

const routes = []

class HTMX_IN_JSX {
  id: string
  constructor(
    public Component: (props: any) => any, 
    public opt?: Options
  ) {
    this.id = nanoid()
    routes.push(this)
  }
  get path () {
    if (this.opt?.path) return this.opt.path
    throw new Error('Href for component not available')
  }
  get href () {
    return this.path
  }
  get target () {
    return {"hx-target": `#${this.id}`}
  }
  get put () {
    return {"hx-put": this.path}
  }
  get get () {
    return {"hx-get": this.path}
  }
  WrapId () {
    return (props: any) => (
      <span id={this.id}>
        <this.Component {...props}/>
      </span>
    )
  }
  Anchor (props: any): JSX.Element {
    return <a href={this.href}>{props.children}</a>
  }
  AnchorBoost (props: any): JSX.Element {
    return <a href={this.href} hx-boost="true">{props.children}</a>
  }
}

const component = (x: (props: any) => any, opt?: Options): ((props: any) => any) & HTMX_IN_JSX => {
  const instance = new HTMX_IN_JSX(x, opt)
  const ex = instance.WrapId()
  return Object.assign(ex, instance)
}

const Greeting = component(() => {
  return (
    <div>
      <h1>hello</h1>
    </div>
  )
}, {
  path: '/greeting',
})

const Placeholder = component(() => {})

const Page = component(() => {
  return (
    <div>
      <Placeholder/>
      <Greeting.Anchor>Navigates to anchor</Greeting.Anchor>
      <Greeting.AnchorBoost>Fetches anchor page and swaps dom</Greeting.AnchorBoost>
      <a href={Greeting.href}>Simple link to greeting page</a>
      <div {...{...Greeting.put, ...Placeholder.target}}>put to greeting</div>
    </div>
  )
}, {
  path: '/',
})


serve(routes)

```
Rollercss
Tags: css, javascript
Published: 2022-11-06 15:50:09


![Rollercss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1bz7s3v0kyr5twcwhka.jpg)
rollercss, a modern front-end library based on CSS and Javascript. A quality and better alternative to Tailwind and Bootstrap.

To know more about "rollercss" visit the official website of rollercss 👇
[_Click here to visit rollercss_](https://rollercss.netlify.app)
<p> </p>

>**Features of rollercss**
---

1. Easy to understand and use.
2. No built-in theme 🤮 like Bootstrap.
3. Use 130+ colors ❤ for better UI&UX.
4. Built-in components like Bootstrap.
5. Flex-box system is gorgeous 😍.
6. In Built many libraries are there.
7. Use in-built 2k+ icons 🤩 on your website.
and more......
_Visit the website of rollercss to know more_
[`Click here to visit`](https://rollercss.netlify.app)


<p> </p>

>**Creator of rollercss**
---
`Ashutosh Pandey`
{% github abtp2/gw %}
![GitHub stats](https://github-readme-stats.vercel.app/api?username=abtp2&show_icons=true&theme=tokyonight)
Deploy your static React app under 5mins
Tags: react, netlify, webdev, javascript
Published: 2022-11-06 15:16:55

**We all have been to the stage where we had completed our first react app but didn't know how to showcase it publicly.**
**So, in this blog, I am going to show you how to host your react app for free.**

Pre-requisites:
- Make sure you have completed building a react app.
- Have npm installed locally or globally.

**Step 1**
Once you are done with your react app, you need to create the build folder which will contain the index, stylesheets, icons, assets and manfiest files. This folder is responsible for serving your static content when deployed.
Use this command in the root dir of your app
```shell
npm run build
```

**Step 2**
There are so many platforms to host your static site like Netlify, Vercel, Github Pages, Cloudflare Pages, Forge, etc. We are going to use Netlify
So, you need to create an account on Netlify and log in.

**Step 3**
Click on the `add new site` button.
![Add new button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lujs6ogkijfdg2obtjp4.png)
Then, click on the `deploy manually` button to deploy your build folder directly.

![Deploy manually button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnrlka4j115u70u5jix7.png)

**Step 4**
Now, we have 2 options to deploy it. We can do it either by browsing our local files or dragging and dropping.
1. Click on the browse files to upload the folder from your local machine.
![Browse files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw78jt25hhqjd4ntaide.png)
2. Drag the folder from your local and drop it in the middle.

![Drag and drop folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/albb44bs7dcedkmuqq58.png)

**Step 5**
Now, Netlify will publish your site and host it for free. You will be provided a random url but you can change it to your preferance.

![Site published](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wo34o1k532jqvav17hmu.png)

> Note: The url for your site should be unique and will always end with `netlify.app`

Congratulations! ✨ You have hosted your react app successfully and now you can showoff your project to your friends, family and literally anyone on this planet 😉

If you have any query, drop it in the comment section below. If you think this blog has any error or wrong info, please let me know. 

I hope I could help you somehow 😀. If yes, please share it with your friends and others so that this could benefit them too! Till then , keep REACT-ing ❤🚀

Follow me on: 
[Github](https://github.com/Suman373)
[LinkedIn](https://www.linkedin.com/in/sumanroy369)
Open-source MLOps Fundamentals Course 🚀
Tags: machinelearning, python, opensource
Published: 2022-11-06 15:02:07


Hi everyone, I’m the creator of [Made With ML](https://madewithml.com/) and I wanted to share that V1 of the open-source course is finally complete! We cover topics across data → modeling → serving → testing → reproducibility → monitoring → data engineering + more, all with the goal of teaching how to responsibly develop, deploy and maintain production ML applications.

- 🛠 Project-based
- 💡 Intuition (first principles)
- 💻 Implementation (code)
- 🏆 30K+ GitHub ⭐️ 
- ❤️ 40K+ community
- ✅ 49 lessons, 100% open-source 

Find all the lessons here → https://madewithml.com/
MLOps course repo → https://github.com/GokuMohandas/mlops-course
Made With ML repo → https://github.com/GokuMohandas/Made-With-ML

[**Background**] I started Made With ML as a way for me to share my learnings from the [different contexts](https://madewithml.com/#instructor) I’ve brought ML to production in the past. I currently work closely with teams from early-stage/F500 companies, as well as collaborating with the best tooling/platform companies, to make delivering value with ML even easier and faster.

[**Request**] I keep all the lessons updated as I learn more (especially constantly evolving spaces such as [testing](https://madewithml.com/courses/mlops/testing/) and [monitoring](https://madewithml.com/courses/mlops/monitoring/) ML). But what are some modeling-agnostic topics that are missing here that are very crucial to production ML / MLOps? A few high priority ones on the TODO list include bias (identifying, mitigating), distributed workflows (not just for training), etc. What else should be added here?
let and Var difference In JavaScript
Tags: javascript, programming, webdev, beginners
Published: 2022-11-06 15:01:52

Lets talk about the difference between Var and let and later on we will talk about what should we use in our JavaScript projects

So Let and Var both use for declaration of variable but there is some difference between them 


Let allow us to declare a variable that has limit to the scope of a block statement unlike Var which declares a variable globally or locally to the entire Function;

Now the question is what should we use well we should always use Const if we know the variable value not going to change else we can use Let for declaration ;
GraphQL in Java EE Application
Tags: graphql, java, jee, maven
Published: 2022-11-06 14:55:55

In a Maven-based development, start by adding the GraphQl dependency to your pom.xml file


```
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-graphql</artifactId>
</dependency>
```

Create a directory in your resources and create a file with the name `schema.graphqls` 

This file is gonna contain a schema that defines each field of your object and it's type.

To define the schema we'll use a special graphql dsl referred to as SDL.

SDL example:

```
type Query {
    gundamWings: [Gundam]
}
type Gundam {
  name: String
  type: String
  pilot: Pilot
}
type Pilot {
  id: String
  name: String
  Affiliation: String
}
type Mutation{
    addGundam(gundam:Gundam):Gundam
}
```
The last step is to add a Controller 

```
@Controller
public class GundamWingsGraphQlController {
    @Autowired
    private GundamWingsRepository gundamWingsRepository;
    @QueryMapping
    public List<Gundam> gundamWingsList(){
        return gundamWingsRepository.findAll();
    }
    @MutationMapping
    public Gundam addGundam(@Argument Gundam gundam){
        return gundamWingsRepository.save(gundam);
    }
}

```
The first method is for listing the data and the second one is to add an object.
Embedded Systems Weekly #125
Tags: embedded
Published: 2022-11-06 14:54:21

After our last week tribute to Wolfgang Denk, this week we have to take our hat off to [Kathleen Booth](https://www.theregister.com/2022/10/29/kathleen_booth_obit/), who died at the end of September. She invented something that she called the Contracted Notation, and that is today known as the assembly language.

**Happy reading!**

## Articles 
[Types of circuit boards](https://www.quaxio.com/circuit_boards/)
Alok Menghrajani wrote this article to help himself navigate through the long list of different types of circuits. I bookmarked it as a reference.

[Wii U Architecture: A practical analysis](https://www.copetti.org/writings/consoles/wiiu/)
Personally, I always find interesting these kinds of consumer products' deep analysis. Of courses to discover what choices the manufacturer made but as well the dedication of the person doing the analysis and publishing it for free. Thank you, Rodrigo Copetti.

[Rust blinky on RISC-V soft core](https://github.com/antoinevg/hello-amaranth/tree/main/hello-femtorv)
If you were looking for, an introduction example of an embedded Rust program, running on a RISC-V soft core, check out this blinky that is using the [FemtoRV](https://github.com/BrunoLevy/learn-fpga/tree/master/FemtoRV) <a href=""></a>.

[Breaking Secure Boot on Google Nest Hub (2nd Gen) to run Ubuntu](https://fredericb.info/2022/06/breaking-secure-boot-on-google-nest-hub-2nd-gen-to-run-ubuntu.html)
There is no better embedded systems engineer who knows about the last exploits. Not only which product has been hacked, but as well how it has been hacked. With this knowledge, you can make your own designs more secured.

[Memory safety in C++, Zig, & Rust (part 1)](https://youtu.be/qeiRGbYCD-0)
Even though, in general (and most of the time) memory allocations must be avoided in embedded systems, this video is insightful to understand why many are eyeing on Rust. I know it's polemic, but as an old C developer, I believe that it is now the moment to onboard the Rust train just to be ready when it will roll.

## News / Business
[Arm Changes Business Model – OEM Partners Must Directly License From Arm](https://www.semianalysis.com/p/arm-changes-business-model-oem-partners)
Is it ARM reacting to the threats coming from the CPU/GPU changes landscape? Is it a bad move for ARM long-term position? Some specialists see it as a pure anti-competition move. What do you think?

## Jobs
[Baker Hughes, Senior Firmware Engineer, Full-time, Houston, TX](https://jobs.embedsysweekly.com/job/Ykg8xlaY/senior-firmware-engineer)
Would you like to shape firmware development for a global company? With operations in over 120 countries, we provide better solutions for our customers and richer opportunities for our people.

## Misc
[Thumb-sized microscope captures images deep inside the brains of active animals](https://www.nature.com/articles/d41586-022-03395-z)
It is both scary and fascinating. Anyway, if you feel adventurous, everything needed to build it is available in the [Mini2P toolbox](https://github.com/kavli-ntnu/MINI2P_toolbox) repository.