DEV Community: Mary Alice

Python Browser Compilers

Mary Alice — Mon, 14 Apr 2025 14:05:16 +0000

Ever since JavaScript became the default language for web browsers, the demand for technology that could translate to it has been unending. Assemblers and compilers, two subsets of translators, are the technology used to perform this conversion from another programming language to JavaScript.

With Python becoming the most common "first language" for developers due to the simple syntax, the demand for a Python compiler is great. Coupled with its powerful back-end capabilities, it is clear why programmers are looking to use it to build an entire application.

It's been a dream of many programmers to use Python instead of JavaScript for front-end coding, but there is a simple unmovable obstacle. Browsers all support JavaScript, but not Python”

Marc Nealer, Practical Brython

My original intent in writing this piece was to delve into three prominent Python-to-JavaScript compilers: Brython, Transcrypt, and Pyodide. I began with Brython because it had the most accessible documentation. As I explored it more deeply, the focus of this post naturally shifted. The length got away from me, and rather than attempt to summarize all three superficially, I decided to give Brython the spotlight it deserved.

Unlike Transcrypt—which compiles Python to JavaScript ahead of time and is maintained collaboratively with no single project owner—or Pyodide, a WebAssembly-based solution that loads a full Python runtime in the browser, Brython takes a different approach. It inserts Python code directly into HTML and interprets it at runtime, providing a uniquely accessible way to write Python for the browser.

Brython

With a name meaning "Browser Python", it is fitting for Brython to top many lists of these compilers. Straightforward and Python focused, Brython describes itself as an implementation of Python3 running in the browser. Brython is especially appealing to Python developers because it supports the full functionality of Python. Since version 3.8.0, Brython has updated to match the newest version of Python with the same version number. It interfaces directly with the DOM by inserting Python code directly inside HTML5 with script tags.

<script type="text/python">
...
</script>

A full example of a simple HTML page running Python might look like this:

<html>
    <head>
        <script src="/path/to/brython.js"></script>
    </head>
    <body>
        <script type="text/python">
        from browser import bind, document, alert
        @bind(document['mybutton'], 'click')
        def echo(event):
            alert(document["zone"].value)
        </script>
        <input id="zone"><button id="mybutton">click !</button>
    </body>
</html>

Events cannot be triggered by a script in the HTML. Handling is done inside the Brython code by binding event listener functions to HTML elements. Programmers have the option to bind by id, class, tag, or attribute.

from browser import document, bind

# get the element from the document
el = document["mybutton"]

#set up a function to be called
def button_clicked(evt):
    print("mybutton clicked")

#bind the element to the function so it is run when the event occurs
el.bind("click", button_clicked)

Pros

Pure Python: No need to dive deep into JavaScript.
Direct DOM Access: Using Python instead of JS syntax.
Great for Learning: Excellent for Python learners exploring the browser environment.

Cons

Performance: Because Brython interprets code at runtime, load times are slower than precompiled tools.
Limited Ecosystem: It doesn’t support many popular Python packages.
Still Need HTML/CSS: Brython replaces JavaScript, not the rest of the frontend stack.

Quick Glance at Transcrypt and Pyodide

Just to highlight how Brython compares:

Transcrypt compiles Python to JavaScript before the code ever hits the browser. It offers better performance, access to JS libraries, and even offers React integration.

Pyodide brings the full CPython runtime into the browser via WebAssembly. It is incredibly powerful for scientific computing but can be heavy and slow to load.

Final Thoughts

Brython offers a unique approach for developers who want to stay in Python while working on the frontend. It may not be ideal for every production use case, but for rapid prototyping, educational projects, or Python-first workflows, it’s a surprisingly fun and effective tool.

Sources

Brython
Transcrypt Github
Pyodide Official Site
Marc Nealer, Practical Brython

Photo Metadata Standards: IPTC, EXIF, and XMP

Mary Alice — Mon, 31 Mar 2025 13:55:58 +0000

Data about Data

Metadata is structured information that provides context and details about other data in a way that eases management, understanding, retrieval, and use. The three basic types are descriptive, structural, and administrative.

What is Photo Metadata

