rework works
This commit is contained in:
@ -6,7 +6,7 @@ layout: "simple"
|
||||
Hi folks, I'm a web lover actually working [@Cesson-Sévigné](https://fr.wikipedia.org/wiki/Cesson-S%C3%A9vign%C3%A9), mastering :
|
||||
|
||||
* [`ASP.NET Core`](https://docs.microsoft.com/fr-fr/aspnet/core/?view=aspnetcore-6.0) with `C#` and [`Laravel`](https://laravel.com/) as favorite backend frameworks
|
||||
* [`Vue 3`](https://vuejs.org/) by [*Composition API*](https://vuejs.org/guide/extras/composition-api-faq.html) with [`Typescript`](https://www.typescriptlang.org/)
|
||||
* [`Vue 3`](https://vuejs.org/) with [*Composition API*](https://vuejs.org/guide/extras/composition-api-faq.html) or [`React`](https://fr.reactjs.org/) with [`Typescript`](https://www.typescriptlang.org/)
|
||||
* *Utility-first CSS frameworks* as [`Tailwind`](https://tailwindcss.com/) / [`Windi CSS`](https://windicss.org/) / [`UnoCSS`](https://github.com/unocss/unocss), but also comfortable with [`Sass`](https://sass-lang.com/) with **BEM** implementation
|
||||
|
||||
I can develop proper API design following [**DDD / Hexa**](https://en.wikipedia.org/wiki/Domain-driven_design) principles if applicable. In addition to above `.NET` and `PHP` backend stacks, I'm also confident with :
|
||||
|
1
content/data/works/backend.md
Normal file
1
content/data/works/backend.md
Normal file
@ -0,0 +1 @@
|
||||
Not less than 6 different backend implementations using best practices on `C#`, `Java`, `PHP`, `Python`, `Typescript`, highly up to date, with complete integrated automated tests suite.
|
@ -5,7 +5,7 @@ It's based on [pydantic](https://pydantic-docs.helpmanual.io/), an essential com
|
||||
Main packages involved :
|
||||
|
||||
* [pydantic](https://pydantic-docs.helpmanual.io/), data validation with Python 3.6+ type hints
|
||||
* [SQLAlchemy](https://www.sqlalchemy.org/) with [Alembic](https://alembic.sqlalchemy.org/en/latest/) for schema migration
|
||||
* [SQLAlchemy](https://www.sqlalchemy.org/) v2 with [Alembic](https://alembic.sqlalchemy.org/en/latest/) for schema migration
|
||||
* [python-jose](https://github.com/mpdavis/python-jose) as JWT implementation
|
||||
* [Faker](https://faker.readthedocs.io/en/master/) as dummy data generator
|
||||
* [autoflake](https://pypi.org/project/autoflake/) and [isort](https://pycqa.github.io/isort/) for clean imports
|
||||
|
11
content/data/works/frontend.md
Normal file
11
content/data/works/frontend.md
Normal file
@ -0,0 +1,11 @@
|
||||
Instead of using outdated [Bootstrap v4 alpha 2 theme](https://github.com/gothinkster/conduit-bootstrap-template), I rewrite it on [UnoCSS](https://github.com/unocss/unocss), an awesome efficient Tailwind-like utility-first CSS framework, with Dark Mode support.
|
||||
|
||||
For API communication, as we have full proper OpenAPI spec, it's a real benefit to have a generated Typescript client for full autocompletion feature. The well known [OpenAPI Generator](https://github.com/OpenAPITools/openapi-generator) is okay for this task but generate massive amount of code as it generates a complete client SDK.
|
||||
|
||||
Thankfully this [openapi-typescript](https://github.com/drwpow/openapi-typescript) package is a for more lightweight solution. It simply translates the OpenAPI spec to a simple Typescript file, with only types. No code generation involved ! In order to work, we need to use a specific **fetch** tool which will use all advanced features of Typescript 4 in order to guess type all the API with only a single TS file in runtime !
|
||||
|
||||
Common packages involved :
|
||||
|
||||
* [Vite](https://vitejs.dev/) as main bundler
|
||||
* [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and code formatting
|
||||
* [Iconify](https://github.com/iconify/iconify) as universal icons
|
@ -1,12 +1,9 @@
|
||||
[`React TS`](https://vuejs.org/) implementation. Using same :
|
||||
[`React TS`](https://fr.reactjs.org/) implementation. It uses only pure function components thanks to [React Hooks](https://reactjs.org/docs/hooks-intro.html), which can be more or less related to `Vue 3 Composition API`.
|
||||
|
||||
* [UnoCSS](https://github.com/unocss/unocss) utility-first CSS framework as `Vue 3` version with Dark Mode support.
|
||||
* [openapi-typescript](https://github.com/drwpow/openapi-typescript) as OpenAPI SDK.
|
||||
It uses [React Context](https://beta.reactjs.org/reference/react/useContext) as minimalistic store system, without extra complexity from external libraries like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org).
|
||||
|
||||
Main packages involved :
|
||||
Additional packages :
|
||||
|
||||
* [Vite](https://vitejs.dev/) as main bundler
|
||||
* [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and code formatting
|
||||
* [UnoCSS](https://github.com/unocss/unocss) as utility-first CSS framework
|
||||
* [Iconify](https://github.com/iconify/iconify) as universal icons
|
||||
* React Context as minimalist store system
|
||||
* [React Query](https://tanstack.com/query) for nice API communication and powerful caching system
|
||||
|
||||
Compared to Vue implementation, it seems less magical and more explicit, as it likes for `Symfony` VS `Laravel`. Don't require heavy Typescript IDE tooling like Volar, because it's just pure TS function components.
|
||||
|
@ -1,18 +1,10 @@
|
||||
[`Vue 3 TS`](https://vuejs.org/) implementation written with Composition API. Instead of using outdated [Bootstrap v4 alpha 2 theme](https://github.com/gothinkster/conduit-bootstrap-template), I rewrite it on [UnoCSS](https://github.com/unocss/unocss), an awesome efficient Tailwind-like utility-first CSS framework, with Dark Mode support.
|
||||
[`Vue 3 TS`](https://vuejs.org/) implementation written with Composition API. Main packages involved :
|
||||
|
||||
For API communication, as we have full proper OpenAPI spec, it's a real benefit to have a generated Typescript client for full autocompletion feature. I generally hate generated boilerplate code and the well known [OpenAPI Generator](https://github.com/OpenAPITools/openapi-generator) is not very nice to use.
|
||||
|
||||
Thankfully this [openapi-typescript](https://github.com/drwpow/openapi-typescript) package was the perfect solution. It simply translates the OpenAPI spec to a simple Typescript file, with only types. No code generation involved ! In order to work, we need to use a specific **fetch** tool which will use all advanced features of Typescript 4 in order to guess type all the API with only a single TS file in runtime !
|
||||
|
||||
Main packages involved :
|
||||
|
||||
* [Vite](https://vitejs.dev/) as main bundler
|
||||
* [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc) as main TS checker and compiler for Vue components, with full VS Code support with [Volar](https://github.com/johnsoncodehk/volar) plugin
|
||||
* [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and code formatting
|
||||
* [UnoCSS](https://github.com/unocss/unocss) as utility-first CSS framework
|
||||
* [Iconify](https://github.com/iconify/iconify) as universal icons
|
||||
* [Pinia](https://pinia.vuejs.org/) as main store system
|
||||
* [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc) as main TS checker and compiler for Vue components, with full VS Code support with [Volar](https://github.com/johnsoncodehk/volar) plugin
|
||||
* [VueUse](https://vueuse.org/) for many composition function helpers
|
||||
* [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) and [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) for vue 3 reactivity functions and components auto import, while preserving TS support
|
||||
|
||||
Additional packages that reduce boilerplate and improve DX :
|
||||
|
||||
* [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) and [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) for reactivity functions and components auto import, while preserving TS support
|
||||
* [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) and [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) for file-based route system with layout support, preventing us maintenance of separated route file, which made the DX similar to [Nuxt](https://nuxtjs.org/)
|
||||
* [openapi-typescript](https://github.com/drwpow/openapi-typescript) as advanced minimal client-side OpenAPI generator which use advanced Typescript features for autodiscovering all API types without any boilerplate code thanks to [separated fetcher](https://github.com/ajaishankar/openapi-typescript-fetch)
|
||||
|
@ -1,8 +1,8 @@
|
||||
- name: realworld
|
||||
title: Conduit Apps Collection
|
||||
description: true
|
||||
projects:
|
||||
- title: Frontend
|
||||
description: frontend
|
||||
apps:
|
||||
- name: vue-ts
|
||||
title: Vue 3 TS Realworld
|
||||
@ -18,6 +18,7 @@
|
||||
color: blue
|
||||
|
||||
- title: Backend
|
||||
description: backend
|
||||
apps:
|
||||
- name: aspnet-core
|
||||
title: ASP.NET Core Realworld
|
||||
|
@ -12,11 +12,9 @@
|
||||
{{ .title }}
|
||||
</h2>
|
||||
|
||||
{{ if .description }}
|
||||
<div class="prose dark:prose-invert mb-8">
|
||||
{{ readFile "data/works/realworld.md" | markdownify }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div>
|
||||
{{ range .projects }}
|
||||
@ -24,8 +22,13 @@
|
||||
<h3 class="pb-1 font-bold border-b-2 border-purple-500 inline-block mb-4">
|
||||
{{ .title }}
|
||||
</h3>
|
||||
{{ if .description }}
|
||||
<div class="prose dark:prose-invert mb-8">
|
||||
{{ readFile (print "data/works/" .description ".md") | markdownify }}
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
||||
{{ end }}
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-8">
|
||||
{{ range .apps }}
|
||||
{{ $borders := dict "green" "border-green-500" "blue" "border-blue-500" "orange" "border-orange-500" "black" "border-black dark:border-white"
|
||||
"red" "border-red-500" "teal" "border-teal-500" "primary" "border-purple-500" }}
|
||||
|
Reference in New Issue
Block a user