DEV Community: Pascal Lleonart

How to use the gradient method to find the extrema of a two variable function in python?

Pascal Lleonart — Thu, 05 Jun 2025 09:29:47 +0000

The gradient method is used to calculate the maximum (or minimum) of a function near a given point.

The following diagram illustrates this process for a single variable function in two dimensions:

In this diagram the black line represents the graph of the function f. The points A, B, C and D (in red) are points on this graph (with coordinates (xA, f(xA)), etc...).

S1 and S2 (in blue) are also points on the graph, and they are two local maxima.

The green arrows show the path taken by the gradient method: it finds the maximum near the given point by following the slope!

What are we going to do?

We are going to study this two variable function and find its extrema for $\in [-1.2, 1.2]$ thanks to the gradient method.

\R \times \R \longrightarrow \R, (x, y) \longmapsto \sin( \frac{1}{2} x^2 - \frac{1}{4} y^2 + 3 ) \cos( 2x + 1 - e^y )

First of all, lets get this image on your computer!

We'll use matplotlib for graph drawings, so first you have to install it.

Then we have to define some functions.

Define f

To define f, you'll need the sin, cos and exp functions defined in numpy (that will be installed by matplotlib).

Answer

def f(x, y):
    return np.sin(1/2 * x**2 - 1/4 * y**2 + 3) * np.cos(2*x + 1 - np.exp(y))

Display the graph

We can use these lines to plot a set of points whitin the requested interval:

X = np.linspace(-1.2, 1.2, 1000)
Y = np.linspace(-1.2, 1.2, 1000)
X, Y = np.meshgrid(X,Y)
Z = f(X, Y)

Add these lines to display the graph:

ax = plt.figure().add_subplot(projection='3d')
ax.plot_surface(X, Y, Z, cmap=plt.cm.coolwarm)
plt.show()

Define the derivative functions (math incomming)

The gradient method requires the derivative of the relevant function. You can choose to calculate the derivative by hand and then implement it in Python, or you can use the definition of the derivative to save time.

Let $\R \longrightarrow \R$ be a differentiable function. We have:

\R \longrightarrow \R, f'(x) = \lim\limits_{h \rightarrow 0} \frac{f(x + h) - f(x)}{h}

For two variable functions like $\R \times \R \longrightarrow \R$ , we have in fact two different derivatives : the partial derivatives on the both variables, i.e:

\frac{\partial f}{\partial x}, \frac{\partial f}{\partial y}

And with these, we can get the gradient of the function in a given point:

\nabla f (x_0, y_0) = \Big( \frac{\partial f}{\partial x}(x_0, y_0), \frac{\partial f}{\partial y} (x_0, y_0) \Big)

To calculate these, we must select one of the variables and calculate the derivative of the function while treating the other variable as a constant.

E.g:

f(x, y) = x^2 + xy + 3x

First we calculate $∂f∂x\frac{\partial f}{\partial x}$ :

We set y as a constant, so that we can consider $g(x) = x^2 + xy + 3x$ :