Just like traditional metadata, photo metadata has three main categories. Descriptive and administrative carry over, but in place of structural, photo metadata has a rights category.

Descriptive Metadata: This category helps to describe the content, context, and features of the image. It may include titles, captions, keywords, and the creator of the image. This helps people to understand and locate the image easily.
Administrative Metadata: This includes technical details like file format, resolution, and camera settings, as well as access controls, and rights management. It’s crucial for managing the image file and ensuring proper usage.
Rights Metadata: Unique to photo metadata, this category provides information on copyright, licensing, usage restrictions, and any permissions attached to the image. It is critical for ensuring that creators' intellectual property is protected.

International Press Telecommunications Council

The IPTC Information Interchange Model (IIM) was developed in the early 90s to optimize the exchange of information to news agencies around the world by standardizing media file structures and metadata attributes. Although originally created for the press, the structure became accepted as the world standard for embedding information by professional photographers. Called “IPTC headers,” this data is encoded and decoded by photo editing software.

The IPTC template outlines how metadata should be organized and stored within an image file. It consists of key fields like the image’s headline, description, copyright information, keywords, and creator details, all of which enhance the image’s discoverability and legal protection. The IPTC metadata template is typically embedded in the file, ensuring it remains with the image wherever it goes.

This standardized structure allows photographers, agencies, and organizations to maintain consistency when managing large numbers of images, simplifying processes like search and retrieval, rights enforcement, and licensing.

Exif (Exchangeable Image File Format)

Exif is a widely used standard for storing metadata in image files. Exif data captures technical details about an image, such as the camera model, exposure settings (shutter speed, aperture, ISO), date and time, and geolocation (when GPS data is available). These details are crucial for photographers, as they provide insight into how the photo was taken and can serve as a reference for future shoots. Additionally, Exif can store information about the orientation of the photo (landscape or portrait) and allow image editing software to automatically rotate images if needed.

Exif also integrates seamlessly with IPTC, making it an essential part of modern photography workflows.

XMP (Extensible Metadata Platform)

XMP is an Adobe-developed standard that provides a more flexible and extensible way to store metadata across various types of digital media. It extends the capabilities of traditional metadata standards, allowing for custom fields to be added to an image’s metadata, making it particularly useful in creative industries.

XMP metadata can be embedded in various file types like images, audio, video, and PDFs, making it a universal standard for digital asset management. It allows for better interoperability between different software platforms and ensures that metadata travels with the file, even across different applications.

XMP can also contain rights information, geo-tagging, and user-generated metadata, helping photographers and content creators maintain control over their digital assets and better track usage rights.

Conclusion

Metadata might be behind the scenes, but it's an essential component to digital content. Whether it's IPTC helping with organization, Exif showing how a photo was taken, or XMP keeping things flexible across platforms, metadata makes it easier to manage, share, and protect images. Knowing how it works gives photographers and creators the control they need to process and take ownership of their work.

Sources

IPTC
CIPA

Trust the Process (Object)

Mary Alice — Tue, 18 Mar 2025 04:56:47 +0000

Node.js process object

Node.js has a number of built-in, global objects and object models available across modules. These objects have an important role in Node's runtime environment and server-side JavaScript execution. They allow programmers to interact with the Node.js process by providing information (console for instance) and control (require, setTimeout, setInterval) for the currently running process.

Today I'll be diving into the process object, an instance of the EventEmiter class. As a whole, EventEmitter allows one to create custom and event-driven programming. Because of this, process provides information and control over the literal process currently operating in node.

Properties and Methods

Like all objects, process is composed of properties and methods. They help programmers manage everything from environment variables, event handling, and control over the process lifecycle itself. The process object itself can have as many as 90-100 of these properties depending on the version, so I've chosen four to go over below that pertain specifically to the Process Environment.

1. `process.env`

Type: Object
Purpose: Stores environment variables for the current Node.js process. These are often used for configuration, such as storing sensitive data (API keys, login credentials, database access). The data is stored in a .env file in the project repo. For security, the file remains on the programmer's local repo and should never be pushed to the public bundle.

