toy-crane

# Frontend Design Guideline

This document summarizes key frontend design principles and rules, showcasing
recommended patterns. Follow these guidelines when writing frontend code.

# Readability

Improving the clarity and ease of understanding code.

dannberg

---
created: <% tp.file.creation_date() %>
---
tags:: [[+Daily Notes]]

# <% moment(tp.file.title,'YYYY-MM-DD').format("dddd, MMMM DD, YYYY") %>

<< [[Timestamps/<% tp.date.now("YYYY", -1) %>/<% tp.date.now("MM-MMMM", -1) %>/<% tp.date.now("YYYY-MM-DD-dddd", -1) %>|Yesterday]] | [[Timestamps/<% tp.date.now("YYYY", 1) %>/<% tp.date.now("MM-MMMM", 1) %>/<% tp.date.now("YYYY-MM-DD-dddd", 1) %>|Tomorrow]] >>

---

szemate

How to resolve package-lock.json conflicts

It is not possible to resolve conflicts of package-lock.json in GitHub's merge tool and you need to do a manual merge.

1. Update the master branch with the latest changes:

   git checkout master
   git pull
   

2. Merge your feature branch into master:

JimYaaa

// Parent Component
<template>
  <div>
    <parent-recursive-component @recursiveEmit="recursiveEmit" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ParentRecursiveComponent from './RecursiveComponent'

wobsoriano

<script setup lang="ts">
import { ref } from 'vue';
import InfiniteScroll from '~/components/InfiniteScroll.vue';
import SkeletonPostItem from '~/components/SkeletonPostItem.vue';

interface State {
  loaded: () => void;
  complete: () => void;
}

karpolan

module.exports = {
  printWidth: 120, // max 120 chars in line, code is easy to read
  useTabs: false, // use spaces instead of tabs
  tabWidth: 2, // "visual width" of of the "tab"
  trailingComma: 'es5', // add trailing commas in objects, arrays, etc.
  semi: true, // add ; when needed
  singleQuote: true, // '' for stings instead of ""
  bracketSpacing: true, // import { some } ... instead of import {some} ...
  arrowParens: 'always', // braces even for single param in arrow functions (a) => { }
  jsxSingleQuote: false, // "" for react props, like in html

cathrinevaage

<!-- Usage -->

<template>
  <Tabs>
    <Tab name="Foo">Content of tab Foo</Tab>
    <Tab name="Bar">Content of tab Bar</Tab>
  </Tabs>
</template>

<script>

arthurvi

Boolean() or !! (double bang, double negation)?

What's the best way to answer the question "true or false?" in JavaScript

JavaScript does not bother you too much with types (at first), which is both a blessing and a cure. But we all know the Boolean type. Boolean variables can either be true or false. Yes or no.

Every value in JavaScript can be translated into a boolean, true or false. Values that translate to true are truthy, values that translate to false are falsy. Simple.

This is about two ways to make that translation.

raduchiriac

#!/bin/bash

# Get the current branch name
current_branch=`git rev-parse --abbrev-ref HEAD`

# Search Jira ID in a pattern such a "feature/ABCD-123-my-feature"
id=$(echo $current_branch | sed -nE 's,[a-z]+/([A-Z]+-[0-9]+)-.+,\1,p')

# only prepare commit message if pattern matched and jiraId was found
if [[ ! -z $id ]]; then

Jonarod

/**
 * @usage:
 *
 *   <RadioBox label="Foo" value="foo" v-model="MySelectedValue" />
 *   <RadioBox label="Bar" value="bar" v-model="MySelectedValue" />
 *   <RadioBox label="Baz" value="baz" v-model="MySelectedValue" />
 * 
 * data(){
 *    return {
 *      MySelectedValue: "",