https://dev.to/thormeier/dont-try-this-at-home-css-as-the-backend-what-3oih

Skip to content
DEV Community
[                    ]
 Log in Create account

DEV Community

DEV Community is a community of 807,534 amazing developers

We're a place where coders share, stay up-to-date and grow their
careers.

Create account Log in

  * Home
  * Listings
  * Podcasts
  * Videos
  * Tags
  * FAQ
  * DEV Shop
  * Sponsors
  * About
  * Contact

Other

  * Code of Conduct
  * Privacy Policy
  * Terms of use

     
Copy link
Copied to Clipboard
Share to Twitter Share to LinkedIn Share to Reddit Share to Hacker
News Share to Facebook
Share Post via... Report Abuse
Cover image for [?][?] Don't try this at home: CSS _as_ the backend -
introducing Cascading Server Sheets!
Pascal Thormeier
Pascal Thormeier

Posted on Feb 21

[?][?] Don't try this at home: CSS _as_ the backend - introducing
Cascading Server Sheets!

#css #node #donttrythisathome #tutorial

Here we go again! Another one of these, and promise, you will be
questioning my sanity after this one.

I was just getting groceries. I walked down the street to the local
shop when it hit me. Cascading... Server Sheets!

Today, we'll use CSS as a server-side language. That's right. Use CSS
to declare routing, do maths, heck, even use CSS to do templating!
And we're not using anything like SASS or LESS (pff, we don't need no
stinkin' loops!), but plain ol' CSS.

 What?? Why??

SMBC has lately put it quite well, although it's part of a comic
about quantum computers:

Comic about a person explaining the "deep abiding goal of every
engineer": To take a thing and make it do something it wasn't
supposed to do.

Imagine changing a tire with the Hubble telescope. Doesn't exactly
work out, does it? Well, how awesome would it feel if you managed to
do it, though? And that's what I'm after. Hey, maybe I'm starting a
new trend here, who knows! Even if the trend is just laughing at my
silly ideas and never taking me seriously ever again.

You might know the saying that "people were so obsessed with wether
they could that they forgot to ask if they should". I'm well aware of
that fact that I probably shouldn't, but the question is could I?

This tool will be something I'll never ever ever use in production,
and you, dear reader, should not do it either. Please. There. You've
been warned.

 Ok, Cascading St... Server Sheets it is.

First, let's define how this thing will even work. I was thinking
about an interface to Express. Basically define a catch-all route in
Express, load the CSS file, parse and interpret the styles (this part
will be fun, I guess) and shoot whatever DOM emerges over the wire.

To do that, let's first install Express. Please note that I'm using
nvm to switch between Node versions here.

echo "14" > .nvmrc
nvm use
npm init # Hit enter a few times
npm i express

Awesome! Now let's create a little app and add a start script to the
package.json:

{
  "name": "css-server",
  "version": "1.0.0",
  "description": "A bad idea.",
  "main": "index.js",
  "scripts": {
    "start": "node ./css-server.js"
  },
  "author": "Pascal Thormeier",
  "license": "donttrythisathome",
  "dependencies": {
    "express": "^4.17.2"
  }
}

In the express app, we define a catch-all route that tries to figure
out if a given route corresponds to a CSS file or not. If it exists,
it simply returns the content of this file, if not, a 404 will be
thrown.

const express = require('express')
const bodyParser = require('body-parser')
const path = require('path')
const fs = require('fs')

const app = express()

// Allows to get POST bodies as JSON 
app.use(bodyParser.urlencoded({ extended: true }))

// Catch-all route
app.use((req, res) => {
  let cssFile = req.path

  // So `index.css` works.
  if (cssFile.endsWith('/')) {
    cssFile += 'index'
  }

  const cssFilePath = path.resolve('./app' + cssFile + '.css')

  try {
    const css = fs.readFileSync(cssFilePath, 'utf8')
    res.send(css)
  } catch (e) {
    // Any error of the file system will 
    // be caught and treated as "not found"
    res.sendStatus(404)
  }
})

app.listen(3000)

A quick test shows that everything, except a small index.css file
yields a 404; the CSS file gets shown.

 Evaluating CSS - Thinking aloud

Ok, here's the fun part. We somehow need to figure out how to execute
the CSS server-side and take whatever it outputs as the apps
response.

The first thing that comes to mind for rendering is to simply use the
CSS content rule to render - well - content. It can use CSS variables
and counters, so we can technically even do math with it. There's
just one problem: The browser evaluates counters and vars on the fly,
so we cannot just evaluate the CSS, take whatever is in the content
and output that. So, the "computed style" approach doesn't work.
(Believe me, I tried...)

Basically, you'll get what you see in the "CSS" tab of your dev
tools.

Imagine this piece of CSS:

body {
  --num1: 12;
  --num2: 13;
  counter-set: sum 15;
}

body::before {
  content: '<h1>The sum is ' counter(sum) '</h1>';
}

This is what you'll get:

A browser window with open inspector, showing the exact thing
mentioned above.

Hm. So why don't we use a browser to do just that? The browser does
evaluate this stuff somehow, right? The only issue is, that we're
shifting the problem here. There are Node implementations of CSS.
They offer computed styles and the browser we would be using would
only offer the same thing, right? If only there was a way to let the
computer "read" what's on screen.

