DEV Community: Rudy Alula

Ogone 0.22.0 - Obvious: new CSS pre-processor

Rudy Alula — Wed, 26 Aug 2020 16:20:43 +0000

Intro

Hey! I'm Rudy Alula, working as Front-End Developer for Stanley Robotics.
now that the presentations are made, let me introduce a new feature from Ogone that you should explore: Style Network
start learning Ogone here.

History

you got to know that in earlier versions, Ogone has supported modules like deno-sass and denolus to transform scss/sass/stylus like text.
these weren't maintained and generated many issues inside Ogone so following the advices in this article. I erased them..
being a Sass/Stylus user, I couldn't bare Ogone will only supports native-CSS without the tricks I'm used to.
So I decided to create an internal css-preprocessor that could deal with all the tricks I want.

& Obvious came out

Obvious is the name of this pre-processor, I don't know why but that just sounds cool so Obvious

more seriously Obvious has big potential as it is one of the steps of the compilation. it has access to the components and knows what components are imported in which component.

in the past you would naturally give a language to the style tag like <style lang="obvious">, it is no more required, Obvious is now by default.

ok that's cool but what are the features ?

let me give you an overview:

nested rules
parent referencing with &
import component's rules and vars @use 'component-tagname' as Component;
export rules, vars @export const myVar = red;
save rules inside vars @const t = div { /* ... */}
spread rules @const rule = div {...}; div { ...$rule; }
vars @const t = value;
eval the value of one variable @const* var = true;
css minification

Nested rules

I think this was obvious. this feature was required.
for example, inside your style element you would write:

all paragraph element should display a text in grey, excepted for the paragraph that is a child of a div element.

Parent Referencing

use the & character to make a reference to the parent selector.

is like

div.container { background: blue; }
div.container:hover { background: red; }

Variables

getting varaible declarations from js. this will let you filter what rules/variables are available for external uses.

to declare a variable use @const like following:

now let say we want to be able to use those vars outside the component but through a rule

Import/Export things from Components

this is like namespaces from Less but doing it through a component.

let's write two rules. one exported and another private one.

start using $spanRule inside another component.

Conclusion

Sass and Less inspired but I took some liberties on few syntaxes.
this article only exposes the new CSS parser of Ogone called Obvious. Now that I can parse properties of CSS Rules, I'm planning to use CSS rules for shaders definitions. please check this, if you're interested in webGL1/2 API

Ressources

Otone ^0.1.3 on VS Code
Ogone 0.22.0
Deno ^1.3.0

available on Deno: here

Deno: Front-end diagnostics.

Rudy Alula — Fri, 17 Jul 2020 12:00:28 +0000

Intro

Hey! I'm Rudy Alula, and I work as Front-end Developer for Stanley Robotics, which is solding the first outdoor robot parking vallet in automobile industry.
In this article you're gonna see what are the modules that you can use to build front applications and at the end I'm going to talk more about Ogone 0.17.0-rc.1.

Quick words

this article is made to help people searching for front-end tools compatible with deno and also to improve your knowledges.
all modules are sorted by number of stars on github and the style of rendering
these are repertoried in deno.x and x.nest.land.

Why ?

with deno Front-end creators are free from Webpack, RollUp, Parcel, Browserify and other bundlers.
it also allows some features like downloading remote components with url.

Diagnostics

Creator: author of the module
version: actual version
stars: number of stars on github
style: CSR | SSR | SPA | PWA | MVC | GUI
examples: repos has examples
Component oriented: is the module using components ?
React dependent: is the module using React to render ?
Sass Support: is the module supporting Sass css pre-processor ?
Ejs support: is the module using Ejs (or handlebars) ?
deno.x: can get it on deno.land/x
x.nest.land: can get it on nest.land's gallery
repository: the repos.

Server Side Rendering

Most of these tools are using React to render the html. if you're good with JSX on server side you can check these.

	Creator	version	stars	style	examples	Component oriented	React dependent	Sass Support	Ejs support	deno.x	x.nest.land	repository
