+
![Main illustration]()
+
@@ -9,8 +15,34 @@
diff --git a/src/modules/flow/store/useProductionFlow.store.ts b/src/modules/flow/store/useProductionFlow.store.ts
index 0a9c0d1..62a7e69 100644
--- a/src/modules/flow/store/useProductionFlow.store.ts
+++ b/src/modules/flow/store/useProductionFlow.store.ts
@@ -1,33 +1,37 @@
-import { pinia } from "@/store/store";
-import { defineStore } from "pinia";
+import { pinia } from "@/store/store"
+import { defineStore } from "pinia"
interface Step {
- name: string;
- prerequisites: string[];
- outputs: string[];
+ name: string
+ intention: string
+ responsible: string
+ prerequisites: string[]
+ outputs: string[]
}
interface State {
- steps: Step[];
+ steps: Step[]
}
const initialState: State = {
steps: [
{
name: "In production",
+ intention: "Deliver feature to the user",
+ responsible: "Product owner",
prerequisites: [],
outputs: ["Users can use the app"],
},
],
-};
+}
const useStore = defineStore("production-flow", {
state: () => ({ ...initialState }),
actions: {
addStep(step: Step) {
- this.$state.steps = [step, ...this.$state.steps];
+ this.$state.steps = [step, ...this.$state.steps]
},
},
-});
+})
-export const useProductionFlow = () => useStore(pinia);
+export const useProductionFlow = () => useStore(pinia)
diff --git a/src/modules/post/entities/Post.ts b/src/modules/post/entities/Post.ts
new file mode 100644
index 0000000..29369a9
--- /dev/null
+++ b/src/modules/post/entities/Post.ts
@@ -0,0 +1,18 @@
+export interface Post {
+ filename: string
+ lastUpdated: Date
+ href: string
+ title: string
+ date: Date
+ illustration: string
+ meta: {
+ filename: string
+ lastUpdated: Date
+ href: string
+ }
+ frontmatter: {
+ title: string
+ publishedAt?: Date
+ }
+ draft?: boolean
+}
diff --git a/src/pages/posts/crc-cards-as-training-material.mdx b/src/pages/posts/crc-cards-as-training-material.mdx
new file mode 100644
index 0000000..aab9a11
--- /dev/null
+++ b/src/pages/posts/crc-cards-as-training-material.mdx
@@ -0,0 +1,214 @@
+---
+title: CRC Cards as training material
+layout: post
+date: 2022-12-03
+draft: true
+---
+
+# CRC Cards as training material
+
+CRC Card: **C**lass name, **R**esponsibilities, **C**ollaborators.
+
+[CRC Cards](https://en.wikipedia.org/wiki/Class-responsibility-collaboration_card) are a teaching tool on how to design software. They were proposed by Kent Beck and Ward Cunningham, and, hell yeah it's useful.
+
+When I'm talking with tech leaders, my goal is to sharpen our vision about the software we are working on. When developers implemente features, I often see responsability leaks: the feature works, but the component are hard to read, hard to reuse and we pile up technical debt too quickly.
+
+CRC cards are a great tool to focus the discussion and to aknowledge the fact that the developer shared her global vision to each individual local component who must rely only on its local scope. Let's take an example of one discussion.
+
+## The horrible `UserBookmarks` component 😨
+
+Disclaimer: we're about to look at a very ugly code that is definetely doing too many things. The purpose of the discussion I have is to show to the tech lead that we really want to prevent this to happen and it is her mission to standardize it with her team.
+
+Let's say we have a `UserBookmarks` component. Its role is to display a list of bookmarks the user saved.
+
+```tsx
+interface Props {
+ user: User
+}
+
+export const UserBookmarks: FunctionComponent
= ({ user }) => {
+ const [bookmarks, setBookmarks] = useState([])
+ const [showAddBookmarkModal, setShowAddBookmarkModal] = useState(false)
+ const [isLoading, setIsLoading] = useState(false)
+
+ useEffect(() => {
+ setIsLoading(true)
+
+ try {
+ const userBookmark = await fetch(`/users/${user.id}/bookmarks`, {
+ method: 'GET'
+ })
+ setBookmarks(userBookmarks)
+ } catch (error) {
+ setBookmarks([])
+ } finally {
+ setIsLoading(false)
+ }
+ }, [])
+
+ const addBookmarkToUser = async ({ bookmark }) => {
+ setIsLoading(true)
+ try {
+ const newBookmark = await fetch(`/users/${user.id}/bookmarks`, {
+ method: 'POST',
+ body: JSON.stringify({ bookmark })
+ })
+ setBookmarks([...bookmarks, newBookmark])
+ } catch (error) {
+ console.warn(error);
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ return
+
+ {toolList}
+
+
setShowAddBookmarkModal(true))}
+ alt={'strings['frontoffice.bookmark.add_bookmarks']'}
+ image={}
+ />
+
+ setShowAddBookmarkModal(false)}
+ tools={availableCustomTools}
+ onBookmarkAdd={addBookmarkToUser}
+ />
+
+ {indispensableTools.map(tool => (
+
+ ))}
+
+ {userTools.map(tool => (
+ removeToolFromUser(tool)}
+ />
+ ))}
+
+
,
+ );
+ } else {
+ setToolList();
+ }
+ }, [uiLoading]);
+
+ return (
+
+
+ {toolList}
+
+
}
+ positionOfImage="right"
+ disabled={true}
+ />
+
+
setShowAddToolModal(false)}
+ tools={availableCustomTools}
+ onToolAdd={addToolToUser}
+ userIsUpdating={userIsUpdating}
+ />
+