DEV Community: Florian Woelki

VGQL CLI

Florian Woelki — Tue, 30 Jun 2020 06:26:59 +0000

The main goal of the VGQL command line tool, is to simplify the process of generating a project for a Vue.js and GraphQL techstack.

Currently, the following techstack is supported:

JavaScript/TypeScript
GraphQL (with TypeGraphQL)
TypeORM
Vue.js

In the future there will be Nuxt.js and other ORM extras you can generate your project with.

Why VGQL

Whenever I create a new fullstack project with Vue.js and GraphQL, every time I do the same thing. Installing TypeGraphQL, set TypeScript up and setup your database connection with TypeORM. Therefore, I made this CLI to simplify this process in a dynamic way.

Right now, there is not much dynamic, because the projects get generated with my default settings. But this will change in the future.

How to use VGQL

It is pretty straightforward. You just install the CLI globally and run it. After that it will generate two directories (web and server). The web directory contains the Vue.js application and the server directory contains the GraphQL back-end. Furthermore, the connection is already setup, so you just need to start both services and you are ready to go.

Install the CLI:

npm install -g vgql

Start the CLI:

vgql

Start the web application:

cd web/
npm run serve
OR
yarn serve

Start the server application:

cd server/
npm run start
OR
yarn start

Can you contribute?

Of course! You can contribute by helping to improve the code quality or writing tests. Go on GitHub and start coding!

What do you think about this CLI? Is it useful?

Thank you for reading :)

Y(et) A(nother) CSS framework

Florian Woelki — Wed, 20 May 2020 13:15:39 +0000

You might ask why another CSS framework?

The quick question is, I didn't find one that fits my needs. Therefore, I made yet another css framework.

YACSS is a modern utility and component based CSS framework. If you know Tailwind, you should be pretty familiar with YACSS. YACSS uses utility classes and beautiful prestyled components to work. You can look at some examples on the github page.

What utility based classes are in YACSS?

The reason why there are for every single width or color a system is really easy to explain. The focus should be on the development of the product and not the difference between margin-left 1px or 2px.

We have different utility classes and systems:

different colors (e.g. indigo, blue, red, gray) for background, on hover or text color
spacing system (e.g. m-1 sets a margin with 16px)
font size system (e.g. font-12 sets the font size to 12px)
border radius system (e.g. btl-sm sets top left border radius to 2px)
border system (e.g. b-2 sets a white border with 2px width. You can set the border color with bc-purple-700)
and much more to explore...

What components are in YACSS?

Right now, there are some components you can dynamically change or apply:

Sidebar, Navbar
Buttons (Primary, Secondary, Tertiary)
Links
12 grid system with large, medium and small device breakpoints
Button Animations
Avatars
Alerts
Cards
Pagination
Tags
Modals
Input Forms

The best thing is: you can customize every single component with the utility classes.

Online Playground Vueply

Florian Woelki — Wed, 20 May 2020 06:46:36 +0000

Vueply is a experimental online playground, which was created for learning and programming in the web. The main reason, why i built this WebApp is because, I want to launch a course section with "homeworks". For getting started without any tools you can directly jump into that online playground and test your knowledge and start coding.

Vueply supports Vue.js, JavaScript, TypeScript, HTML, CSS and Markdown. Currently, I am working hard on supporting Python and live code for this online playground.
With live code you can simply connect yourself with a friend and solve a problem together.
In additional, right now everything runs in the browser and nothing is stored on any server (that will change with live code and python).

The goal behind Vueply is not to replace the popular choices Sandbox or any other playground. The goal is to work good, fast and easy for beginners. So they can code while they're watching a course.

Demo Link

You can visit the online playground here

Code

https://github.com/daycademy/vueply/

Techstack

I've built this online playground with JavaScript/TypeScript and Vue.js. Vue.js uses typically libraries like Vue Router and Vuex. Furthermore, the server uses TypeScript with Express and Socketio.