pogo	sholladay	0.4.0	255	SSR	yes	no	yes	no	no	yes	no	https://github.com/sholladay/pogo
denjucks	denjucks	v1.1.1	23	SSR	no	no	no	no	/	yes	no	https://github.com/denjucks/denjucks
angular_deno	alausor	v0.1.1	18	SSR	yes	yes	no	no	no	yes	no	https://github.com/alosaur/angular_deno
view_engine	deligenius	v1.3.0	16	SSR	no	no	no	no	yes	yes	no	https://github.com/deligenius/view-engine
adka	apiel	0.1.5	6	SSR	yes	yes	yes	no	no	yes	no	https://github.com/apiel/adka
Dexr	AkifumiSato	v0.2.2	5	SSR	yes	yes	yes	no	no	yes	no	https://github.com/AkifumiSato/dexr
next	mtwzim	/	5	SSR	yes	yes	yes	no	no	yes	no	https://github.com/mtwzim/next
jsx-html	apiel	1.2.1	1	SSR	yes	yes	yes	no	no	yes	no	https://github.com/apiel/jsx-html
postJs	postui	0.0.15	1	SSR	yes	yes	yes	no	no	yes	no	https://github.com/postui/postjs
domdom	eirikb	v4.12.0	0	SSR	no	yes	yes	no	no	yes	no	https://github.com/eirikb/domdom-deno
Qcom	maheshkareeya	/	0	SSR	no	no	no	no	no	yes	no	https://github.com/maheshkareeya/ssr

11 SSR are available for deno.
7 of them are using React.

Client Side Rendering

Client Side Rendering is the way to bundle HTML, JS, CSS and static files for Server-less applications. Ogone is one of the deno's available front-end build tools.

	Creator	version	stars	style	examples	Component oriented	React dependent	Sass Support	Ejs support	deno.x	x.nest.land	repository
Ogone	SRNV (Rudy Alula)	0.17.0-rc.0	9	CSR/SPA/PWA	yes	yes	no	yes	no	yes	yes	https://github.com/SRNV/Ogone
webcomponent	Matheus Vinícius	/	0	CSR	no	yes	no	no	no	yes	no	https://github.com/DenoBRComunitty/webcomponent

Desktop

	Creator	version	stars	style	examples	Component oriented	React dependent	Sass Support	Ejs support	deno.x	x.nest.land	repository
webview_deno	webview	0.4.3	430	GUI	yes	no	no	no	no	yes	no	https://github.com/webview/webview_deno
carol	uki00a	v0.0.6	7	GUI	yes	no	no	no	no	yes	no	https://github.com/uki00a/carol

MVC

these tools are not made for front-end works but can be used to render a static site.

	Creator	version	stars	style	examples	Component oriented	React dependent	Sass Support	Ejs support	deno.x	x.nest.land	repository
deno-drash	Drash.land	v1.0.8	526	MVC	yes	no	no	no	custom	yes	yes	https://github.com/drashland/deno-drash
Mandarine.ts	Andres Pirela	v1.2.1	52	MVC	yes	no	no	no	yes	yes	yes	https://github.com/mandarineorg/mandarinets

Ogone 0.17.0-rc.1

Searching for collabs, Ogone is still under development and aim to reach the 1.0.0 version.
The last version implements a new way to declare the properties of the component with typescript.
if you don't know Ogone, Single File Components based, it uses a protocol to code the component.
protocol is a custom concept, it accepts 5 labels:

def
before-each
declare
case ...
default

Ogone 0.17.0-rc.1 performances

rendering the example/app from Ogone repository.
rendering with 187 ms scripting and 6000+ nodes used.

Examples

Otone 0.0.8 (Syntax HighLighter for VS Code) is available and supports Ogone 0.17.0-rc.1

Want to learn more about Ogone ? check it!

Any module is missing or wanna see more diagnostics ? don't hesitate to comment!

Peace.

Deno 1.2.0: Url Argument Type Solutions

Rudy Alula — Tue, 14 Jul 2020 13:32:07 +0000

Intro

hmm, yesterday, some of us, Deno Devs (or Denosaurs or...) had a really rude experience with deno upgrade.
Like each time there's a new version we naturally decided to switch and upgrade to the new version.
I think this is a really good lesson for me and perhaps others. you're gonna see why.
Deno 1.2.0 came with a "breaking" change or I don't know how to call it, that slowed down many modules development, like Mandarine.ts from Andres Pirela or Ogone for myself.
this version implements a new Argument type for URL, it says:

TS2345 [ERROR]: Argument of type 'string | URL' is not assignable to parameter of type 'string'.
Type 'URL' is not assignable to type 'string'.

The main problem is ... this is not my code... so something were broken but I didn't know where.
after a discussion in discord, we saw that std/path version under 0.61.0 is broken (in my case) on Deno 1.2.0.