Ideally, the browser would load the CSS file and we wouldn't inline
anything; otherwise we cannot really use stuff like @import. So we
need another controller that loads CSS files.

Anyways, sounds a lot like a "future me" problem. Let's first
introduce puppeteer and make it execute the CSS.

 Adding puppeteer

Straight forward:

npm i -s puppeteer

To load the CSS, we need some HTML. We can create that on the fly,
inject the loaded CSS as a <link>, base64 encode the entire blob and
make the browser parse that:

const escapeVarValue = value => {
  if (!isNaN(value)){
    return value
  }

  return `'${value}'`
}

const createDOM = (cssFilePath, method, args) => {
  const varifiedArgs = Object.entries(args).map(([key, value]) => `--${key}: ${escapeVarValue(value)};\n`).join("\n")
  const dataifiedArgs = Object.entries(args).map(([key, value]) => `data-${key}="${value}"`).join(' ')

  return `
    <!DOCTYPE html>
    <html data-http-method="${method.toUpperCase()}">
      <head>
        <style>
          :root {
            ${varifiedArgs}
          }
        </style>
        <!-- Load the actual CSS -->
        <link rel="stylesheet" href="${cssFilePath}">
      </head>
      <body ${dataifiedArgs}>
      </body>
    </html>
  `
}

Note how we already added the HTTP method as a data attribute and any
args as CSS variables and data attributes.

Next, we add the _internal route to our express app that serves the
requested CSS file:

app.get('/_internal/*', (req, res) => {
  const appPath = req.path.replace('_internal', 'app')
  if (appPath.includes('..') || !appPath.endsWith('.css')) {
    res.send('Invalid file')
    return
  }

  const internalFilePath = path.resolve('.' + appPath)
  res.sendFile(internalFilePath)
})

A request to /_internal/index.css would then load app/index.css and
serve it. Puppeteer can now load our apps code and execute it. We
could do more validation here, but I kept it basic here for the sake
of simplicity.

Now to get puppeteer into the game:

const getContent = async (cssPath, method, args) => {
  const dom = createDOM(cssPath, method, args)

  const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
  })
  const page = await browser.newPage()
  const base64Html = Buffer.from(dom).toString('base64')

  await page.goto('data:text\/html;base64;charset=UTF-8,' + base64Html, {
    waitUntil: 'load',
    timeout: 300000,
    waitFor: 30000,
  })

  // Magic!
}

Let's try this with a basic little index.css:

body::after {
  content: '<h1>Hello, World!</h1>';
}

Lo and behold: It works! Puppeteer executes the CSS and displays the
result:

A browser displaying the CSS above as rendered text.

Neat side effect: Changing headless: true to false allows us to debug
the CSS. An out of the box debugger is definitely a nice thing.

 Extracting the content

Remember the "future me" problem? Yeah.

We know that we cannot use computed styles to get any element's
content, especially if it contains variables or counters. We also
cannot select and copy/paste the rendered text since Chromium cannot
do that. So, how do we get the rendered, evaluated text?

Ever downloaded a website as PDF? The evaluated text gets selectable.
Can puppeteer create a PDF from a website? Yes, it can. Can we
somehow parse the PDF to get the text? Of course we can!

npm i -s pdf-parse

This library lets us parse any given PDF and extract its text. We're
not doing any shenanigans with images, layouts and whatnot here. We
only render out plain ol' HTML as an unparsed string. We can copy/
paste that:

const pdf = require('pdf-parse')

const getContent = async (cssPath, method, args) => {
  const dom = createDOM(cssPath, method, args)

  const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
  })
  const page = await browser.newPage()
  const base64Html = Buffer.from(dom).toString('base64')

  await page.goto('data:text\/html;base64;charset=UTF-8,' + base64Html,{
    waitUntil: 'load',
    timeout: 300000,
    waitFor: 30000,
  })

  // Get a PDF buffer
  const pdfBuffer = await page.pdf()

  // Parse the PDF
  const renderedData = await pdf(pdfBuffer)

  // Get the PDFs text
  return Promise.resolve(renderedData.text)
}

And as a last step, let's adjust the catch-all route to get the text:

// Catch-all route
app.use((req, res) => {
  let cssFile = req.path

  // So `index.css` works.
  if (cssFile.endsWith('/')) {
    cssFile += 'index'
  }

  cssFile += '.css'

  // File doesn't exist, so we break here
  if (!fs.existsSync(path.resolve('./app/' + cssFile))) {
    res.sendStatus(404)
    return
  }

  const cssFilePath = 'http://localhost:3000/_internal' + cssFile

  getContent(cssFilePath, req.method, {
    ...req.query, // GET parameters
    ...req.body, // POST body
  }).then(content => {
    res.send(content)
  })
})

That should do the trick.

 Demo time!

Let's put this thing to test.

 Calculator using a form

A basic "Hello World" is simple enough. Let's build a CSS calculator:

body {
    --title: '<h1>Calculator:</h1>';
    --form: '<form method="POST" action="/"><div><label for="num1">Number 1</label><input id="num1" name="num1"></div><div><label for="num2">Number 2</label><input id="num2" name="num2"></div><button type="submit">Add two numbers</button></form>';
}

[data-http-method="POST"] body {
    counter-set: sum var(--num1, 0) val1 var(--num1, 0) val2 var(--num2, 0);
}

