Nat  Grady

Nat Grady


Rticles: LaTeX Journal Article Templates for R Markdown


The rticles package provides a suite of custom R Markdown LaTeX formats and templates for various formats. Most of the templates are provided and maintained by the community, and anyone can contribute a new template. See How to contribute below.


You can install and use rticles from CRAN as follows:


If you wish to install the development version from GitHub (which often contains new article formats), you can do this:


Using rticles

To use rticles from RStudio, you can access the templates through File -> New File -> R Markdown. This will open the dialog box where you can select from one of the available templates:

New R

If you are not using RStudio, you’ll also need to install Pandoc following these instructions. Then, use the rmarkdown::draft() function to create articles:

    "MyJSSArticle.Rmd", template = "jss", package = "rticles"
    "MyRJournalArticle", template = "rjournal", package = "rticles"

This will create a folder containing a Rmd file using the corresponding output format and all the assets required by this format.


Currently included templates and their contributors are the following:

JournalContributorsPull requestOutput format
ACM: Association for Computings Machinery@ramnathv#8acm_article()
AEA: American Economic Association@sboysel#86aea_articles()
AJS: Austrian Journal of Statistics@matthias-da#437ajs_article()
AMS: American Meteorological Society@yufree#96ams_article()
ASA: American Statistical Association #111asa_article()
arXiv pre-prints based on George Kour’s template@alexpghayes#236arxiv_article()
Bulletin de l’AMQ@desautm#145amq_article()
Copernicus Publications@nuest, @RLumSK#172, #342copernicus_article()
CTeX  ctex()
Elsevier@cboettig, @robjhyndman#27, #467elsevier_article()
IEEE Transaction@Emaasit, @espinielli, @nathanweeks, @DunLug#97, #169, #227, #263, #264, #265ieee_article()
IMS: Institute of Mathematical Statistics AoAS: Annals of Applied Statistics@auzaheta#372ims_article()
INFORMS: Institute for Operations Research and the Management Sciences@robjhyndman#460informs_article()
ISBA: International Society for Bayesian Analysis@dmi3nko#461isba_article()
IOP: Institute of Physics (
JASA: Journal of the Acoustical Society of America@stefanocoretta#364jasa_article()
Journal of Educational Data Mining journal submissions@jooyoungseo#251jedm_article()
JOSS: Journal of Open Source Software JOSE: Journal of Open Source Education@noamross#229joss_article()
JSS: Journal of Statistical Software  jss_article()
MNRAS: Monthly Notices of the Royal Astronomical Society@oleskiewicz#175mnras_article()
OUP: Oxford University Press@dmkaplan#284oup_articles()
PeerJ: Journal of Life and Environmental Sciences@zkamvar#127peerj_article()
PiHPh: Papers in Historical Phonology@stefanocoretta#362pihph_article()
PNAS: Proceedings of the National Academy of Sciences@cboettig#72pnas_article()
RSOS: Royal Society Open Science@ThierryO#135rsos_article()
RSS: Royal Statistical Society@carlganz#110rss_article()
Springer Lecture Notes in Computer Science (LCNS)@eliocamp#445lncs_article()
SIM: Statistics in Medicine@ellessenne#231sim_article()
Taylor & Francis@dleutnant#218tf_article()
The R Journal  rjournal_article()
Wellcome Open Research@arnold-c#436wellcomeor_article()

You can also get the list of available journal names with rticles::journals().

#>  [1] "acm"            "acs"            "aea"            "agu"           
#>  [5] "ajs"            "amq"            "ams"            "arxiv"         
#>  [9] "asa"            "bioinformatics" "biometrics"     "copernicus"    
#> [13] "ctex"           "elsevier"       "frontiers"      "glossa"        
#> [17] "ieee"           "ims"            "informs"        "iop"           
#> [21] "isba"           "jasa"           "jedm"           "joss"          
#> [25] "jss"            "lipics"         "lncs"           "mdpi"          
#> [29] "mnras"          "oup_v0"         "oup_v1"         "peerj"         
#> [33] "pihph"          "plos"           "pnas"           "rjournal"      
#> [37] "rsos"           "rss"            "sage"           "sim"           
#> [41] "springer"       "tf"             "trb"            "wellcomeor"

Those are the values to use within rmarkdown::draft().

Under the hood, LaTeX templates are used to ensure that documents conform precisely to submission standards. At the same time, composition and formatting can be done using lightweight markdown syntax, and R code and its output can be seamlessly included using knitr.

Getting help

There are two main places to get help:

The RStudio community is a friendly place to ask any questions about rticles. Be sure to use the rticles tag.

Stack Overflow is a great source of answers to common bookdown questions. Use the tags [r][rticles] if you ask a question.

Code of Conduct

Please note that the rticles project is released with a Contributor Code of Conduct. By contributing to this project, you agree to abide by its terms.

How to contribute?

Most of the templates are contributed directly by the users in the community. If you want rticles to offer a new journal format, you can contribute by the following way.

Suggest an idea for new format opening an issue.

You may not feel confident enough or may not have time to contribute a new format. By opening a new issue, you can share the idea for this format, and see if someone in the community can help on it.
This is not the best way to quickly get your format included but at least it is a great way to see if others are interested too.

To see the existing suggested formats, just filter issues with the help wanted :heart: label. You can then add a :+1: or help to add the template :wink:.

Contribute a new template format opening a pull request.

To contribute a new format, you need to open a new pull request (PR). When opening the PR, you’ll see the PR template explaining how to proceed and what is important to check. Please follow it.
Even if you are just starting or you are not finished, you share your work by creating a draft PR. It is a great way to let us know that you are still working on it (like these opened ones), and it is also a great way to ask for help from the community.
When you are ready, you can submit the PR for review, and we will iterate until it is merged.

Technical resources helpful to contribute a template

The best way to get started is to look at the previous examples of submitted PR. You’ll find links to them in the table above.

All the rticles format are build similarly by providing a new pandoc tex template to replace the default one. You’ll learn more about pandoc templates in these places:

You can study existing formats to see how all this works.


R Markdown: The Definitive Guide

Download Details:

Author: rstudio
Source Code: 

#r #rstudio #article  #markdown 

Rticles: LaTeX Journal Article Templates for R Markdown

Implementing Microservicilities with Quarkus and MicroProfile

Key Takeaways

  • Quarkus is a full-stack, Kubernetes-native Java framework made for Java virtual machines (JVMs) and native compilation.
  • When developing microservices architecture, there are some new challenges that need to be addressed such as scalability, security, and observability.
  • Microservicilities provides a list of cross-cutting concerns to correctly implement microservices.
  • Kubernetes is a good start to implement these microservicilities but there are some gaps.
  • MicroProfile is a specification to implement cross-cutting concerns using the Java programming language.
  • Authentication among internal services may be achieved by using tokens (i.e., JWT).

Why Microservicilities?

In a microservices architecture, an application is formed by several interconnected services where all of them work together to produce the required business functionality.

So a typical enterprise microservices architecture looks like this:

At the beginning, it might seem easy to implement an application using a microservices architecture.

But doing so properly is not an easy journey as there are some new challenges that weren’t present with a monolith architecture.

Some of these are fault tolerance, service discovery, scaling, logging, and tracing, just to mention a few.

To solve these challenges, every microservice should implement what we at Red Hat have named “Microservicilities.”

The term refers to a list of cross-cutting concerns that a service must implement apart from the business logic to resolve these concerns as summarized in the following diagram:

#kubernetes #article

Implementing Microservicilities with Quarkus and MicroProfile
Ruth  Nabimanya

Ruth Nabimanya


The Brain is Neither a Neural Network Nor a Computer: Book Review of The Biological Mind

Key Takeaways

  • The brain is a biological organ, and not a digital computer.
  • Neuroscience has discovered that while the brain mediates between the body and the environment, it does not command the body.
  • Often brain problems can be traced to problems in the rest of the body, and not to a malfunctioning brain.
  • Many mental illness are a combination of genetics, culture, and environment, as well as brain function.
  • There is no essence of the brain that can be separated from its body and surrounding environment.

Underlying much of artificial intelligence research is what Alan Jasanoff calls the cerebral mystique— the idea that the essence of an individual resides in the brain. In The Biological Mind, he argues that this idea neglects the fundamental lesson of neuroscience. The brain is a biological organ embedded in a physical environment. A brain cannot function independently from the body and its surrounding world. Dismantling this myth will allow us to understand what is reasonable to expect from artificial intelligence, as well as technology designed to improve human life.

Although Jasanoff’s book argues from a neuroscience perspective, it supports the idea of embodied cognition—our cognition does not just come from the brain, but from the interaction of a particular being with its environment. Some refer to this as an “ecological approach.” The brain does not make a computation to process sensory input into actions. The brain uses perception and action to link the body to the environment.

The first part of the book describes the four components of the cerebral mystique fallacy: abstraction, complexification, compartmentalization, and autonomy. The second part explains why a biological-based view of the brain is important especially in areas such as psychology, medicine, and technology.

#machine learning #artificial intelligence #emerging technologies #big data #architecture & design #ai # ml & data engineering #article

The Brain is Neither a Neural Network Nor a Computer: Book Review of The Biological Mind
Franz  Becker

Franz Becker


Custom Scrollbars In CSS

Custom scrollbars are getting more popular nowadays, and I’m very keen to dig into them. There are different reasons why to customize a scrollbar. For example, the default scrollbar can make an app UI look inconsistent across multiple operating systems, and here we can get the benefit of having a unified style.

I have always been interested in learning about how to customize a scrollbar in CSS but didn’t get the chance to do so. In this article, I will take the opportunity and learn about them and document this journey.


The first thing that I want to explain is the components or the parts of a scrollbar. A scrollbar contains the track and the thumb. Here is a visual that shows them:

The track is the base of the scrollbar, where the thumb is what the user drag to scroll within a page or a section.

There is one important thing to keep in mind that a scrollbar can work horizontally or vertically, depending on the design. Also, that can change while working on a multilingual website that works in both left-to-right (LTR) and right-to-left (RTL) directions.

Customizing A Scrollbar Design

Having a custom scrollbar used to be webkit only so Firefox and IE were out of the game. We have a new syntax that works only in Firefox and will make things easier for us when it’s fully supported. I will go through the old Webkit syntax, and then the new one.

The Old Syntax

The Scrollbar Width

First, we need to define the size of the scrollbar. This can be the width for vertical scrollbars, and the height for horizontal ones.

#article #css #custom scrollbars

Custom Scrollbars In CSS
Ian  Robinson

Ian Robinson


Performance Tuning Techniques of Hive Big Data Table

  • Developers working on big data applications experience challenges when reading data from Hadoop file systems or Hive tables.
  • Consolidation job, a technique used to merge smaller files to bigger files, can help with the performance of reading Hadoop data.
  • With consolidation, the number of files is significantly reduced and query time to read the data will be faster.
  • Hive tuning parameters can also help with performance when you read Hive table data through a map-reduce job.

Hive table is one of the big data tables which relies on structural data. By default, it stores the data in a Hive warehouse. To store it at a specific location, the developer can set the location using a location tag during the table creation. Hive follows the same SQL concepts like row, columns, and schema.

Developers working on big data applications have a prevalent problem when reading Hadoop file systems data or Hive table data. The data is written in Hadoop clusters using spark streamingNifi streaming jobs, or any streaming or ingestion application. A large number of small data files are written in the Hadoop Cluster by the ingestion job. These files are also called part files.

These part files are written across different data nodes, and when the number of files increases in the directory, it becomes tedious and a performance bottleneck if some other app or user tries to read this data. One of the reasons is that the data is distributed across nodes. Think about your data residing in multiple distributed nodes. The more scattered it is, the job takes around “N * (Number of files)” time to read the data, where N is the number of nodes across each Name Nodes. For example, if there are 1 million files, when we run the MapReduce job, the mapper has to run for 1 million files across data nodes and this will lead to full cluster utilization leading to performance issues.

#apache hadoop #performance tuning #big data #hive #development #ai # ml & data engineering #article

Performance Tuning Techniques of Hive Big Data Table
Lina  Biyinzika

Lina Biyinzika


Say Hello To CSS Container Queries

I haven’t been more excited for a CSS feature like I’m now in the past six years I spent as a front-end developer. The prototype of container queries is now available behind a flag in Chrome Canary. Thanks to efforts from smart people like Miriam Suzanne and other folks.

I remember seeing a lot of jokes about the support for CSS container queries, but they are finally there. In this article, I will walk you through why we need container queries, how they will make your life easier, and most importantly, you will achieve more powerful components and layouts.

If you’re excited as I am, let’s dig in. Are you ready?

The Problem With CSS Media Queries

A web page consists of different sections and components, and we make them responsive by using CSS media queries. There is nothing wrong with that, but it has limitations. For example, we can use a media query to show the minimal version of a component on mobile versus desktop.

Oftentimes, responsive web design is not about the viewport or the screen size. It’s about the container size. Consider the following example:

We have a very typical layout with a card component. It has two variations:

  • The stacked (see the aside)
  • The horizontal (see the main)

There are multiple ways for implementing that in CSS, but the most common one is like the following. We need to create a base component, and then make variations of it.

.c-article {
  /* The default, stacked version */

.c-article > * + * {
  margin-top: 1rem;

/* The horizontal version */
@media (min-width: 46rem) {
  .c-article--horizontal {
    display: flex;
    flex-wrap: wrap;

  .c-article > * + * {
    margin-top: 0;

  .c-article__thumb {
    margin-right: 1rem;

Notice that we created the class .c-article--horizontal to handle the horizontal version of the component. If the viewport width is greater than 46rem, then the component should switch to the horizontal variation.

This isn’t bad, but somehow it makes me feels a bit limited. I want the component to respond to its parent width, not the browser viewport or screen size.

Consider that we want to use the default .c-card in the main section. What will happen? Well, the card will expand to the width of its parent and thus it will be too large. See the following figure:

This is a problem, and we can solve it with CSS container queries (Yay, finally). Before diving into them, let me give you a glimpse of the result we want.

#article #css

Say Hello To CSS Container Queries
Lina  Biyinzika

Lina Biyinzika


Practical Use Cases For CSS Variables

When I first started using CSS variables, I wasn’t fully aware of the potential. When used in the right way, we can shorten the time and effort to do specific things in CSS.

If you don’t know about CSS variables, I recommend you to read this article to learn about them. Once you’re good with it, it will be easier for you to follow along. The goal of this article is to focus heavily on useful use-cases for CSS variables that are not only about design tokens like colors.

Are you ready? Let’s dive in!

What’s The Problem?

If you’re using CSS variables just like CSS pre-proccerssors (Sass, for example), then you aren’t taking the full benefit of them. Consider the following:

:root {
    --brand-primary: #7777e9;
    --brand-secondary: #c96fde;

.title {
    color: var(--brand-primary);

…is no difference than writing the following in Sass:

$brand-primary: #7777e9;
$brand-secondary: #c96fde;

.title {
    color: $brand-primary;

Using CSS variables only for color variables isn’t wrong at all, but it’s like getting an Apple M1 MacBook to browse the internet, even though your old 2012 is still working fine. What’s the point of getting a cutting-edge computer to do the same job while you have a chance to use its full potential? That’s exactly what I feel about using CSS variables, you know, just for storing colors.

The goal of this article is to walk you through use-cases where CSS variables shine. Let’s dive in!

Use Cases And Examples

Longhand Properties

In some scenarios, you might need to tweak the longhand version of a property. For example, a padding property can differ from a component variation to another. Instead of rewriting the longhand again, we can use a CSS variable for the thing that will change, and it will be overridden via the variation CSS class.

#article #css

Practical Use Cases For CSS Variables
Lina  Biyinzika

Lina Biyinzika


The State of CSS Cross-Browser Development

Every front-end developer has come across a CSS issue that works differently from a web browser to another. This was more obvious when we were trying to make layouts work the same on IE8 as they work on Chrome. I’ve scratched my head many times thinking about how to debug and fix CSS issues, but recently things have changed for the better, resulting in fewer concerns about a layout working perfectly in different browsers.

In this article, I will share my thoughts on why cross-browser development is better than in the past. Adding on that, I will also share some issues we still have these days.


Cross-browser development is making a web page look and behave the same on different desktop and mobile browsers. Five years ago, this was a real challenge for front-end developers. Thankfully, it’s has gotten much easier now with the support for modern CSS tools like Grid and Flexbox.

Consider the following mockup that I designed in Sketch.

Here is how it looks in four different browsers. There is no difference between them, right? That’s the goal of cross-browser development, to have something look and behave the same on different browsers.

I know that it’s nothing complex, but my goal was to illustrate the idea. For years, we have struggled with a lot of browser inconsistent issues that made the front-end developer job extremely hard to the level that you will debug and fix issues more than writing actual CSS.

How CSS Cross-Browser Development Used To Be

If we go back in time to 2011, IE9 was the latest version of Internet Explorer. At that time, Google Chrome was almost three years old, and developing multiple browser support was a challenge.

For new CSS comers, they might not know how developers used to build web layouts in the past. In 2011, a website was supposed to work on IE8, and in case you want to use modern CSS features at that time (e.g: CSS gradients), you need to provide an image fallback.

To provide a consistent experience for old and new browsers was quite challenging, a front-end developer needs to either use old CSS techniques to achieve the layout they need to, or to provide a proper fallback.

The concept of making a website consistent wasn’t optional. In 2010, the usage of IE was 52% (according to StatCounter. With that percentage or usage, You can’t ignore IE.

Timelapse Of CSS Development For The Past 10 Years

I want to take you on a journey from 2010 to today so you can witness and see how CSS development used to be. For me, it’s important for a developer to learn about that so they can appreciate the effort done by the web community to make cross-browser development more straightforward.

#article #css

The State of CSS Cross-Browser Development
Lina  Biyinzika

Lina Biyinzika


Let's Learn About Aspect Ratio In CSS

Having a consistent ratio between the width and height of images and other responsive elements is important. In CSS, we used the padding hack for many years, but now we have native aspect ratio support in CSS.

In this article, I will discuss what is aspect ratio, how we used to do it, what’s the new way of doing it. Of course, there will be use cases with a proper fallback for them.

Let’s dive in!

Introduction: What Is Aspect Ratio?

In mathematics, a ratio indicates how many times one number contains another. For example, if there are eight oranges and six lemons in a bowl of fruit, then the ratio of oranges to lemons is eight to six (that is, 8∶6, which is equivalent to the ratio 4∶3).

In web design, the concept of aspect ratio is used to describe that an image’s width & height should be resized proportionally to each other.

Consider the following figure.

We have a ratio of 4:3. Which shows that the ratio of apple to grape is four to three.

In other words, the smallest box we can create for an aspect ratio of 4:3 is a 4px*3px box. When this box height is resized proportionally to its width, we will have a box that respects its aspect ratio.

Consider the following figure.

The box is being resized proportionally, and the ratio between its width and height is consistent. Now, let’s imagine that the box contains an important image that we care about all of its details.

Notice that the image details are preserved, no matter what’s the size. By having a consistent aspect ratio, we can get the following benefits:

  • Imagery across a website will be consistent across different viewport sizes.
  • Important details are preserved.
  • We can have responsive video elements, too.
  • It helps in creating a clear guide for image sizes by designers, so developers can handle them in the development process.

Measuring Aspect Ratio

To measure the aspect ratio, we need to divide the width by the height as in the following figure.

The ratio between the width and height is 1.33. That means this ratio should be respected. Consider the following:

Notice on the image on the right, the value of width ÷ height is 1.02, which is not what the original aspect ratio is (1.33 or 4:3).

You might be thinking, how to come up with the value 4:3? Well, this is called the Nearest Normal Aspect Ratio and there are tools that can help us in finding it. While working on a UI design, it’s highly recommended to know exactly what’s the aspect ratio of the images you are using. Using this calculator can help in that.

With that, I hope that the concept of aspect ratio is clear for you now. If you already know about it, then I hope that you refreshed your knowledge about it.

Implementing Aspect-Ratio In CSS

We used to implement aspect-ratio by using percentage padding in CSS. The good news is that recently, we got native support for aspect-ratio in all major browsers. Before diving into the native way, I will explain the good old way first.

#article #css #frame rate

Let's Learn About Aspect Ratio In CSS

The Beauty Of Tiny Enhancements In CSS

It has never been easier than now to use modern CSS features as an enhancement. When I use a CSS feature that is not fully supported in all major browsers, I tend to have a baseline that works with non-supporting browsers, and an enhanced version for modern browsers.

When a new CSS feature is supported in a specific browser, say Chrome, some replies on Twitter will be like “This isn’t supported in Edge or IE, I can’t use it”. In this article, I will explore some examples where I use CSS features without causing any harm to browsers that don’t support them.

Examples Of Tiny Enhancements

Intrinsic Sizing

In a recent client project, I designed a widget that can be added to the article body. It includes a link to another related article, and we needed to make it obvious and engaging.

The widget width should be equal to its content. We can solve this problem by using different methods:

  • An inline-block element.
  • Using intrinsic sizing with width: fit-content

I don’t like the inline-block solution that much since it doesn’t feel safe for me. What if another widget is there? They will be beside each other. The widget must be a standalone element.

For that reason, I lean towards using the intrinsic sizing solution.

#article #css

The Beauty Of Tiny Enhancements In CSS

Digging Into CSS Logical Properties

The support for CSS logical properties is getting better by time. However, I still struggle to memorize them each time I want to use them in a project. What does start mean? And what does end mean? It’s a bit tricky to grasp all the details without trial and error.

In this article, I aim to get you up and running to use logical properties today with a solid understanding from the perspective of a designer who speaks and writes in English and Arabic. I tried to come up with a visual way of thinking of the logical properties that I hope will be clear to grasp. Are you ready? Let’s dive in.


The basic idea of CSS logical properties is that we won’t use physical directions in CSS properties. Instead, we will use properties that depend on the direction of the HTML document. Those properties are called logical properties.

Let’s take a basic example.

We have a card that contains an avatar and text content. For left-to-right (LTR) layouts, the margin is on the right of the avatar. For right-to-left (RTL) layouts, the margin should be flipped (to the left).

Here is how we can do this without CSS logical properties.

.avatar {
  margin-right: 1rem;

html[dir="rtl"] .avatar {
  margin-right: 0;
  margin-left: 1rem;

Notice that margin-right is being reset to 0 for RTL layouts since it’s not needed there. Imagine doing that for a large-scale project? It’s too much. CSS logical properties came to solve this for us.

.avatar {
  margin-inline-end: 1rem;

We will only need to set margin-inline-end, and this will work differently based on the direction of the HTML document. Isn’t that powerful?

The Difference Between Inline And Block

When using CSS logical properties, you will often see the keywords inline or block. Let’s explore what they mean.

Based on the writing mode, the meaning of inline or block changes. For languages like English, the inline is the horizontal dimension, where the block is the vertical one. For languages like Japanese, the inline is the vertical dimension, and the block is the horizontal one.

For this article, I will focus more on handling logical properties for horizontal languages.

What Does Inline Mean?

It’s the horizontal dimension for languages like English or Arabic. While start means left for left-to-right layouts (e.g: English) and right for right-to-left layouts (e.g: Arabic), and the end means left for RTL layouts and right for LTR layouts.

#article #css

Digging Into CSS Logical Properties

Handling Text Over Images in CSS

You might come across a UI component that has text above an image. In some cases, the text will be hard to read depending on the image being used. There are some different solutions like adding a gradient overlay, or a tinted background image, text-shadow, and others. I got encouraged to write this article after seeing this tweet from Addy Osmani.

In this article, I will explore the different approaches and solutions for this problem, and how to communicate the UI with a front-end developer to make sure that it’s implemented as per the design mockup since some details can be easily missed in CSS.


Each solution is supposed to solve a problem. Let’s explore the problem for our case. When designing a component that has text above an image, we should take care of making the text easy to read.

Notice that the version without a gradient overlay is barely readable. This isn’t good for the user. To solve this, we need to add a layer below the text so that it can be easy to read. Adding that layer can be challenging, and I have seen many who implement this solution without taking accessibility in mind.

An Overview Of The Possible Solutions

There are different solutions for making the text easier to read. Let’s get an overview of them.

As you’ve seen, there are different solutions to the problem. The ones that need more care are the gradient solutions. Why? Because it’s so easy to add a gradient layer and the text won’t be accessible.

The Solutions

The Gradient Overlay

Generally speaking, the gradient overlay is the most common solution for making the text on an image much clearer. Given that, I will focus a bit more on it.

When implementing the gradient overlay, we have two options:

  1. Use a separated element for the gradient (pseudo-element or an empty <div>)
  2. Apply the gradient as a background image.

Each one of the above has its pros and cons, let’s go through them.

#article #css

Handling Text Over Images in CSS

CSS Container Queries For Designers

Working on a web design involves handling the design for different screen sizes. Based on those designs, the developer will use CSS media queries to detect the viewport width or height, and then alter the design based on that. This is how we used to design web layouts for the past 10 years, and it’s about to get even better. I have some good news for you.

CSS Container queries, a long-requested feature by web developers is coming soon to CSS and now available as an experimental feature in Chrome Canary. In this article, I will go through what is it, how it will change your workflow as a designer, and more. I don’t care if you a designer who codes or not, as the main point of this article is to introduce this concept so you can be prepared for the next. If you spot any CSS bits that you don’t fully understand, you can totally ignore them and move on.

Enough talking, Let’s dig in!

The Current State Of Responsive Design

Nowadays, it’s still okay to work on multiple versions of the same web layout to show how the inner parts will change based on the viewport width. We design different sizes like mobile, tablet, and desktop.

In the figure above, the designer has created three variations of the same design, so the developer can get an idea of how things will work. All is good till now.

Now, I will show you a more detailed look for the design and its variations so I can shed light on the problem that CSS container queries will fix for us.

Notice that this is the same component, and it has three variations which are the default, card, and the featured. As a designer, you have used multiple versions of the layout to showcase this. It’s like saying: “This is how the article component will look on mobile, and this is how it will look on tablets”.

In CSS, the developer needs to create three variations of this component, and each one of them is unique. Consider the following basic styles:

.c-media {
  /* the default styles */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

@media (min-with: 400px) {
  .c-media--card {
    display: block;

  .c-media--card img {
    margin-bottom: 1rem;

@media (min-with: 1300px) {
  .c-media--featured {
    position: relative;
    /* other styles */

  .c-media--featured .c-media__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

The variations above depend on media queries or the viewport width. That means, we can’t control them based on their parent width. Now you might be thinking, what’s the problem here? Well, that’s a good question.

The problem is that the developer is tied with using a variation of a component only when the viewport width is greater than a specific value. For example, if I want to use the “featured” variation in the tablet size, it won’t work, why? Because the media query for it kicks in at 1300px viewport width or more.

#article #css #designers

CSS Container Queries For Designers
Rylan  Becker

Rylan Becker


Microsoft's Low-Code Strategy Paints a Target on UIPath and the Other RPA Companies

  • Microsoft is investing big in the low code space and has put together a collection of products that is hard for other companies to match, capped recently by the announcement of PowerFX.
  • The target in their sights is the Robotic Process Automation (RPA) companies such as UIPath, Automation Anywhere and Blue Prism who are closing big deals with big enterprises.
  • The moat protecting the market share of the big RPA companies is created by the mature deployment systems that enable large enterprises to run hundreds or thousands of automated processes
  • Microsoft’s recent low code announcements indicate that, instead of building a bespoke deployment system, Microsoft’s approach will be to incorporate low code software into an enterprise’s existing CI/CD workflows
  • This approach befriends rather than alienates enterprise CIOs which will shorten sales cycles and improve deal flow.
  • Further bad news for RPA companies is that AWS and Google have products equivalent to Microsoft’s collection in almost every category and can close the gap quickly.
  • With billions of dollars in revenue on the line this will be one of the most exciting tech races to watch over the next few years.

Why does low code matter?

Low code refers to software development platforms that enable non-professional developers to build useful business applications.

The rationale behind low-code development is that business users who deeply understand a business process can contribute to building apps. And that this will enable companies to innovate faster than their competitors by leveraging the business expertise of business users and the development expertise of the IT teams.

Gartner predicts that by 2025 most enterprise apps will be developed in part using low code software.

A brief history of RPA and enterprise low code software

There are plenty of ways of characterising the history of low code software in the enterprise. If you wanted to, for example, you could go back to 4GL software in the 1990s. But for the purposes of this article, we’ll start our history from the early 2010s with the rise of Robotic Process Automation (RPA software).

In its early days, RPA software was only slightly more advanced than the screen-scraping systems from the days of green-screen terminals. But RPA software very quickly started to build out the other components of today’s low-code suite (data storage, integration / transformation, app interfaces and reporting). For example, many processes require human input or decisions at certain stages in the process (such as approving a payment) and so the RPA suites began building out the ability to create simple apps that allowed users to interact with the automated workflows.

The big innovation in RPA suites was their orchestration capability. This allows administrators to deploy and monitor hundreds or thousands of processes. When you hear someone state that an automation platform such as Microsoft’s Power Automate platform isn’t as mature as one of the big RPA tools such as UIPath, Automation Anywhere or Blue Prism, they are saying that Microsoft Power Automate’s monitoring and deployment are not as mature as the big three RPA tools.

It is this area that Microsoft is aimed at improving.

Microsoft’s journey toward becoming a low-code powerhouse

Microsoft has assembled all of the pieces required by an enterprise to deliver low code solutions. If they execute well on this strategy they are poised to become unassailable in the low-code world.

When Microsoft talks about low code, they have a pretty expansive view. The language they use when describing low code encompasses everything from an accountant writing a formula in Excel, to a software engineer using a pre-built connector to pull data from an API, to a consulting firm building a bespoke end-to-end claims management solution for a customer.

Microsoft realises that the real challenge with scaling low code is not writing low code applications - it’s deploying and monitoring low code applications. And it is firmly on a trajectory to solving this challenge.

Over the past 6 years, Microsoft has built or acquired the following components:

  1. Data storage solution (Dataverse)

  2. Integration and transformation pipelines (Logic apps)

  3. App maker (Power Apps),

  4. Reporting (Power BI)

  5. They also have:

  6. RPA solution (Power Automate)

  7. Data extraction (Azure Cognitive Services Form Recognizer)

The missing pieces to the puzzle have been deployment and monitoring.

The big RPA suites solve these challenges by requiring customers to adopt their orchestrator systems.

But MS is taking a different approach. Microsoft is saying to development teams: “Don’t set up a new deployment and governance practice. Just use your existing CI/CD practices.” With the recent announcement of PowerFX, Microsoft is attempting to link all of these components using a common programming language that allows enterprises to deploy low-code apps using their existing CI/CD processes and governance framework.

This will give Microsoft a significant advantage over their low-code competitors because it will make Microsoft’s low code solution the safe choice for CIOs. When an enterprise chooses which low-code platforms they will allow to interact with their systems they’ll have a choice between using the Power Platform that fits with their current governance framework or using something else that does not. Many enterprises will just go with the Power Platform.

Microsoft has put together a pretty impressive strategy. I don’t know how much is by design and how much by tactical zigging and zagging but, judging by the dates that the company released each of the pieces in this strategy, it looks like sometime in 2019 someone at Microsoft had a lightbulb moment about how all this should fit together, and they’ve been executing against that strategy ever since.

Here’s what the journey looked like:

  • 2015: Releases VS Code
  • 2016: Releases PowerApps and CDS (now Dataverse)
  • 2018: Acquires GitHub, and GitHub Actions released
  • 2020: Acquires Softomotive RPA
  • 2021: Announces PowerFX programming language

The journey combines continuous integration / continuous delivery (CI/CD) components used in professional software development with low-code and RPA products, and ties them together with a common programming language (PowerFX) that facilitates good governance of data and applications. A killer strategy!

#azure #low code #aws #architecture & design #article

Microsoft's Low-Code Strategy Paints a Target on UIPath and the Other RPA Companies
Gordon  Matlala

Gordon Matlala


Cameron Purdy Explains Ecstasy - A New Cloud Native Environment

Key Takeaways

  • Ecstasy is a new Cloud Native programming system and runtime
  • It builds upon the design successes of Java and adapts them for Cloud-First
  • The language features novel concepts in its type system and compiler
  • The runtime is designed to be highly scalable and dense at Cloud scale
  • The project is taking shape but still not at release stage yet

Cameron Purdy is probably best known for Oracle Coherence (previously Tangosol), a coherent distributed in-memory cache and data grid. Since leaving Oracle, he has been working on Ecstasy - a language and runtime designed specifically for the serverless cloud.

Ecstasy is still in the early stages of its lifecycle, but it’s fair to say that it is an attempt to take lessons learned from programming languages like Java, and modern deployment practices (and the challenges stemming from those), and to use that context to create a new language and environment that is ambitious and forward-looking.

InfoQ: What is the current state? What are you most focused on solving right now?

Cameron Purdy: The state is still very much R&D. We’re working on completing the core library, finishing two different database implementations on top of the OODB API, and we’re now starting to design and build the actual dynamic runtime.

There’s that old saying: “You only get one chance to make a good first impression”. When a developer picks up Ecstasy, we want them to pick it up because they are ready for it … but not before it’s ready for them! We really don’t want to waste anyone’s time, so we’re careful to explain that this isn’t ready for real world usage. Not just yet.

#java #cloud #serverless #development #devops #article

Cameron Purdy Explains Ecstasy - A New Cloud Native Environment