Fix

So, the first thing I did: upgrade the std/path in deps.ts to 0.61.0 (if you got one in your module, or in mod.ts). after this, the same issue came out: new Url(bruh) is not assignable .. that was not enough and I had to learn how to inspect the dependency tree by using: deno info --unstable --no-check deps.ts

--no-check will say to the typescript compiler to omit the errors. and --unstable is to allow the unstable features of Deno.

this should print a large list like following:

for me that was plugin_prepare, used by Deno Sass that were using an old version of std/path (0.51.0). after a Pull Request this were fixed.

Solutions

Avoid using master branch: you guys need to put the version on the imports, especially for the deno.x modules. master's branch is by definition unstable. do deno.land/std@[version]/[module]/.... do it now for all your dependencies
Deno info: use deno info --unstable --no-check deps.ts like explained above to inspect which module is using an old deno.std version.
Pull Request: if you're in the same case with a dependent sub-module, you need to make a PR or ping the maintainers and tell them to use supported version of deno.std in Deno 1.2.0
Downgrade: deno upgrade --version 1.1.3 and wait for all the sub-modules to change the versions.
the sub-module is no more maintained: erase it.
also: keep in mind deno.std are still unstable.

Acknowledgements

@yamboy
@lucasonato

related sources:

The issue

Deno: Ogone's JSX output

Rudy Alula — Fri, 10 Jul 2020 11:04:14 +0000

Intro

Hey! I'm Rudy Alula, and I work as Front-end Developer for Stanley Robotics, which is solding the first outdoor robot parking vallet in automobile industry.

with this article, you're about to understand how <div><img src="..."/></div> is rendered by Ogone on your browser.

Actually Deno don't have a native DOMParser or std one, so Ogone implements a custom DOMParser, this allows some custom stuffs and let Ogone out of React's JSX supremacy.

this <div><img src="..."/></div> will simply output like this:

(function(ctx, pos = [], i = 0, l = 0, ap = (p,n) => {p.append(n);}, h = (...a) => document.createElement(...a), at = (n,a,b) => n.setAttribute(a,b)){
  let p = pos; 
  const nt = h('template'), n1 = h('div'), n2 = h('img');
  at(n2, 'src', '...');
  ap(nt,n1); ap(n1, n2);
  return nt;
});

Deno: Learn how to use Ogone

Rudy Alula — Fri, 10 Jul 2020 09:01:55 +0000

Intro

Hey! I'm Rudy Alula, and I work as Front-end Developer for Stanley Robotics, which is solding the first outdoor robot parking vallet in automobile industry.

with this article, you're about to learn more on Ogone but first you need to understand what's happening and to README

Those who are familiar with Front-End tools will recognize some of the next features.

Installation

First you need to download Deno. And then run: deno --version

at this moment Ogone is built under deno 1.1.3
so please deno upgrade if your version is under.

for this tutorial we will follow this architecture:

- components
  |__root-component.o3
  |__greeting-component.o3
- deps.ts
- mod.ts

this is the moment to load Ogone. in your deps.ts start by importing Ogone:

// ./deps.ts
export { default as o3 } from 'https://x.nest.land/Ogone@0.18.0-rc.0-4/mod.ts';

// ./mod.ts
import { o3 } from './deps.ts';

o3.run({
  entrypoint: '/root-component.o3',
  modules: '/modules',
  port: 8080, // dev port
});

this file will configure the compilation of your application.

Getting Started

In the root-component, import another component like this with the use ... as statement.

// ./components/root-component.o3
use ./greeting-component.o3 as 'greeting-component';
<greeting-component />

let's see what we can do in the greeting-component.

// ./components/greeting-component.o3
<p>Hello World</p>

write the hello world inside an element
unwrapped textnodes throw an error

yup ok, not so cool but this is like every tools has to present a Hello world example.

Require data from the parent component

hmm, let's say Hello Deno instead but through the root-component. open your greeting-component.o3 and start using the require ... as statement.

// ./components/greeting-component.o3
require name as String;
<p>Hello ${name}!</p>

As you can see the first part of the component is the configuration of the component. you can see the first statement require <property> as <constructors>

if empty, name will throw an error. so you need to provide the Deno to the greeting-component.

// ./components/root-component.o3
use ./greeting-component.o3 as 'greeting-component';
<greeting-component :name="'Deno'" />

