DEV Community: William Rågstad

Write a language in a week - Theory

William Rågstad — Wed, 06 Apr 2022 08:28:00 +0000

Warning! This article is still under construction!

To fully understand something, one must ask why until the most fundamental concepts unfolds.
Let's start with the most basic question.

What is a programming language?

A programming language is a formal language used by humans to write computer programs, consisting of a set of rules that define the structure. In addition to the languages themselves, a compiler is used to convert the program written in the language into a form that can be executed by a computer (a machine), or directly evaluated by an interpreter.

From the information given above, we can deduce that a programming language is simply the structural rules of the programs.
Like natural languages such as English, German, French, Spanish, etc., many programming languages share similar syntax and semantics, and use English as the base language for keywords and identifiers.

< Previous chapter | Chapter 1 | Next chapter coming soon!

Write a language in a week - Introduction

William Rågstad — Wed, 06 Apr 2022 08:13:42 +0000

In this short series, together we will implement a programming language in just one week. This is a challenge for all developers out there who are interested in developing their skills and gaining a deeper understanding of the general principles on which programming languages are based.

I truly believe that every programmer should at least have tried to write their own little toy language in their career, if not just because it's an incredibly creative and fun experience!

We will start with the basics, theory and glue for the whole project. It is important to obtain a good understanding of the goal, methods and techniques before actually implementing anything in code.

All code will be written in Python, this may be a somewhat controversial choice, but will in my opinion get general concepts and ideas across with much less friction. So, all knowledge gained from these tutorials will be easily transferable and you should not be hindered by unfamiliar syntax.

Goal

So what's the point of all this?
My hope is to share some knowledge and encourage fellow interested developers to take interest in programming language design, as well as having a good time in the process.
If this series results in a couple of new languages somewhere on the web, I'd be extremely happy and would love to see your progress!

Writing your own programming language will even strengthen your resume and be a great addition to your portfolio.

Do we need more languages?

Yes!
Or, well… Not in the sense you might think.
So there are more than enough popular general purpose programming languages out there, each with its own twist on things.
But that is not the goal here, the scope of this effort is to build something small that only you or a friend would care about and appreciate. With this methodology we can build something that we will be proud of ourselves. And if others happen to discover our little corner of the universe and get interested, share that experience with them!

Who am I?

Glad you asked! Why should I sit here and tell you what to do and what not? Great question.
My name is William, and I am currently studying computer science at KTH here in Sweden. I have been interested in language design since 2016 and have developed a handful of my own scripting (interpreted) and compiled languages. One of the most prominent examples is Lento, which is a functional general-purpose programming language that I have been working on since the end of 2020.

I am currently working on my final dissertation in a research project together with a number of PhD doctoral students, developing a meta-language system for creating embedded domain-specific and general-purpose languages.

Release schedule

The idea is that I will work on and continue writing articles about every two weeks, and release them when they are refined and ready.
Of course, many of you will have constructive feedback, tips and ideas that I will read and consider for the upcoming parts, or even edit existing articles to improve and clarify sections.

Source code

All code and examples can be found on the official mini-lang GitHub repository.
https://github.com/WilliamRagstad/mini-lang

Share your experience!

Sharing knowledge is one of the greatest abilities of mankind.
Use the tags #WAL (Write a language) or #WAL-W (-in one week) when referring to these articles.

Let's get started with the series and build ourselves a language!

Chapter 0 | Next chapter >

How to use $.ajax()

William Rågstad — Sat, 19 Jan 2019 19:36:37 +0000

What is Ajax?

Important!

When I talk about Ajax in this article, I most often refer to the methods built into JQuery. Please note that Ajax in JQuery is a type of Ajax, but Ajax is not the Ajax in JQuery.

Ajax is a method to send and receive data from servers, API:s or other web pages and have become a standard when communicating at the web.

It is not built in to vanilla JavaScript and therefore you'll need to use a library like JQuery (for example) to get going with Ajax. The name is short for Asynchronous JavaScript and XML.

Definition of Ajax

"Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together.
...
When these technologies are combined in the Ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions."

MDN web docs, quoted 2019-01-20 from the source article.

How is Ajax often used?

Well, Ajax can be hidden in anything you see on the web, from asynchronously loading you Twitter feed when you scroll around on a Friday afternoon , to adding new products from an administration panel on a shopping site.