[data-http-method="GET"] body::before {
    content: var(--title) var(--form);
}

[data-http-method="POST"] body::before {
    --form: '<form method="POST" action="/"><div><label for="num1">Number 1</label><input id="num1" name="num1" value="' counter(val1) '"></div><div><label for="num2">Number 2</label><input id="num2" name="num2" value="' counter(val2) '"></div><button type="submit">Add two numbers</button></form>';
    counter-increment: sum var(--num2, 0);
    content: var(--title) var(--form) '<div>Result: ' counter(sum) '</div>';
}

This calculator uses multiple features:

  * Reacting to GET vs POST
  * Doing maths
  * Displaying the result

So, what does this actually do?

We render a title and a form with two input fields called num1 and
num2. If the "app" encounters a POST request, it displays the result,
which is calculated via a CSS counter. The CSS counter is first set
to num1 and later on increased by num2, yielding the sum of the two
numbers. Hence: A basic addition calculator.

Does it work? Indeed it does:

Browser window showing a simple calculator, a terminal to the left
showing the DOM.

The same calculator, showing the result

 Simple two page app with navigation

Let's abstract away some header and some footer into a globals.css
file:

:root {
    --navigation: '<ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul>';
    --footer: '<footer>&copy; 2022</footer>';
}

We can then use it in a index.css like so:

@import "./globals.css";

body::after {
    content: var(--navigation) '<h1>Hello, World!</h1>' var(--footer);
}

Works like a charm:

A simple page with navigation, a title and a footer, no styling.

Phew. What a ride.

---------------------------------------------------------------------

I hope you enjoyed reading this article as much as I enjoyed writing
it! If so, leave a [?] or a ! I write tech articles in my free time
and like to drink coffee every once in a while.

If you want to support my efforts, you can offer me a coffee [?] or
follow me on Twitter ! You can also support me directly via Paypal!

Buy me a coffee button

Discussion (96)

Subscribe
pic
[                    ]
[                    ] Upload image [Upload] [                    ]
Templates  
Personal Moderator loading
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Submit Preview Dismiss
liviufromendtest profile image
Liviu Lupei
Liviu Lupei
[20711ed7-5] Liviu Lupei
Follow
Focused on Automated Testing.

  * Location
    Bucharest, Romania
  * Work
    Solutions Architect at Endtest
  * Joined
    Jul 5, 2020

* Feb 22 * Edited on Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Developers trying to do everything with JavaScript, no one bats an
eye.
Someone trying to do everything with CSS, and everyone loses their
mind.

BTW, you should use Endtest to test it.

51 likes  Reply
liviufromendtest profile image
Liviu Lupei
Liviu Lupei
[20711ed7-5] Liviu Lupei
Follow
Focused on Automated Testing.

  * Location
    Bucharest, Romania
  * Work
    Solutions Architect at Endtest
  * Joined
    Jul 5, 2020

* Feb 22 * Edited on Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Made a meme for this occasion:

css backend

43 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Amazing! That one gets a special place in my collection[?]

10 likes  Reply
oliveiracaue profile image
Caue Oliveira
Caue Oliveira
[81577929-a] Caue Oliveira
Follow

  * Joined
    Feb 21, 2021

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Don't judge JavaScript. it's not the fault of this madness. 

6 likes  Reply
inhuofficial profile image
InHuOfficial
InHuOfficial
[52e35d4c-a] InHuOfficial
Follow
Specialising in accessibility and website load speed / performance.
If you have a question about [accessibility] or [page-speed-insights]
ask away and I will help any way I can!

  * Location
    United Kingdown
  * Work
    Director at Inclusivity Hub
  * Joined
    Jan 2, 2021

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Why so serious? 

7 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

It's about sending a message. Over the internet. Built with CSS.

16 likes Thread
inhuofficial profile image
InHuOfficial
InHuOfficial
[52e35d4c-a] InHuOfficial
Follow
Specialising in accessibility and website load speed / performance.
If you have a question about [accessibility] or [page-speed-insights]
ask away and I will help any way I can!

  * Location
    United Kingdown
  * Work
    Director at Inclusivity Hub
  * Joined
    Jan 2, 2021

* Feb 22 * Edited on Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Do you want to know how I got these vars, huh? 

12 likes Thread
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

How about a magic trick? I'm gonna' make this budget disappear!
TA-DAAAA!

8 likes Thread
inhuofficial profile image
InHuOfficial
InHuOfficial
[52e35d4c-a] InHuOfficial
Follow
Specialising in accessibility and website load speed / performance.
If you have a question about [accessibility] or [page-speed-insights]
ask away and I will help any way I can!

  * Location
    United Kingdown
  * Work
    Director at Inclusivity Hub
  * Joined
    Jan 2, 2021

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

I am a man of my (microsoft) Word!

Ok, I think I have run out of clever Joker puns as that one was just
terrible!

Although for this article I think we missed the most apt quote:

"The only sensible way to live in this world is without rules." (when
he is being interrogated by Batman)

9 likes  Reply
posandu profile image
Posandu
Posandu
[9cf68f00-2] Posandu
Follow
I'm Posandu  Contact me at posandu[@]tronic247.com. Visit my website
https://www.tronic247.com/

  * Location
    The Earth
  * Work
    Full stack developer
  * Joined
    Jun 24, 2021

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Reminds me of joker. 