List of name

now you have seen two statements use ... as and require ... as.

what if our component has to present a list of random names ?

First, define the names, by using protocol element and def statement, follow this example:

// ./components/greeting-component.o3
require name as String;
<proto>
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
   index: 0
</proto>
<p>Hello ${name}!</p>

here to understand the protocol element.
So we got now an index and a list, but nothing change. hmm let's use the mounted/onMounted feature of Ogone, we will use setInterval to see all the list.
inside the protocol element, use default statement like following:

// ./components/greeting-component.o3
require name as String;
<proto>
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
    index: 0
    actual: null
  default:
    setInterval(() => {
      this.actual = this.people[this.index];
      this.index++;
      if (this.index > this.people.length) this.index = 0;
    }, 1000);
</proto>
<p>Hello ${actual || name}!</p>

default comes from the switch statement. It's the initialization case used by Ogone. this default statement is used when the component is mounted.

Now that the presentations are made, we have one problem. one loop is running until the user exit the window.

let's save this interval.

// ./components/greeting-component.o3
require name as String;
<proto>
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
    index: 0
    actual: null
    interval: null
  case 'destroy':
    clearInterval(this.interval);
  break;
  default:
    this.interval = setInterval(() => {
      this.actual = this.people[this.index];
      this.index++;
      if (this.index > this.people.length) this.index = 0;
    }, 1000);
</proto>
<p>Hello ${actual || name}!</p>

as you can see all properties has to be defined in def
setting an property during the runtime will throw an error

ok that's better like this. you can spot the case case 'destroy'. this case is selected when the component is removed.

what if I want to use user events instead of an interval ?

You can use the flag --click. to test it, write a button element, set the flag attribute '--click:caseName', this will say to Ogone, select this case when there is a click.
example:

<proto>
case 'click:caseName':
  // do things
break;
</proto>
<button --click:caseName />

apply this inside the greeting-component. btw you can also use before-each statement:

// ./components/greeting-component.o3
require name as String;
<proto>
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
    index: 0
    actual: null
  before-each:
     const update = () => {
       this.actual = this.people[this.index];
      if (this.index > this.people.length) this.index = 0;
     };
  case 'click:prev':
    this.index--;
    update();
  break;
  case 'click:next':
    this.index++;
    update(); 
  break;
</proto>
<p>Hello ${actual || name}!</p>
<button --click:prev>-</button>
<button --click:next>+</button>

before-each is selected before all cases, including the default case. this allows you to define vars that you can use in every cases.

use Reflections

Ogone comes out with few new features. one of those is the reflection. this act like a computed: {...} in Vue or the $: in Svelte, for those who knows.
the syntax this.reflect => value; or

this.reflect => {
  // do things
  return value;
}

how can I use it inside the greeting-component ?

good question. you can write it under the before-each statement like this:

// ./components/greeting-component.o3
require name as String;
<proto>
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
    index: 0
    actual: null
  before-each:
     this.actual => {
        if (this.index > this.people.length) this.index = 0;
        return this.people[this.index];
     };
  case 'click:prev': this.index--; break;
  case 'click:next': this.index++; break;
</proto>
<p>Hello ${actual || name}!</p>
<button --click:prev>-</button>
<button --click:next>+</button>

reflections outside the before-each statement are not parsed

For and If flags

what if I want to see all the names ?

there is the flag --for="array as (value, key)" where array is a property or a new array.
erase the useless statements. and insert the paragraph element with the flag.

// ./components/greeting-component.o3
require name as String;
<proto>
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
</proto>
<p --for="people as (person)">Hello ${person || name}!</p>

I don't want to see Mary Grey in the list, what can I do ?

there is two solutions. using .filter() inside the flag --for

// ./components/greeting-component.o3
require name as String;
<proto>
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
</proto>
<p --for="people.filter(n => n!== 'Mary Grey') as (person)">Hello ${person || name}!</p>

or using the --if flag:

// ./components/greeting-component.o3
require name as String;
<proto>
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
</proto>
<p --for="people as (person)" --if="person !== 'Mary Grey'">Hello ${person || name}!</p>

sometimes you will have a long list of name to write, this is annoying inside a component that we want to keep small. Ogone lets you download ressources inside the protocol. assuming that we have a file names.yaml inside a folder sources.