console.log(process.env.NODE_ENV); // 'production' or 'development'
console.log(process.env(process.env.API_KEY); // Access the API key from the .env file

2. `process.on()`

Type: Method
Purpose: Listens for and handles events occurring during the Node.js lifecycle. This is the way to attach operations to process.exit, as calling that terminates the Node.js process immediately. It can also be utilized with uncaughtException and SIGINIT (other events that kill the process) with a callback process.on(event, callback)

process.on('exit', (code) => {
  console.log(`The process is exiting with code: ${code}`);
});

process.on('uncaughtException', (err) => {
  console.error('An uncaught error occurred:', err);
});

3. `process.argv`

Type: Array
Purpose: When you run a Node.js script, you can pass arguments directly into the command line. These arguments can later be accessed through process.argv. Command-line arguments in node always contain at least 2 arguments: the path to the Node executable (Node binary) and the path to the script being run. Additional arguments can be passed in after. A basic script run with arguments like:

node app.js --name=Josh --city=Nola

Would have a process.argv containing:

[
  '/usr/local/bin/node', // Node binary path
  '/path/to/app.js',     // Path to the script
  '--name=Josh',         // Arg 1
  '--city=Nola'          // Arg 2
]

4. `process.stdin`, `process.stdout`, and `process.stderr`

Type: Streams
Purpose: Standard input, output, and error streams that allow interaction with the console or other processes. They are useful for handling user input, logging, and error reporting.

//reading user input from the terminal
process.stdin.on('data', (data) => {
  console.log(`You entered: ${data.toString().trim()}`);
});

// writing to stdout and stderr
process.stdout.write('This is standard output\n');
process.stderr.write('This is an error message\n');

Mastery of the process object starts with understanding its most essential properties. We've covered four key ones, but there are many more to explore. From managing environment variables to handling system signals and performance monitoring, these properties give developers powerful control over their Node.js applications.

Node.js

There's Something About Esri

Mary Alice — Thu, 06 Feb 2025 19:30:01 +0000

Since the launch of their first commercial software in 1982, the Environmental Systems Research Institute, Inc (now known simply as Esri) has been a dominant force in geospatial technology. Exactly how much of the market Esri controls is debatable (the widely cited 43% dates back to a report published in 2015), but its status as an industry leader cannot be denied. Their cited user metrics are staggering:

Anyone familiar with Geographic Information Systems would not be surprised by any of these figures. Esri, and its flagship software ArcGIS, are so ubiquitous in the field that they have become nearly synonymous with the concept as a whole.

My intent with this piece was to pinpoint why Esri is so dominant. The problem is, they do everything and they always have. So what is that magic touch?

See line 1 of the table above.

Early Entry and Continued Innovation

The history of Esri is essentially a history of geospatial technologies as a whole. Founded by husband and wife team Jack and Laura Dangermond in 1969 as a land management firm, Esri was one of the earliest companies in the GIS space. They served private clients and established a strong foothold in the market, and then continued to set standards with crucial software innovations.

Esri's GIS command-line based workstation ARC/INFO was among the first of its kind to hit the market in 1982. ArcView 1.0 (1991) tackled accessibility with a GUI geared toward users that only needed to view and query the spatial data from their command-line products.

Advent of the Shapefile

Through out the 90's Esri focused on improving ArcView, with each release adding new functionality and features. For one, the now ubiquitous Shapefile form (Esri's own digital vector storage type for grouping geographic location data and associated attributes) premiered with ArcView 2.x. Each new iteration saw increased functionality, and with the release of ArcView GIS 3.x in 1997 it had enough capabilities and functions to be considered a true (but limited) GIS platform. Esri also had a programming library (Map Objects) and a relational database system (ArcSDE), but all of these products were a la carte and the interoperability was not there.

In 1999 Esri combined these crucial components with the release of the ArcGIS software suite. The ArcGIS package bundled three crucial components: functionality and analysis (the Arc/INFO workstation), a visual user interface (new GUI dubbed ArcMap), and a file management system (ArcCatalog). The "one million licensed seats" milestone was met shortly after in 2001.

Component Libraries, Tools, and Extensions