4 likes  Reply
liviufromendtest profile image
Liviu Lupei
Liviu Lupei
[20711ed7-5] Liviu Lupei
Follow
Focused on Automated Testing.

  * Location
    Bucharest, Romania
  * Work
    Solutions Architect at Endtest
  * Joined
    Jul 5, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

 nice one

2 likes  Reply
ankush981 profile image
Ankush Thakur
Ankush Thakur
[5ac828f1-d] Ankush Thakur
Follow

  * Joined
    Oct 3, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Best comment ever! :D

4 likes  Reply
stephenbrooks220413 profile image
Stephen A Brooks
Stephen A Brooks
[9cffe4e5-9] Stephen A Brooks
Follow
Served in the Military for 17years, then before getting out I learned
how to code watching Udemy, following basic tutorials. Recently I
decided to learn a fullstack called MERN with Bryan University.

  * Email
    krammer439298@gmail.com
  * Location
    Oklahoma city, Oklahoma
  * Education
    Associates of Science in fullstack development
  * Work
    Student of web development at Bryan University
  * Joined
    Jun 20, 2021

* Feb 27 * Edited on Feb 27

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

To me that doesn't make sense why they would act that way, especially
when developers and recruiters are more for making everything
dynamic. If it makes it easier to load on web browsers then you'd
figure it would be opposite.

2 likes  Reply
inhuofficial profile image
InHuOfficial
InHuOfficial
[52e35d4c-a] InHuOfficial
Follow
Specialising in accessibility and website load speed / performance.
If you have a question about [accessibility] or [page-speed-insights]
ask away and I will help any way I can!

  * Location
    United Kingdown
  * Work
    Director at Inclusivity Hub
  * Joined
    Jan 2, 2021

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Well I think you and I need to team up as this is the missing piece
of my "abusing the Internet" series! 

Absolutely incredible idea 

Imagine this idea combined with this one: dev.to/inhuofficial/
i-built-a-3-pa... - we could change the world! 

6 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

I'm still amazed that what you built there actually works. Not sure
if we would be able to implement the contact form, but the click
listeners should be doable: You could resize the HTML tag to the
mouse click coordinates and implement ranges via container queries,
maybe? That should work...

5 likes  Reply
inhuofficial profile image
InHuOfficial
InHuOfficial
[52e35d4c-a] InHuOfficial
Follow
Specialising in accessibility and website load speed / performance.
If you have a question about [accessibility] or [page-speed-insights]
ask away and I will help any way I can!

  * Location
    United Kingdown
  * Work
    Director at Inclusivity Hub
  * Joined
    Jan 2, 2021

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Yeah I am not going to attempt it as my head would explode but I can
just imagine how much damage we could do combining them 

3 likes Thread
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Well then, here you go:

html {
    margin: 0;
    padding: 0;
    height: calc(var(--mousey) + 0px);
    width: calc(var(--mousex) + 0px);
    position: absolute;
    overflow: visible;
    display: inline-block;
    container-type: inline-size;
    container-name: mousepos;
}

body {
    position: absolute;
}

@container mousepos (min-width: 0px) and (max-width: 100px) and (min-height: 0px) and (max-height: 100px) {
    body::before {
        content: 'Clicked in 100 by 100 area';
    }
}

/* Usage: /size?mousex=12&mousey=32 */

The amount of overhead this generates for a simple range of two
numbers is hilarious, though.

3 likes Thread
inhuofficial profile image
InHuOfficial
InHuOfficial
[52e35d4c-a] InHuOfficial
Follow
Specialising in accessibility and website load speed / performance.
If you have a question about [accessibility] or [page-speed-insights]
ask away and I will help any way I can!

  * Location
    United Kingdown
  * Work
    Director at Inclusivity Hub
  * Joined
    Jan 2, 2021

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Ah, I had not thought about it that way, I was thinking "you can't
get the mouse position with CSS", but now I realise I hadn't thought
about SERVER CSS and we can still have fun on the front end! I really
do love this idea, it is completely bonkers 

4 likes Thread
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22 * Edited on Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Yeah, it takes some time to adjust to that modus operandi, I have yet
to fully understand the monstrosity I created here. It definitely
needs some out of the box (haha) thinking, but with a bit of
creativity, I guess you can achieve a lot.

What I'm most afraid of is mixing up frontend CSS with backend CSS. I
mean, there's no way of knowing which is which just from the file
tree and every CSS file could technically be executed by the backend.

My brain doesn't like this.

5 likes  Reply
adrai profile image
Adriano Raiano
Adriano Raiano
[8a97d74c-d] Adriano Raiano
Follow
Founder, CTO, Software Architect, Bachelor in Computer Science #
serverless #nodejs #javascript Always in search for #innovative and #
disruptive stuff

  * Joined
    Apr 14, 2021

* Feb 21

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

OMG!!! Why?

6 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 21

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Simple: To find out if it's possible! :D I'd never use this for real,
but it was a fun little experiment nevertheless.

7 likes  Reply
adrai profile image
Adriano Raiano
Adriano Raiano
[8a97d74c-d] Adriano Raiano
Follow
Founder, CTO, Software Architect, Bachelor in Computer Science #
serverless #nodejs #javascript Always in search for #innovative and #
disruptive stuff

  * Joined
    Apr 14, 2021