// ./components/greeting-component.o3
require name as String;
<proto def="./sources/names.yaml" />
<p --for="people as (person)" --if="person !== 'Mary Grey'">Hello ${person || name}!</p>

inside ./sources/names.yaml

  people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso

Store

- components
  |__stores
     |__names.stores.o3
  |__root-component.o3
  |__greeting-component.o3
- deps.ts
- mod.ts

in Ogone, everything is a component. To create a store, start by creating a names.store.o3 file.

names is for our example and '.store' is not required.

this component will looks like this:

// ./components/stores/names.store.o3
<proto type="store" namespace="names">
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
</proto>

inject this store component inside your greeting-component

// ./components/greeting-component.o3
use ./stores/names.store.o3 as 'store-names';
require name as String;
<store-names namespace="names" />
<proto>
  def:
     people: []
</proto>
<p --for="people as (person)" --if="person !== 'Mary Grey'">Hello ${person || name}!</p>

the type of the component has to start the name of the component, if it's not starting you will get an error

how can I add one name to the store

you can use the object Store, that you can only access if the component uses a store component.
First create an action inside your store component:

// ./components/stores/names.store.o3
<proto type="store" namespace="names">
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
  case 'action:setName':
    this.people.push(ctx.name);
  break;
</proto>

all actions case have to start with 'action:'

now inside the component use the Store object. like following:

// ./components/greeting-component.o3
use ./stores/names.store.o3 as 'store-names';
require name as String;
<store-names namespace="names" />
<proto>
  def:
     people: []
  default:
    Store.dispatch('names/setName', {name: 'Ogone is Cool'});
</proto>
<p --for="people as (person)" --if="person !== 'Mary Grey'">Hello ${person || name}!</p>

now if you want to update this name, start writing a mutation inside the store:

// ./components/stores/names.store.o3
<proto type="store" namespace="names">
  def:
    people:
      - Mary Grey
      - Sam Lee
      - Christopher Van Sperso
  case 'action:setName':
    this.people.push(ctx.name);
  break;
  case 'mutation:UPDATE_NAME':
    this.people[ctx.id] = ctx.name;
  break;
</proto>

as the actions, the mutations have to start with 'mutation:'

Now, use it inside the component. For this, you need to use the flag --bind on an input. like <input --bind="property" /> but in our greeting-component we are going to use the property name.

// ./components/greeting-component.o3
use ./stores/names.store.o3 as 'store-names';
require name as String;
<store-names namespace="names" />
<proto>
  def:
     people: []
     name: Ogone
  case 'update:name':
    Store.commit('names/UPDATE_NAME', {
      id: this.people.length -1,
      name: this.name,
    });
  break;
  default:
    Store.dispatch('names/setName', {name: 'Ogone is Cool'});
</proto>
<p --for="people as (person)" --if="person !== 'Mary Grey'">Hello ${person || name}!</p>
<input --bind="name" />

Conclusion

with this article you learnt few features from Ogone:

use ... as 'component-name'
require <props> as <constructors>
<proto [type="store"[ >
def: <yaml>
default:
before-each:
case 'destroy'
case 'update:property'
--click:...
--for="array as (item, key)"
--if
--bind="property"
Store.dispatch('namespace/action')
Store.commit('namespace/mutation')

that's a good list for a start.
keep playing with it and mind that Ogone is still open for Pull requests or issues, and it still under development.

DEV Community: Rudy Alula

Ogone 0.22.0 - Obvious: new CSS pre-processor

Intro

History

& Obvious came out

ok that's cool but what are the features ?

Nested rules

Parent Referencing

Variables

Import/Export things from Components

Conclusion

Ressources

Deno: Front-end diagnostics.

Intro

Quick words

Why ?

Diagnostics

Server Side Rendering

Client Side Rendering

Desktop

MVC

Ogone 0.17.0-rc.1

Ogone 0.17.0-rc.1 performances

Examples

Deno 1.2.0: Url Argument Type Solutions

Intro

Fix

Solutions

Acknowledgements

related sources:

See also:

Deno: Ogone's JSX output

Intro

Deno: Learn how to use Ogone

Intro

Installation

Getting Started

Require data from the parent component

List of name

what if our component has to present a list of random names ?

what if I want to use user events instead of an interval ?

use Reflections

how can I use it inside the greeting-component ?

For and If flags

what if I want to see all the names ?

I don't want to see Mary Grey in the list, what can I do ?

Store

how can I add one name to the store

Conclusion