Ajax is mostly used to fetch data during runtime from client side.

How do I start using Ajax?

Assuming that you already have an HTML, PHP or similar file, and a working internet connection, you can either download JQuery directly from their website and linking to it as a file on your server, or get it using a CDN.

In this article I will show you how to get it using JQuery's public CDN.

1. Get the latest version of JQuery

Visit this page where you have a list of different versions of JQuery. I suggest you to pick a minified package. Copy the HTML code shown, it should look something like this:



<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

2. Open up your HTML/PHP/etc file

Paste the script tag at the top (in the head tag) or at the bottom (under the body tag) of your page. I suggest you put it at the bottom in case something fails when loading the JQuery library, some of you may have other preferences.



<!doctype html>
<html>
    <head>
        <title>My Site</title>
        <!-- Here -->
    </head>
    <body>
        Hello World
    </body>
    <!-- Or Here -->
</html>

3. Done!

HTTP methods

When sending requests and data over the web, we can use one of the two main methods:

Post
Get

(Read more about HTTP Request methods here or here (W3Schools)).

Post

Post is used to send data "invisible", in most cases post is the way to go because you can send a ton more data with post than you can with get.

Security

If the client that uses the page is connected to a secure WI-FI with WPA or WPA2, the post method is the most secure method. It may still better that get even if the user where using an unprotected network...

Applications

Post is often used when transferring or receiving little to tons of data. It’s even used when communicating to web servers, databases or APIs as mentioned earlier.

For example when you have a shopping basket with some products you want to buy, when you click “proceed” and are redirected do another page, your products follows you. (This is also possible to be handled by the server using sessions, but that’s not to discuss in this particular article.)

Get

What most people think about when they hear “Get”, is URL queries. The get method is usually the way a user manually communicate with a web page or API, specifying search terms, date ranges, or other information that defines the query.

Wikipedia describes the HTTP get request method as only retrieving information from the server. Where some data can be configured via the web pages URL, or “query string”. (See picture below)

Get is more open to the user. This have both pros and cons.

Pros

If made the right way, get can be a way to talk to the web page and customize his/hers experience. For example; you visit a site with some controls, changing these controls and applying changes causes the page to reload, but also with some additional code in the URL. This is called an URL query. Here you see the values of those controls that you changed, and are now able to change them directly from the URL. Just type a new value and hit enter. This is often used by API services.

Cons

Giving control to the user is always dangerous. One worst scenario is having a reflective form using get to submit comments to an insecure website. If the website is vulnerable to cross site scripting (XSS) and just printing everything users type, into the source page... Get may be exploited as an walk around to ex; chromes XSS detection, built in protection systems, etc.

There are of course many more pros and cons to take into account. But this is just to give you a quick glimpse.

Comparison

Get only allows you to send key-value pairs, unlike post that can send whole object, files, tables and much more. Read more about the capacity of get & post.

Important!

Remember when we pasted the script tag that enabled us to use JQuery? Well, code is always executing in cascading order and code that rely on other code must be executed after the code that it’s relying on. What I’m trying to say is always put your own script tags of depending JavaScript underneath the JQuery tag. This may otherwise stop execution of your website and not run JavaScript as expected.

Usage

Okay... Let's finally get down to business.

The Ajax methods are accessed by typing $. This is the jQuery Object. Following up with a . and you'll see a list of all functions JQuery has to offer.

Functions

$.ajax

jQuery’s core $.ajax() method is a powerful way of creating Ajax requests. It requires an object that contains all the configurations Ajax needs to send the request.

Parameters

Parameter	Description
type/method	Which type of HTTP method is going to be used?
url	Where are we going to send this request to?
data	What data are we going to send the destination?

Events

Event	Description
success	A function that's called when Ajax returns any data.

An Example of this may look like the following:



$.ajax({
    type: "post",
    url: "www.example.com/subfolder/page.php",
    data: {
        myLuckyNumber: 13
    },
    success: function(response) {
        console.log(response);
    }
});

Output:



Lucky number was registered!

$.post

Load or send data from the server using a HTTP POST request. It requires an object that contains all the configurations Ajax needs to send the request.

Parameters

Parameter	Description
url	Where are we going to send this request to?
data	What data are we going to send the destination?

Events