The subsequent versions of ArcGIS came packed with extensions and increasing access to online data. Users could perform advanced 3D modeling, complex analysis, and compare across multiple databases. The 2000 launch of their spatial server ArcIML and ArcXML completely opened up geospatial data once stowed away in government databases to the world.

Modern Platforms and Innovations

Today Esri has two primary platforms: ArcGIS Online and ArcGIS Pro. ArcPRO is the supercharged desktop software with groundbreaking functions and tools. Users can manage their spacial data, perform advanced analytics, and create complex 2D, 3D, even 4D models

ArcGIS online has data management and analyzation capabilities as well, but with limitations. Where online shines is in the ability to collaborate and quickly share maps and findings.

Esri continues to integrate with new technologies, such as AI, machine learning, IoT, and 3D modeling. The cover image for this piece is actually one such example, it's an example of Esri's AI-generate art!

While there are other GIS platforms (e.g., QGIS, Google Earth, MapInfo), ArcGIS's combination of history, functionality, and ecosystem has made it the most widely used and recognized GIS software in the world.

Sources

Cover Image
ArcIMS and ArcXML Images
Esri History of GIS timeline
Esri

Webpack: the six concepts to know to get started

Mary Alice — Mon, 27 Jan 2025 14:57:50 +0000

`npm install`

To think: a few weeks ago, I didn’t even realize I needed to run an npm install every time I cloned down a repo. "I've already installed node and npm!"

Turns out installing npm on your machine one time does not magically manage node modules for all your projects. That's where build tools can come into play.

Build tools operate by creating module bundles that are themselves sent as a group to the browser. Webpack is the leading build tool, a “static module bundler for modern JavaScript applications”. Let's unpack that webpack.

Modules

The most basic layer of a module is an independent .js file. They operate independent of other files in the same folder, unless of course we invoke the import and export keywords.

export : allows the module to be public code
import : passes down public code from module to another.

The 6

Entry Points

This is the module Webpack uses to build out the internal dependency graph.
By default it’s the index.js file.
To choose a different main module, we can set an entry point property in the webpack configuration file

module.exports = {
    entry: './entry/file/path.js',
};

Dependency Graphs

Webpack will take your entry point and process your project for the modules it depends on. From there, it will bundle all the dependencies into a single file. This allows everything your project relies on (async operations, non-code files, external scripts) to be exported to the browser and executed as a module.

Output

Can also be configured in the webpack configuration file. This is the destination of the bundle or bundles. By default it loads to ./dist, and like the entry you can specify an output in your configuration file.
const path = require('path');

module.exports = {
  entry: './entry/file/path.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-webpack.bundle.js',
  },
};

Loaders and Plugins

transform non-code files to be part of the webpack configuration and the dependency graph
converts files such as css, font families, and images into valid JavaScript modules
2 main properties

test: checks if a file needs to be converted
use: decides which loader will do the conversion

Can set rules (under module.rules for test and use )

const path = require('path');