* Feb 21

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

You're awesome & crazy 

6 likes Thread
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

No, you're awesome!  Crazy is right, though, being normal is boring.


7 likes  Reply
stereoplegic profile image
Mike Bybee
Mike Bybee
[d81c0313-5] Mike Bybee
Follow
Strong opinions, loosely typed.

  * Joined
    Mar 13, 2019

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Could vs. should

6 likes  Reply
emwadde profile image
emwadde
emwadde
[50b0da35-3] emwadde
Follow

  * Joined
    Dec 28, 2021

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

The craziest thing anyone has ever done with css. Embrace the
craziness. When developing internal apps, there is this gray area
between staging and production, i think I'm gonna use this crazy idea
in that area

3 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

If you actually found a use case for this thing, I'm really curious
about it! My opinion still is that this should never be used in any
project ever, because it would confuse the living hell out of
everyone involved.

1 like  Reply
chuvisco88 profile image
Fabian Schweizer
Fabian Schweizer
[2c019782-b] Fabian Schweizer
Follow

  * Joined
    Jan 5, 2021

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

But then again, is it confusing just because no one ever used it?
What if this were a de-facto standard of doing things? Basically
saying it is only confusing because people are not used to it (which
might be a good thing or not)

4 likes Thread
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 23 * Edited on Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Yes and no. I pointed out in some other comment that there's no real
distinction between frontend CSS and backend CSS and that every valid
CSS file can basically be executed by this app. If there's no
convention coming from userland to distinguish things, there's really
no way to tell, except for opening every single file and looking. I
do recognize that this is the same issue with Node/JS, but most FE
frameworks know a way around that. If using CSS for the backend
indeed was the standard since ages, I fully agree with you. Those
conventions probably would've emerged by now. Probably CSS would also
look way different, because it would serve two purposes. I could
imagine that CSS would've developed into more of a scripting language
than what it is today.

1 like  Reply
mistval profile image
Randall
Randall
[81e25d08-d] Randall
Follow

  * Joined
    Jun 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Such an awesomely dumb idea, and great write-up!

5 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Thank you so much! Sometimes the seemingly dumbest ideas turn out to
be the most fun!

7 likes  Reply
ekimcem profile image
Ekim Cem Ulger
Ekim Cem Ulger
[ff64fa9b-d] Ekim Cem Ulger
Follow
Founder & Software Developer @BronixEngineering

  * Email
    ekimcemulger@gmail.com
  * Location
    Ankara, Turkey
  * Education
    Atilim University BSc. / METU MSc.
  * Work
    Software Developer @BronixEngineering
  * Joined
    Oct 4, 2020

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

LOOOOOOOOOOOOOOOOOOOL

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 24

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Glad this made you laugh! :D

1 like  Reply
ekimcem profile image
Ekim Cem Ulger
Ekim Cem Ulger
[ff64fa9b-d] Ekim Cem Ulger
Follow
Founder & Software Developer @BronixEngineering

  * Email
    ekimcemulger@gmail.com
  * Location
    Ankara, Turkey
  * Education
    Atilim University BSc. / METU MSc.
  * Work
    Software Developer @BronixEngineering
  * Joined
    Oct 4, 2020

* Feb 25

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Your effort on this is admirable, you should create a repo and call
people to improve it :D !

1 like Thread
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 26

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

I'm afraid that it will then spread and that people will actually
start to use it lol

1 like  Reply
valeriavg profile image
Valeria
Valeria
[2ee31638-e] Valeria
Follow
Re-inventor extraordinaire, optimisation addict and open web advocate

  * Location
    Stockholm, Sweden
  * Joined
    Sep 23, 2020

* Feb 21

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Bloody brilliant 

3 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 21

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Thank you so much! Gotta admit, sometimes the line between genius and
madness is very thin...

6 likes  Reply
amrikasir profile image
Al Amrikasir
Al Amrikasir
[50541fce-9] Al Amrikasir
Follow

  * Joined
    Dec 7, 2019

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

What ??? Whyyy ??
I know.. that awesome, but.. WHY IT WORK ?

May I use CSS to add csrf to the form 
Or, use CSS as a backdoor 

3 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Great question, actually! CSRF would require some sort of randomness
to create cryptographically secure tokens, but sadly RNG is not part
of CSS just yet. However, since we've got puppeteer in there, one
could technically write a browser extension for that! Code injection
should be possible currently, it's not doing much validation, but
adding that would've exceeded the scope of the post. Then again: Does
the average hacker really think about injecting CSS? :D

2 likes  Reply
codermapuche profile image
Nehuen Prados
Nehuen Prados
[425f6313-7] Nehuen Prados
Follow

  * Joined
    Feb 23, 2022

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Men... I really go to try some variarion of this in my next proyect.
If the css rule match the endpoint, and the property names are hook
functions and properties values are the arguments, we can use it to
configure a full backend logic.
Now, we need an html (hook template method language) for write the
hook functions without javascript!
Thanks for inspire my day.
PD: what about media querys based on user agent for match mobile
version?

1 like  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

That should very well be doable, actually. One could use the CSS
paint API for custom language-specific logic, for example. Only
downside: the PDF trick probably wouldn't work anymore...

I doubt the usefulness of media queries in the backend, to be honest,
the user's screen isn't available there. And the UA is problematic at
best, it can be spoofed very easily.