Event	Description
success	A function that's called when Ajax returns any data.

An Example of this may look like the following:



$.post({
    url: "www.api.mydomain.com/register.php",
    data: {
        users: {
            0: {                // User 1, aka data.users[0]
                name: "Joe",    //data.users[0].name
                age: 54,        //data.users[0].age
                work: "hacker"  //data.users[0].work
            },
            1: {
                name: "Billy",
                age: 28,
                work: "road worker"
            },
            2: {
                name: "Nathan",
                age: 15,
                work: "unemployed"
            }
        }
    },
    success: function(response) {
        console.log(response);
    }
});

Output:



3 new user(s) where registered!

$.get

Load or send data from the server using a HTTP GET request. It requires an object that contains all the configurations Ajax needs to send the request.

Parameters

Parameter	Description
url	Where are we going to send this request to?
data	What data are we going to send the destination?

Events

Event	Description
success	A function that's called when Ajax returns any data.

An Example of this may look like the following:



$.get({
    url: "https://www.google.se",
    success: function(response) {
        console.log(response);
    }
});

Output:



<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="sv">
    <head>
    <meta charset="UTF-8">
    <meta content="origin" name="referrer">
    <meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image">
    <meta content="origin" name="referrer">
    <title>Google</title>
    <script>
    ...
    </script>
    <style>
    ...
    </style>
...

Execute JavaScript Files with Ajax!

Load and execute a JavaScript file.



$.ajax({
  method: "GET",
  url: "test.js",
  dataType: "script"
});

Parse with Ajax!

Because Ajax sends HTTP request to a web server, it also receives HTTP/HTML/JSON formatted responses. With this in mind, we can pretend that our Ajax is our browser, and send requests to a web server that we want a normal html page for example.

CORS & CORB policies

Cross-Origin Resource Sharing (CORS) is additional HTTP headers that tells the browser to let a web application running at one origin, or domain have permission to access selected resources from a server at a different origin, or domain.This means that web pages that doesn't have the same origin, or domain can share resources (See image below).
As long as the server is configured to allow requests from your or any other web application's origin, XMLHttpRequest and Ajax will work.

Sadly, some websites are protected by something called Cross-Origin Read Blocking (CORB). this is an algorithm that can identify and block "cross-origin" resource loads in web browsers before they reach the web page. This means that web pages that doesn't have the same origin, or domain can not share resources.

If you look at the code below, a new Ajax request is created to a site that is using CORS. This means that we can request the HTML code via an Get method.



$.ajax({
  url: "https://www.google.com",    // This is just an example domain
  method: "GET",
  sucess: function(sourceCode) {
    console.log(sourceCode);
  }
});

Output:



<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="sv">
    <head>
    <meta charset="UTF-8">
    <meta content="origin" name="referrer">
    <meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image">
    <meta content="origin" name="referrer">
    <title>Google</title>
    <script>
    ...
    </script>
    <style>
    ...
    </style>
...

Ajax progress!

In JQuery there's no straight way to fetch the progress that an $.ajax() request have made, but the method supports an custom xhr object.

What we did in the example below, was creating out own xhr object that preforms the HTTP request, and added an event listener for "progress" to it. This made it possible for us to grab the current state in percent of the request.

xhr

The $.ajax() function returns the XMLHttpRequest object that it creates. Normally jQuery handles the creation of this object internally, but a custom function for manufacturing one can be specified using the xhr option.

JQuery AJAX documentation, quoted 2019-01-20 from the documentation.



$.ajax({
    url: "https://example.url/very/large/image.jpeg",
    method: "get",

    xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log(percentComplete);
                }
            }, false);
            return xhr;
        }
})

Output:



0.2384341119115186
0.7248216529871057
1

It is also possible to fetch the progress on contacting the server instead of capturing the response by replacing xhr.addEventListener(...) to xhr.upload.addEventListener(...)

Closure

Thanks for reading this article! I hope it helped you on your journey to become a JavaScript and JQuery master! Share this with your friends and family that might be interested or benefit of this information.

If you have any questions what so ever, I'd be glad to answer them in the discussion down below.

Credits

Cover Image by Christopher Keefer
Difference between post and get by Me
Url Query Example by Hari Prasad
CORS principle by MDN web docs

People who helped make this article better

Michael Goldspinner with feedback