$g^{'} (x) = 2 x + y + 3$ So we have $∂f∂x=2x+y+3\frac{\partial f}{\partial x} = 2x + y + 3$
Then we calculate $∂f∂y\frac{\partial f}{\partial y}$ :
We set x as a constant, so we can consider $h(y) = x^2 + xy + 3x$ :

$h^{'} (x) = 0 + x + 0$ So we have $∂f∂y=x\frac{\partial f}{\partial y} = x$
Then we can get the gradient, etc...

Implementing the two Python functions may be difficult, you may need to use lambdas.

You can use d to calculate the derivative of a single-variable function and d2 for two-variables functions.

d2 should return, for f, x0, y0 given, $∇f(x0,y0)\nabla f (x_0, y_0)$ .

Answer

# derivative of a single variable function
def d(f, x0: float) -> float:
    h = 1/10000  # enough for our usage
    return (f(x0 + h) - f(x0)) / h

# derivative of a two variable function
def d2(f, x0: float, y0: float):
    return ( d((lambda x: f(x, y0)), x0), d((lambda y: f(x0, y)), y0) )

I will break down d2:

This function takes a two-variable function as parameter, as well as a pair (the function f and the pair (x0, y0)).
lambda x: f(x, y0) is a function in which the y value is set as a constant (y0 in this case). You can think of it as the g function from the previous example.
d((lambda x: f(x, y0)), x0) will calculate the derivative value of the "g" function at x0.
The same process applies to the second member of the returned tuple.

Now let's talk about the gradient method!

Let's visualize the main principle using another two dimensional example (a single-variable function).

Given point A, we must find the nearest maximum point.

First we need to define what we mean by "near points". In our case, we will consider points that are a distance alpha from A.

We implemented functions to calculate derivatives and with good reason! We can now calculate the derivative of the function in A.

Now that we have the slope, we can identify the point in the "points near A" that "continues" this slope (in this case, point B).

We can find the point B using this formula:

x_B = x_A + \alpha f'(x_A), y_B = f(x_B)

Then, we will continue until we stop moving (we will discuss this in more detail later).

Note: to find the minimum of the function, replace alpha by -alpha.

About the choice of `alpha`

Our alpha should not be too big or too small.

If it is too big, the algorithm may miss nearby local maxima and if it is too small the algorithm will be too slow.

Although there isn't a true method to find a good alpha but you can experiment with different values and then choose the best one.

In our case $α=0.01\alpha = 0.01$ .

And how can we do for two variables functions?

That's the case where we need our gradient.

In this case, we have two variables, and two derivatives, and we are in three dimensions. Therefore, we can use this formula to find B :

x_B = x_A + \alpha \frac{\partial f}{\partial x}(x_A, y_A), y_B = y_A + \alpha \frac{\partial f}{\partial y}(x_A, y_A), z_B = f(x_B, y_B)

You now have all the cards in your hand!

Now we'll use all we've learnt!

We can see that, by definition, this algorithm finds the local maximum near the starting point, rather than the global maximum of the function.

To find the global maximum, we can try on different starting points.

We could select n points at random and run the algorithm on them but how many points should we generate to be sure that we have found the maximum ?

Another approach is to grid the graph with points and run the algorithm on all of them.

Implementing the algorithm for one point

We need to store the x and y coordinates of the last and penultimate points calculated (checking if stagnation is occurring).

To do so, we need an absolute value function and an epsilon constant to determine whether two points are close enough to be considered a maximum (in our case I chose an espilon = 0.01).

Answer

x0 = [0, x] # we suppose x, y are defined
y0 = [0, y]
z0 = f(x0[1], y0[1])

while abs(x0[0] - x0[1]) > epsilon and abs(y0[0] - y0[-1]) > epsilon:
    nablaf = d2(f, x0[1], y0[1])
    x0[0] = x0[1] # we're storing the last points inside a two-sized list
    y0[0] = y0[1]
    x0[1] = x0[0] + alpha * nablaf[0] # change the plus by a minus if you want a minimum
    y0[1] = y0[0] + alpha * nablaf[1]
    z0 = f(x0[1], y0[1])

Implementing the algorithm for the others

We can generate a grid of points like this:

XT = np.linspace(-1.2, 1.2, 20)
YT = np.linspace(-1.2, 1.2, 20)
maxs = [0,0,0] # will be useful for storing the maximum

Then it's just a basic nested for loop with a condition at the end of each iteration!

If you want to see where your maximum point is, you can do this:

plt.plot(maxs[0], maxs[1], maxs[2], 'ro')

At the end we have (-1.2120435693285236, 0.4416799874265309, 0.5109070812327089)

Thanks for reading my article!

If you have any questions, ask them in the comments or on my socials!

github
bluesky
linkedin

Why I'm learning Go in 2025

Pascal Lleonart — Sat, 11 Jan 2025 16:40:03 +0000

As a web developer, I learnt how to use NodeJS for my apps' back-end. But in 2025, I decided to learn Go, and I will detail in this post why.

Summary:

Go is readable
Go has a good std
Go's interfaces are powerful
Performance
Concurrency (goroutines)
Small package ecosystem

Go is readable

Go is verbose, that implies that you can read your code easily after a few months or your team could understand it faster.

gofmt formats our code at each saving, so our code follows the Go spacing, "factoring" conventions... So there is only one way to write code.

"Go's boringness"

Go is boring because the developers behind it wanted to make backward compatibility for the Go's programs. They don't want to break all the Go programs with a breaking change at some point. According to the video below, "Go 2 will never happen", because "Compatibility is more valuable than any break with the past" (or just at Google, they don't want to refactor their entire codebase 👀).

Furthermore, the boringness of a Go programs is that there's not a lot of features in Go, so there is, in a lot of cases, only one way to perform an action.

This is a plus for the understanding of the piece of software that you are debugging, for example.

Good std

Go's std (standard lib) permits you to build fast projects. It includes, an HTTP module for building web servers, a templating library that will permit you to inject data into HTML pages, a database module.

But sometimes, you need to install some dependencies because the std isn't the right thing you need.

For example, you may need to install gorilla/mux to have a router supporting urls with params (I'm talking about "/posts/:id" urls) or you might need a driver to interact with a database (if you want to interact with a SQLite db, you need mattn/go-sqlite3).

Go's interfaces are powerful

I made a post about this:

Small Go interfaces example: proof of identity cards

Pascal Lleonart ・ Jan 11

#go #interfaces #example

Performance

Go is a compiled language, so by definition at runtime it performs better than JS or Python.

Furthermore, Go "generally has lower memory usage due to its efficient garbage collector and lower runtime overhead" "Go vs Node.js : Which is Faster and More Efficient?", by Sandeep

⚔️ Rust vs Go vs Bun vs Node.js: The Ultimate 2024 Performance Showdown 🚀

Hamza Khan ・ Oct 5 '24

#rust #go #bunjs #node

According to this article, Rust is "better" than Go, but the advantage of Go is that Rust is difficult to learn and Go is easier for a developer coming from NodeJS.

Concurrency (goroutines)

The goroutines are lightweight compared to traditional threads. They can be executed simultaneously (on multiple cores) or in parallel, it depends on your system resources. This isn't possible by default with NodeJS.

Another advantage of goroutines over promises is that Go has a secure way to permit communication between goroutines, called channels.

Some resources about goroutines:

Small package ecosystem

This point could be a con for some people coming from NodeJS, but in fact it may be benefit: you can't fall into the "problem? install to solve it" cycle.

In my opinion, the fewer dependencies you have, the strongest is your app because there is less code maintained by external devs. You'll have to update your project less often because of a breaking change in a new version of a dependency.

Furthermore, there isn't a new framework each day that everyone have to try (I'm not aiming at anyone, just follow my gaze ;) ).

The second main con about dependency ecosystem is that there is no Go equivalent for meta frameworks for Adonisjs.

This kind of framework is useful for monolithic apps. But the Go philosophy is developing micro-services, which don't require complex frameworks because the stdlib is sufficient for a small app.

Conclusion

So Go has its pros and cons, it is a really good tool that you could try in 2025. It provides a new way to think about software infrastructure (OOP, interfaces, micro-services, ...). Go's performance is pretty good, compared to Python/NodeJS, and it's easier to learn than Rust.

Small Go interfaces example: proof of identity cards

Pascal Lleonart — Sat, 11 Jan 2025 15:08:45 +0000

This post is a small example for Go interfaces. It is destined for beginners.

In this tutorial we will implement a ProofOfId interface that will permit to define required methods that an object must implement to be considered as a proof of id (such as your ID card, your driving license or your passport...) and a second interface CountriesList which defines the methods required to print a list of countries.

The goal of this tutorial is to learn about how interfaces works and how it "replaces" polymorphism/inheritance in other programming languages.

Project setup

$ mkdir proof-of-identity-checker && cd proof-of-identity-checker

$ go mod init <yourname>/proof-of-identity-checker

Then open your editor in this folder.

Defining our interfaces

Create a new interfaces.go file:

package main

import "time"

type ProofOfId interface {
    getExpDate() time.Time
    getName() string
    getObtentionDate() time.Time
}

type CountriesList interface {
    getCountries() []string
}

So, for a ProofOfId, we except that the object has the methods getExpDate(), getName() and getObtentionDate(), and for CountriesList, we except getCountries() method.

Functions requiring our interfaces

Now we're gonna create a new file named main.go:

package main

import "time"

// check if a proof of id is valid (it checks only dates here ;))
func IdentityVerification(proof ProofOfId) bool {
    // checking if
    // `proof.getObtentionDate() < time.Now() < proof.getExpDate()`
    if proof.getExpDate().After(time.Now()) &&
        proof.getObtentionDate().Before(time.Now()) {
        return true
    } else {
        return false
    }
}

// display in the console the list of the visited countries
func DisplayVisitedCountries(countriesList CountriesList) {
    countries := countriesList.getCountries()
    println("Visited countries:")
    for i := 0; i < len(countries); i++ {
        println(countries[i])
    }
}

For more information about date comparison: https://www.geeksforgeeks.org/how-to-compare-times-in-golang/.

Proofs of identification implementation

Identification card

Create idcard.go:

package main

import "time"

type IdCard struct {
    Name          string
    ObtentionDate time.Time
    ExpDate       time.Time
}

So our object has the required data for our ProofOfId interface. But actually this interface defines required method so we will implement them.

// ...

func (card IdCard) getName() string {
    return card.Name
}

func (card IdCard) getExpDate() time.Time {
    return card.ExpDate
}

func (card IdCard) getObtentionDate() time.Time {
    return card.ObtentionDate
}

Driver's license

Create driver-license.go:

package main

import "time"

type DriverLicense struct {
    Name          string
    ObtentionDate time.Time
    ExpDate       time.Time
    Enterprise    string
}

Please note that we will store a field Enterprise as well (for the driving school's enterprise name).

There's the methods for DriverLicense:

func (license DriverLicense) getName() string {
    return license.Name
}

func (license DriverLicense) getExpDate() time.Time {
    return license.ExpDate
}

func (license DriverLicense) getObtentionDate() time.Time {
    return license.ObtentionDate
}

// this function isn't required for `ProofOfId`, but it may be useful in another context
func (license DriverLicense) getEnterprise() string {
    return license.Enterprise
}

Passport

Create passport.go:

package main

import "time"

type Passport struct {
    Name             string
    ObtentionDate    time.Time
    ExpDate          time.Time
    VisitedCountries []string
}

As you can see, for Passport we're going to implement our two interfaces: ProofOfId and CountriesList.

func (passport Passport) getName() string {
    return passport.Name
}

func (passport Passport) getExpDate() time.Time {
    return passport.ExpDate
}

func (passport Passport) getObtentionDate() time.Time {
    return passport.ObtentionDate
}

func (passport Passport) getCountries() []string {
    return passport.VisitedCountries
}

Testing

Return in main.go and implement a main() function:

// ...

func main() {
    // vars init. You can note that some fields aren't defined.
    // They will contain the default value, "" for strings, etc...)
    idCard := IdCard{
        // = tomorrow
        ObtentionDate: time.Now().Add(24 * time.Hour),
        ExpDate:       time.Now().Add(24 * time.Hour),
    }
    driverLicense := DriverLicense{
        // = yesterday
        ObtentionDate: time.Now().Add(-24 * time.Hour),
        ExpDate:       time.Now().Add(24 * time.Hour),
    }
    passport := Passport{
        ObtentionDate: time.Now().Add(-24 * time.Hour),
        // one hour ago
        ExpDate:       time.Now().Add(-1 * time.Hour),
        VisitedCountries: []string{
            "France",
            "Spain",
            "Belgium",
        },
    }

    println(IdentityVerification(idCard))
    println(IdentityVerification(driverLicense))
    println(IdentityVerification((passport)))

    DisplayVisitedCountries(passport)
}

Now you can run go run . in your cmd:

$ go run .
false
true
false
Visited countries:
France
Spain
Belgium

Conclusion

We saw that interfaces permits to link objects between them by specifying common methods. This is really powerful.

But you can also use interfaces in other languages, like in Typescript or Java.

If you want to learn more about how to use interfaces or inheritance/polymorphism in other languages, you can watch this video from CodeAestethic: The Flaws of Inheritance.

How to upload files to a server in NodeJS with Formidable

Pascal Lleonart — Sat, 07 Dec 2024 09:07:45 +0000

In this blog post, you'll discover Formidable, a light and efficient package for form and file uploading handling.

Project setup

We need to create a new project, so

npm init -y

Then install Formidable:

pnpm add formidable

Note: don't forget to setup the project for ESM (add "type": "module", into your package.json).

Now let's create our app!

Upload

Create a new index.js file:

import http from 'node:http'
import formidable, {errors as formidableErrors} from 'formidable'

const FORM_TEMPLATE = `
  <form action="/upload" enctype="multipart/form-data" method="post">
    <input type="text" name="filename" />
    <input type="file" name="files" multiple="multiple" />
    <input type="submit" value="Upload" />
  </form>
`

createServer((req, res) => {
  if (req.url === '/upload' && req.method.toLowerCase() === 'post'){
    const form = formidable({
      // we'll put our formidable config later
    })
    let fields
    let files
    try {
      [fields, files] = await form.parse(req)
    } catch (err) {
      console.error(err)
      res.writeHead(err.httpCode || 400, { 'Content-Type': 'text/plain' })
      res.end(err.message)
      return
    }
    res.writeHead(200, { 'Content-Type': 'application/json' })
    res.end(JSON.stringify({ fields, files }))
    return
  }

  // show the form
  res.writeHead(200, { 'Content-Type': 'text/html' })
  res.end(FORM_TEMPLATE)
})
  .listen(3000)

We are going to configure our Formidable instance.

const form = formidable({
  uploadDir: 'uploads',
  keepExtensions: true,
  filename: (name, ext, part, form) => {
    // don't forget to import `randomBytes` from `crypto` module
    return `${name}.${randomBytes(8).toString('base64url')}${ext}`
  }
})

We are putting a random file id that will permit users to upload files with the same name without overriding them.

Error handling

In the catch, you can decide to put a custom error message on a specific error.

    // ...

    } catch (err) {

      console.error(err)      
      res.writeHead(err.httpCode || 400, { 'Content-Type': 'text/plain' })

      if (err.code === formidableErrors.maxFieldsExceeded) {
        res.end("max fields exceeded")
        return
      }

      res.end(err.message)
      return
    }

    // ....

View file

Add this line on the top of your server handling function:

const url = new URL(req.url, `http://${req.headers.host}`)

This will serve to parse our url path, params, etc...

Now, after our if (req.url === "/upload" ...), put this condition:

if (url.pathname === "/file") {
  const filepath = url.searchParams.get("path")
  const fileContent = await readFile(`./uploads/${filepath}`)
  res.writeHead(200, { 'Content-Type': "text/plain" })
  res.end(fileContent)
  return
}

You need to import readFile from fs/promises.

But we have a little problem: if we have an image, for example, the Content-Type of the response won't match if the current response's body format. To avoid this we need to have a new function that will search for the format of a file depending on its extension.

Response & file format matching

Create a new file named content-types.json:

{
    "jar": "application/java-archive",
    "ogg": "application/ogg",
    "pdf": "application/pdf",
    "xhtml": "application/xhtml+xml",
    "json": "application/json",
    "app/xml": "application/xml",
    "zip": "application/zip",

    "gif": "image/gif",
    "jpeg": "image/jpeg",
    "png": "image/png",
    "tiff": "image/tiff",
    "svg": "image/svg+xml",

    "multipart/mixed": "multipart/mixed",
    "multipart/alternative": "multipart/alternative",
    "multipart/related": "multipart/related (using by MHTML (HTML mail).)",
    "multipart/form-data": "multipart/form-data",

    "css": "text/css",
    "csv": "text/csv",
    "html": "text/html",
    "js": "text/javascript",
    "txt": "text/plain",
    "xml": "text/xml",

    "mpeg": "video/mpeg",
    "mp4": "video/mp4"
}

These are some file formats, if you want, add others...

Then, create a new function called getFileFormat in your index.js file:

async function getFileFormat(filename) {
  const supportedContentTypes = JSON.parse(await readFile("./content-types.json", "utf8"))

  const ext = filename.split('.')[filename.split('.').length-1]

  return supportedContentTypes[ext] ?? "text/plain"
}

This function will get the content of content-types.json and will get the associated format. If it's undefined it will return the default text/plain.

Then you need to edit your http Content-Type header:

if (url.pathname === "/file") {
  // ...

  res.writeHead(200, { 'Content-Type': await getFileFormat(filepath) })

  // ...
}

Testing

Now you can test your application!

To get the upload form, visit /, that will return you to /upload that tell you some informations about the POST request (where the current file is saved). Then you can get the file name and go to /file?path=<the file name> to get the file in your browser.

How to build a text editor app in typescript (svelte 5 + monaco-editor)

Pascal Lleonart — Tue, 26 Nov 2024 21:12:40 +0000

In this post we'll create a small website that will permit the user to edit files with monaco-editor, select the file format and download it on their computer.

Features that we'll implement:

file editing
file name editing
language picker
download button

Project setup

First, let's install Svelte:

npx sv create myapp

Make sure to select typescript.

Now move into the new folder and install monaco-editor:

pnpm install -D @monaco-editor/loader

Coding time!

Adding the editor into the window

Let's create a MonacoEditor.svelte into our components folder:

<script lang="ts">
    import { type Monaco } from '@monaco-editor/loader'
    import { onDestroy, onMount } from 'svelte'

    let container: HTMLElement
    let monaco = $state<Monaco | undefined>()

    onMount(async () => {
        // we'll setup monaco here
    })

    onDestroy(() => {
        // we need to provide a way to delete our component, so our editor too
    })
</script>

<div id="editor-container" bind:this={container}></div>

<style>
    /* some styles */
    #editor-container {
        width: 100%;
        height: 600px;
    }
</style>

So we need to implement the functions that will setup our editor and delete it properly.

So let's create a file .src/lib/editor.ts:

import loader, { type Monaco } from '@monaco-editor/loader'


type SetupEditorOptions = {
    content?: string
    language?: string
}

export async function setupEditor(container: HTMLElement, options: SetupEditorOptions) {
}

export function deleteEditor(monaco: Monaco) {
}

As you can see, to setup the editor, will need a HTML container and a default content and language.

For the removing system, we need to get all different editors of monaco and delete them. Here's the implementation:

export async function setupEditor(container: HTMLElement, options: SetupEditorOptions) {
    const monaco = await loader.init()

    monaco.editor.create(container, {
        value: options.content ?? "",
        language: options.language ?? "text"
    })

    return monaco
}


export function deleteEditor(monaco: Monaco) {
    const editors = monaco?.editor.getEditors()
    monaco?.editor.getModels().forEach((model) => model.dispose())
    editors?.forEach(editor => editor.dispose())
}

In the MonacoEditor we have now:

<script lang="ts">
    import { type Monaco } from '@monaco-editor/loader'
    import { onDestroy, onMount } from 'svelte'
    import { deleteEditor, setupEditor } from '$lib/editor'

    let container: HTMLElement
    let monaco = $state<Monaco | undefined>()

    onMount(async () => {
        monaco = await setupEditor(container, {})
    })

    onDestroy(() => {
        if (monaco) deleteEditor(monaco)
    })
</script>

Now we can put our MonacoEditor component into our ./src/pages/+page.svelte (our homepage):

<script>
    import MonacoEditor from "../components/MonacoEditor.svelte"
</script>

<MonacoEditor />

And run, you can see that here's an editor in your window:

Change the editor's language

Now we want to have a <select> that will permit to the user to change the coloration of the text.

We create ./src/components/SelectLangForm.svelte:

<script lang="ts">
    let { monaco } = $props()

    let lang = $state("text")

    $effect(() => {
    })
</script>

<select bind:value={lang}>
    <option value={"javascript"}>js</option>
    <option value={"python"}>py</option>
    <option value={"text"}>txt</option>
    <!-- ... -->
</select>

We want to implement a function that will update the language of the editor, so in our ./src/lib/editor.ts, we'll add this:

export function setLang(monaco: Monaco, language: string) {
    // we are getting the last editor to stock their text content and HTML container
    const lastEditor = monaco.editor.getEditors()[0]
    const lastEditorValue = lastEditor.getValue()

    deleteEditor(monaco)  // we don't need it anymore, so we delete him

    // we don't have any editor left, so let's create another
    monaco.editor.create(lastEditor.getContainerDomNode(), {
        value: lastEditorValue,
        language: language
    })

    return monaco
}

Now our SelectLangForm looks like this:

<script lang="ts">
    import { setLang } from "$lib/editor"

    // ...

    $effect(() => {
        // if lang changes, change it in the editor too
        if (monaco) monaco = setLang(monaco, lang)
    })
</script>

Now we need to call this component into MonacoEditor:

<script lang="ts">
    // ...

    import SelectLangForm from './SelectLangForm.svelte'

    // ....
</script>

<div class="banner">
    <SelectLangForm {monaco} />
</div>

You can run now and test it!

Customize file name

Now we want to edit the file name.

So we need to create a new component called FileNameInput.svelte:

<script>
    let { fileName = $bindable() } = $props()
</script>

<input type="text" bind:value={fileName}>

We need the fileName property bindable for reactivity.

Now let's integrate this new component into our main one:

<script lang="ts">
    // ...

    import SelectLangForm from './SelectLangForm.svelte'
    import FileNameInput from './FileNameInput.svelte'

    let container: HTMLElement
    let monaco = $state<Monaco | undefined>()
    let fileName = $state("untitled.txt")  // we declare our state here, with a default value

    //....
</script>

<div class="banner">
    <FileNameInput bind:fileName={fileName} />
    <SelectLangForm {monaco} />
</div>

File download

Now we want that if the user clicks on a button, the current file is downloaded.

So let's create another component (the last one :)) DownloadFileButton.svelte:

<script lang="ts">
    function formatFile(content: string) {
        return `data:text/plain;charset=utf-8,${encodeURIComponent(content)}`
    }

    function save() {
    }

    let { monaco = $bindable(), fileName = $bindable() } = $props()

    let href = $state(formatFile(""))
</script>

<svelte:window on:keydown={save} />

<a download={fileName} {href}>
    Download file
</a>

Ok so when a key is pressed, the save() function will be called to get the editor's content and to put convert it into a kind of data link (the file content).

We need to implement the function that will get the editor's content, so in lib/editor.ts let's add this:

export function getEditorValue(monaco: Monaco) {
    return monaco.editor.getEditors()[0].getValue()
}

Now our component looks like this:

<script lang="ts">
    import { getEditorValue } from "$lib/editor"

    function formatFile(content: string) {
        return `data:text/plain;charset=utf-8,${encodeURIComponent(content)}`
    }

    function save() {
        href = formatFile(getEditorValue(monaco))
    }

    // ...
</script>

<!-- ... -->

Now if we run we have something like this.

As a homework, you'll need to bring new features to this app!

Bye, and thank you for reading this post!

DEV Community: Pascal Lleonart

How to use the gradient method to find the extrema of a two variable function in python?

What are we going to do?

First of all, lets get this image on your computer!

Define f

Display the graph

Define the derivative functions (math incomming)

Now let's talk about the gradient method!

About the choice of alpha

And how can we do for two variables functions?

Now we'll use all we've learnt!

Implementing the algorithm for one point

Implementing the algorithm for the others

Thanks for reading my article!

Why I'm learning Go in 2025

Go is readable

"Go's boringness"

Good std

Go's interfaces are powerful

Small Go interfaces example: proof of identity cards

Pascal Lleonart ・ Jan 11

Performance

⚔️ Rust vs Go vs Bun vs Node.js: The Ultimate 2024 Performance Showdown 🚀

Hamza Khan ・ Oct 5 '24

Concurrency (goroutines)

Small package ecosystem

Conclusion

Small Go interfaces example: proof of identity cards

Project setup

Defining our interfaces

Functions requiring our interfaces

Proofs of identification implementation

Identification card

Driver's license

Passport

Testing

Conclusion

How to upload files to a server in NodeJS with Formidable

Project setup

Now let's create our app!

Upload

Error handling

View file

Response & file format matching

Testing

How to build a text editor app in typescript (svelte 5 + monaco-editor)

Project setup

Coding time!

Adding the editor into the window

Change the editor's language

Customize file name

File download

About the choice of `alpha`