1 like  Reply
jwp profile image
John Peters
John Peters
[8ab5c636-e] John Peters
Follow
Lit-Html or Svelte?

  * Location
    Minneapolis, MN
  * Joined
    Jul 30, 2019

* Feb 21

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

I like your thought process. It's how people become artists at what
they do. Others will say how did he do that..

3 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Wow, thank you so much! I like the explorative approach very much. I
feel like planning everything in advance is often hindering my
creativity. Solve one problem at a time, do some research, implement,
on to the next part. Don't get me wrong, there's times you need to
plan carefully, but for a silly experiment, creativity is much more
important. I hope it's still understandable, though.

3 likes  Reply
adam_cyclones profile image
Adam Crockett
Adam Crockett
[06057d1d-f] Adam Crockett
Follow
I work at ForgeRock as Staff UI Engineer, I play with all sorts
really. Lately WASM is my toy of interest.

  * Location
    Bristol
  * Education
    Fine Art Degree?!
  * Work
    Staff UI Engineer at ForgeRock
  * Joined
    Aug 21, 2018

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

This reminds me of my client side only post only this is way way
better!

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Glad you liked my post! I had a quick look - is it the portfolio post
you meant? I've got two things to tell you. First, that's comparing
apples and oranges. You've built something amazing and useful, I
built a silly experiment. Second, every project is awesome,
especially if you've had fun building it and learned something along
the way.  After all, every project has its very own set of
challenges, right? 

1 like  Reply
adam_cyclones profile image
Adam Crockett
Adam Crockett
[06057d1d-f] Adam Crockett
Follow
I work at ForgeRock as Staff UI Engineer, I play with all sorts
really. Lately WASM is my toy of interest.

  * Location
    Bristol
  * Education
    Fine Art Degree?!
  * Work
    Staff UI Engineer at ForgeRock
  * Joined
    Aug 21, 2018

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

dev.to/adam_cyclones/client-side-o...

That one there.

The portfolio post is some really old post 

2 likes Thread
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22 * Edited on Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Oh, I'm sorry, I didn't look hard enough apparently... Your approach
is not so different from what I'm doing here, actually - we both use
data URLs, you're just doing a lot more with it. I wonder how far you
could go with that. Some bootstrapping JS encoded in na data URL that
reads/writes to local storage would open up a ton of possibilities!

2 likes  Reply
micahlt profile image
Micah Lindley
Micah Lindley
[87cf6882-2] Micah Lindley
Follow
Self-taught teen designer, developer, and musician. Linux + Android
lover and JavaScript/Vue enthusiast. Creator of Itchy and Modchat.
Hack the world! 

  * Location
    Memphis, TN
  * Education
    Homeschooled
  * Work
    Webmaster @ Epic Solutions
  * Joined
    Feb 14, 2019

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

This is beyond cursed, but I love it so much. An absolutely amazing
article!

3 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Thank you so much, glad you liked it, even though it's cursed :D

1 like  Reply
xowap profile image
Remy 
Remy 
[de2f8a41-d] Remy 
Follow
I spent my adolescence in Dreamweaver, my student years in Vim and my
adult life in PyCharm.

  * Location
    Madrid
  * Education
    Telecommunications Engineer
  * Work
    CTO at WITH Madrid
  * Joined
    Feb 16, 2017

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

From "CSS is in the full stack" to "CSS is the full stack"

3 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Hah, love that one! :D