module.exports = {
  output: {
    filename: 'my-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

Backbone of webpack’s plugin interface is the Tapable utility library. Plugins allow for customization in the compilation process. Plugins have access to a module’s compiler and hook into key events.

Modes

3 parameters: 
development:
production : default mode
none : to opt out of any default optimization options

This allows users to specify the node environment and determines how the builtin webpack optimizations should be deployed. Of course, mode is set in your Webpack configuration file.

Browser Compatibility and Programming Environment

Out of the box, Webpack ensures that your code is ES5-compliant, meaning it will run on older browsers that do not support newer ECMAScript features.

To use Webpack 5, all you need is Node.js version 10.13.0 or higher. It’s that simple!

Image
JavaScript.Info
webpack.js - Getting Started

Python for Javascript Newbies

Mary Alice — Mon, 20 Jan 2025 06:44:04 +0000

As a fledgling programmer, you quickly start exploring the endless possibilities—what other projects can I work on? What skills do I need to master? For me, all roads are pointing to Python. Can I really start learning a new programming language when I don't even have a mastery of JavaScript?

Scary Name 🐍 Friendly Language

Python is remarkably readable, and the variables feel strikingly similar to those in JavaScript. Proponents of Python laud the concise, clear, and readable syntax. The simplicity of its language makes it a popular first language for burgeoning developers who want to start coding immediately.

Now I wonder, will their similarities only confuse me? So I'm putting together my first Python primer—a simple cheat sheet designed to help me (and maybe you!) leverage our JavaScript knowledge to get a head start in Python.

This list will work backward: from the most similar to the drastic differences. Of course, I'll focus on the aspects I think will confuse me the most.

Straight Across Similarities

High Level Interpreted Programming Languages
Support functional and imperative paradigms
Lexical Scoping
Object Oriented

Primitive Data-Types

Strings: sequences of characters wrapped in quotes, immutable.
Numbers: Python differentiates integers (int) and decimals (float) vs. JavaScript's singular Number type.
Booleans: JavaScript has true and false, Python True, False, and a bool() function.
No Value: Python employs a simple None in place of JavaScript's null and undefined.

Functional Equivalents

	Javascript	Python
Cases	🐪 camelCase 🐪	🐍 snake_case 🐍
Console Logs	console.log('hello')	print('hello')
Pseudocode	`// single line`	`# single line`
And when you can't be concise	/* multi - line*/	''' multi - line '''
[collections]	[array]	[list]
{key - value structure}	{object}	{dict}

Conditionals

if...else if...else vs if…elif…else

This one had me laughing at first. Python takes simplicity to the extreme with "elif"...because "else if" is just too long.

So this JavaScript

let weather = 'rainy'

if (weather ==== "sunny") {
   console.log("It's a great day to go outside!");
} else if (weather === "cloudy") {
   console.log("It might be a good idea to carry an umbrella.");
} else if (weather === "rainy") {
   console.log("Don't forget your umbrella!");
} else {
   console.log("Be prepared for anything");

Becomes this in Python

weather = 'rainy'

if weather == "sunny":
    print("It's a great day to go outside!")
elif weather == "cloudy":
    print("It might be a good idea to carry an umbrella, just in case.")
elif weather == "rainy":
    print("Don't forget your umbrella!")
else:
    print("Weather condition is unknown. Stay prepared for anything!")

Notice anything else strange in the code above? Maybe some unfamiliar syntax?

This is where I know I'll get confused

Syntax

Python formatting relies on whitespace. Indentations take the place of semicolons and parentheses. Code block separated with new lines and colons, with curly braces relegated to the key-value {dict} mentioned above. Advocates say this all works in favor of Python's famous simplicity, but I fear this clean code lacks the clarity found in JavaScript.

Declaration

Although on its face a simple rule, I chose to put the differences in variable declaration last in this list. Initiating with var was the first thing I learned in JavaScript, so it feels unnatural leaving it (along with let and const) out of variable creation.

We'll still need to declare functions. In Python, JavaScript's function keyword is replaced with def.

function add(a, b) {
   return a + b;
 }

def add(a, b):
   return a+ b

Transitioning from JavaScript to Python offers a unique blend of familiarity and challenge. With its clear syntax and versatility, Python offers an approachable yet powerful language for developers, especially those looking to expand their coding toolkit. As I continue to explore, it’s reassuring to know that with a solid foundation in JavaScript, I'm well on my way to becoming a "snake charmer".

Sources

Python 101 for JavaScript Developers
How to Learn Python for JavaScript Developers
W3schools Python Booleans
W3schools Python Introduction
Image created with Canva

Strings -- Manipulating the Immutable.

Mary Alice — Fri, 15 Nov 2024 21:38:20 +0000

String Theory

In the beginning, we learn about data types. Simple and Complex. Primitive and abstract.

Primitive is inherently simple. Two categories are reserved for the alphanumeric characters we are introduced to as children, and the third would not be out of place on a grade school worksheet.

This permanence is the defining difference between primitive and complex data. Immutability the explicit characteristic of simple data.

So how does one one manipulate the immutable?

Methods: Destruction and Creation

JavaScript Methods are “built in” functions that are associated with specific data types. When first learning the basic methods, I wasn't sure if (or when) syntax required an assignment operator.

The method's manner of data manipulation dictates the presence of an assignment. Destructive methods (🚫 =) manipulate data in place, while non-destructive (✅ =) create new values.

Simply put, all string methods are returning a new variable or data value. The original string remains immutable. They all will have assignment operators and return values.

Basic String Methods

.length
returns the length of a string

var str = ‘simple’;
var len = str.length;
console.log(len); // logs 6 to the console
console.log(str); // logs 'simple'

.concat()
joins two or more strings

var str1 = 'simple simon';
var str2 = 'pie man';

// string to be concatenated takes joiners
var combo = str1.concat(' met a ', str2); 

console.log(combo) // 'simple simon met a pie man'

.split
returns an array

var str = 'A,B,C'

// takes in optional separator
var arr = str.split(',')
console.log(arr)// ["A","B","C"]

// empty quotes returns each value as an index
var arr = str.split('')
// returns["A",",","B",",","C"]

// no separator returns whole string at [0]
var arr = str.split()
// ["A,B,C"]

Extraction Methods
return a specified portion of a string

.slice

var str = 'simple simon'
// takes a start and end parameter (non-inclusive)
var portion = str.slice(0, 6) // start at 0 index, stop before 6
console.log(portion) // logs 'simple' to the console

// returns empty if start > end
var portion = str.slice(3, 2) // start at 3 index, end before 2
console.log(portion) // logs '' to the console


// negative numbers start count at the end of the string
// lack of stop value indicates portion extends to end of string
var portion = str.slice(-5) // start at 5th index from end
console.log(portion) // logs 'simon' to the console

.substring

var str = 'simple simon'

// like slice (start, end) but <0 is treated as 0
var portion = str.substring(-5)
console.log(portion) // logs 'simple simon' to the console

.substr

var str = 'simple simon'

// takes (start, length) 
// use in place of .slice when end < start 
var portion = str.substr(3, 2) // start at 3 index, take 2 characters
console.log(portion) // logs 'pl' to the console

// negative numbers start parameter like slice
// negative length treated as 0 characters
var portion = str.substr(-1, 1) // start at -1, return 1 character
console.log(portion) // logs 'n' to the console

var portion = str.substr(2, -5) // 
console.log(portion) // logs '' to the console

Simply Transformative

In JavaScript, manipulation is not an exact synonym for how we use it in regular communication. The change occurs because a new value is created, but the original data is retained.

Although seemingly simple at first, these methods become vital down the road. For example, when looping an array of strings, the methods used on each iteration will be those of strings, not of arrays. Like it's components, string manipulation is straight forward and valuable.

Image Credit
Eloquent JavaScript

DEV Community: Mary Alice

Python Browser Compilers

Marc Nealer, Practical Brython

Brython

Quick Glance at Transcrypt and Pyodide

Final Thoughts

Sources

Photo Metadata Standards: IPTC, EXIF, and XMP

Data about Data

What is Photo Metadata

International Press Telecommunications Council

Exif (Exchangeable Image File Format)

XMP (Extensible Metadata Platform)

Conclusion

Sources

Trust the Process (Object)

Node.js process object

Properties and Methods

1. process.env

2. process.on()

3. process.argv

4. process.stdin, process.stdout, and process.stderr

There's Something About Esri

Early Entry and Continued Innovation

Advent of the Shapefile

Component Libraries, Tools, and Extensions

Modern Platforms and Innovations

Sources

Webpack: the six concepts to know to get started

npm install

Modules

The 6

Entry Points

Dependency Graphs

Output

Loaders and Plugins

Modes

Browser Compatibility and Programming Environment

Python for Javascript Newbies

Scary Name 🐍 Friendly Language

Straight Across Similarities

Primitive Data-Types

Functional Equivalents

Conditionals

if...else if...else vs if…elif…else

This is where I know I'll get confused

Syntax

Declaration

Sources

Strings -- Manipulating the Immutable.

String Theory

Methods: Destruction and Creation

Basic String Methods

Simply Transformative

1. `process.env`

2. `process.on()`

3. `process.argv`

4. `process.stdin`, `process.stdout`, and `process.stderr`

`npm install`