2 likes  Reply
citizen428 profile image
Michael Kohl
Michael Kohl
[0c966be2-d] Michael Kohl
Follow
Your friendly neighborhood anarcho-cynicalist. -\_(tsu)_/- and (+deg#deg)
+( +-+) are my two natural states.Tag mod for #ruby, #fsharp, #ocaml

  * Location
    Thailand
  * Education
    man pages
  * Work
    Senior Lead Software Engineer at Forem
  * Joined
    Oct 30, 2016

* Feb 25

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Now combine it with persistence and you're only a step away from
full-stack CSS 

leemeichin.com/posts/yes-i-can-con...

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 26

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

I'm not sure this works out of the box with my implementation here.
The CSS SQL adapter (I honestly never thought that I would write
these two words so close together) uses the CSS paint API, so it's
creating an image. My server relies on fetching actual machine
readable text via PDF, it cannot handle images. However, if we can
somehow replace the PDF approach with OCR and simply parse whatever
text is on a - say - screenshot of the page, that would open up a ton
of possibilities! I was actually thinking about using OCR to begin
with but deemed it a total overkill for a simple PoC.

1 like  Reply
citizen428 profile image
Michael Kohl
Michael Kohl
[0c966be2-d] Michael Kohl
Follow
Your friendly neighborhood anarcho-cynicalist. -\_(tsu)_/- and (+deg#deg)
+( +-+) are my two natural states.Tag mod for #ruby, #fsharp, #ocaml

  * Location
    Thailand
  * Education
    man pages
  * Work
    Senior Lead Software Engineer at Forem
  * Joined
    Oct 30, 2016

* Feb 28

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

It was more a joke than anything else and I really wanted to drop
this link in here 

1 like  Reply
greenreader9 profile image
Greenreader9
Greenreader9
[fb60a0ca-c] Greenreader9
Follow
Hello! I enjoy 3D Printing, Mobile Game Developement, and Web Design/
Development

  * Email
    hello@tinkertechlab.com
  * Location
    USA
  * Work
    Self-Employed Coder/Programmer/Developer/Designer
  * Joined
    Jan 28, 2022

* Feb 21

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Very creative!

3 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 21

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Thank you very much! Sometimes silly stuff like this just pops out
into my mind. :)

2 likes  Reply
varungupta3009 profile image
Varun Gupta
Varun Gupta
[a4730ceb-d] Varun Gupta
Follow
Developer, Designer, Gamer, Hacker.

  * Location
    Bangalore, INDIA
  * Joined
    Aug 8, 2019

* Feb 28

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

I'm so proud of this community. 

2 likes  Reply
mandar1jn profile image
mandar1jn
mandar1jn
[b314c716-f] mandar1jn
Follow

  * Location
    Voorburg, Holland
  * Work
    hobbyist at nowhere
  * Joined
    Oct 7, 2020

* Feb 26

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Why are you using a try catch instead of checking if the file exists?

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 27

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

A very good question! I used try/catch as a way to catch all possible
file/disk IO errors that might occur. A good example would be
permission errors.

Consider this bash code:

#!/usr/bin/bash
echo "Hello, World!" > someFile.txt
chmod 000 someFile.txt
cat someFile.txt # /usr/bin/cat: foo.txt: Permission denied

It creates a file called someFile.txt and changes its mode to no read
/write/execute permissions for anyone, not even the file owner. So
noone can open the file without sudo or being root.

Now, let's check if Node can tell if the file exists and if it can
open it:

const fs = require('fs');
console.log('File exists: ', fs.existsSync('./someFile.txt'))
console.log('File opened: ', fs.readFileSync('./someFile.txt'))

Shows this:

File exists:  true
internal/fs/utils.js:307
    throw err;
    ^

Error: EACCES: permission denied, open './someFile.txt'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at [stdin]:3:33
    at Script.runInThisContext (vm.js:133:18)
    at Object.runInThisContext (vm.js:310:38)
    at internal/process/execution.js:77:19
    at [stdin]-wrapper:6:22
    at evalScript (internal/process/execution.js:76:60)
    at internal/main/eval_stdin.js:29:5
    at Socket.<anonymous> (internal/process/execution.js:205:5) {
  errno: -13,
  syscall: 'open',
  code: 'EACCES',
  path: './someFile.txt'
}

So, while checking for file existence already catches the most
obvious error, using try/catch helps me work around a lot more errors
that I did not anticipate.

1 like  Reply
kateshim625 profile image
kateshim625
kateshim625
[8ca2e668-6] kateshim625
Follow

  * Education
    KOREA NATIONAL OPEN UNIVERSITY
  * Work
    Front Web Developer
  * Joined
    Feb 2, 2022

* Feb 25

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Thank you for the good info!

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 25

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

You're welcome! Glad you liked it :)

2 likes  Reply
horaceshmorace profile image
Horace Nelson
Horace Nelson
[61093add-1] Horace Nelson
Follow
I invent, transform, create, and destroy. Web Dev. Frontend. React.
Node. Python. Serverless. Solidity. AWS certified. Scrum certified.

  * Location
    New York City
  * Work
    Senior Director of Engineering at Madison Square Garden
    Entertainment
  * Joined
    Mar 28, 2019

* Feb 24

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

You're a mad man. 

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 24

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Being normal is boring, though, isn't it? 

1 like  Reply
starkraving profile image
Mike Ritchie
Mike Ritchie
[57dda8b6-9] Mike Ritchie
Follow
Full stack developer with an eye towards user experience

  * Location
    Langley BC Canada
  * Work
    Senior Full Stack Developer at TicketOps Inc.
  * Joined
    Jul 1, 2019

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

This is mad scientist level... I like it!

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 24

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Thank you! I won't put that title in my CV, though, it might raise a
few eyebrows... :D

1 like  Reply
rinodrummer profile image
Gennaro Landolfi
Gennaro Landolfi
[0722f55a-0] Gennaro Landolfi
Follow
Italian young web developer

  * Email
    gennarolandolfi@codedwork.it
  * Location
    Casal di Principe, Italy
  * Work
    Full-stack Web Developer at DEN
  * Joined
    Feb 13, 2019

* Feb 24

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

I have a name for it:

--CSS

It's a mix between two concepts: C++ (the pre-decrement makes clear
that there are less computational options) and CSS Custom Properties
syntax.

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 24

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Uuh, love it! "dash dash css" has a nice ring to it, I must say. I
was also thinking about something like CSSSSSSSSSSSSSS - "Cascading
Style Sheets Simply Shifted Server Side So Silly Science Supplies
Sellable Shiny Solutions Seamlessly"

1 like  Reply
yoursunny profile image
Junxiao Shi
Junxiao Shi
[5dfdb123-2] Junxiao Shi
Follow
stallion coder; push-up specialist

  * Location
    Gaithersburg MD
  * Work
    guest researcher at NIST
  * Joined
    Oct 4, 2019

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Puppeteer on the server! I thought about the same:
dev.to/yoursunny/the-worst-server-...

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

PHP to invoke Node to invoke puppeteer to invoke chromium, how
amazing is that! :D How well does this chain perform, actually?

2 likes  Reply
mayankvikash profile image
Mayank Vikash
Mayank Vikash
[5f83cc62-d] Mayank Vikash
Follow
Developer, writer and creator of mayankvikash.ml

  * Location
    India
  * Education
    SKPS, Jamshedpur, India.
  * Work
    Developer
  * Joined
    Oct 9, 2021

* Feb 23 * Edited on Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Just one question:
What is the need of using CSS as Back-End?

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

There essentially is none, really. Other than the fun of seeing if it
works. The journey is the reward, really. :)

2 likes  Reply
dylanwatsonsoftware profile image
Dylan Watson
Dylan Watson
[32d27989-5] Dylan Watson
Follow
Just another developer trying to get his tests fast, his features to
add value and his bloody code to compile! Lately I've been enjoying
writing about the best way to release software!

  * Location
    Perth, Australia
  * Work
    Tech Lead
  * Joined
    Nov 28, 2019

* Feb 23 * Edited on Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Life.. uhhh... finds a way.<br>

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Me building this abomination:

It's alive!

3 likes  Reply
hebibulla profile image
hebibulla
hebibulla
[81b55871-0] hebibulla
Follow

  * Location
    Tokyo Japan
  * Work
    Fullstack developer
  * Joined
    Feb 20, 2021

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

now we need new css backend framework 

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 23

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Oh no, what have I done!  Just for the sake of the pun: How about
"Headwind" as the first framework's name?

3 likes  Reply
romuloctba profile image
RcDev
RcDev
[85342439-c] RcDev
Follow

  * Joined
    Mar 13, 2021

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Crazy and awesome. But how to style those? With regular static css,
is it? Naahh style it using restsapi (REST Styling API)

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Thank you so much, glad you liked it! Using regular static CSS is
actually discouraged with server-side CSS, since one cannot tell the
difference between server-side and client-side CSS anymore.  The
only logical conclusion would be to use - as you put it - some
backend technology in there for styling. Perhaps that's possible... 

1 like  Reply
xolo profile image
Xolo
Xolo
[0383bcf0-c] Xolo
Follow
I a beginner MERN Stack Developer

  * Joined
    Nov 24, 2021

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

I feel that the legend of hacking with html is possible at this
point.

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Oh, absolutely! I was thinking about some database integration
actually. It could render in some more DOM (you know, CSS doesn't
know lists etc.) that could be styled. Would be a bit cheated,
though, since it's not only CSS anymore... Using HTML as a backend
lang on the other hand is an entirely different story... wasn't that
how DHTML and in turn PHP were born? :D

2 likes  Reply
kouliavtsev profile image
kouliavtsev
kouliavtsev
[560de9af-a] kouliavtsev
Follow
Developer by day, Indy Hacker by Night

  * Location
    Den Haag
  * Work
    Freelance Jamstack Developer
  * Joined
    Apr 12, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

This article is nuts! And I love it! [?]

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

Thank you so much, glad you liked it! :D

1 like  Reply
posandu profile image
Posandu
Posandu
[9cf68f00-2] Posandu
Follow
I'm Posandu  Contact me at posandu[@]tronic247.com. Visit my website
https://www.tronic247.com/

  * Location
    The Earth
  * Work
    Full stack developer
  * Joined
    Jun 24, 2021

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

What the...

2 likes  Reply
thormeier profile image
Pascal Thormeier
Pascal Thormeier
[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

* Feb 22

  * Copy link
  * 
  * Hide
  * 
  * 
  * 

I know, right? :D

2 likes  Reply
View full discussion (96 comments)
Code of Conduct * Report abuse

Are you sure you want to hide this comment? It will become hidden in
your post, but will still be visible via the comment's permalink.

[ ]

Hide child comments as well

Confirm

For further actions, you may consider blocking this person and/or
reporting abuse

Read next

 
abbeyperini profile image

A Beginner's Guide to HTTP - Part 3: Requests

Abbey Perini - Feb 22

 
abhirajb profile image

200+ Design resources you must know right now!

Abhiraj Bhowmick - Feb 22

 
rrtutors profile image

Charts in Jetpack compose - Create Pie Chart with Jetpack compose

rrtutors - Feb 12

 
clementgaudiniere profile image

Create a parallax effect when the mouse moves

Clement Gaudiniere - Feb 19

[00cde9af-e] Pascal Thormeier
Follow
Passionate full stack web developer, he/him.

  * Location
    Switzerland
  * Education
    BSc FHNW Computer Science (iCompetence)
  * Work
    Senior Software Developer at Liip
  * Joined
    Jul 20, 2020

More from Pascal Thormeier

Start and stop a llama! How to create a non-autoplay GIF web
component [?]
#html #javascript #tutorial #webdev
Throwing around text - Kinetic typography part 2: Tricking gravity
thanks to matter.js! 
#webdev #design #javascript #tutorial
Throwing around text - Kinetic typography part 1: A chilly warm-up
[?] 
#webdev #css #tutorial #design

DEV Community -- A constructive and inclusive social network for
software developers. With you every step of your journey.

Built on Forem -- the open source software that powers DEV and other
inclusive communities.

Made with love and Ruby on Rails. DEV Community (c) 2016 - 2022.

 
DEV Community

We're a place where coders share, stay up-to-date and grow their
careers.

Log in Create account