• Code

    Behaviour-Driven Development

    BDD también se conoce como Especificación por ejemplo. El Desarrollo Impulsado por el Comportamiento (BDD) es una síntesis y refinamiento de prácticas derivadas del Desarrollo Impulsado por Pruebas (TDD) y el Desarrollo Impulsado por Pruebas de Aceptación (ATDD). BDD aumenta TDD y ATDD con las siguientes tácticas: Aplicar el principio de los “cinco por qué” a cada historia de usuario propuesta, de modo que su propósito esté claramente relacionado con los resultados comerciales. Cinco por qué, es una técnica interrogativa iterativa utilizada para explorar las relaciones de causa y efecto que subyacen a un problema en particular. El objetivo principal de la técnica es determinar la causa raíz de un…

    Comentarios desactivados en Behaviour-Driven Development
  • Code

    Setting up your JS Dev Env

    Install brew Use brew as your default Mac package manager, that allows you to manage your software by running commands in your terminal. Get brew help Unleash your terminal https://ohmyz.sh Feel free to edit your local ~/.zshrc file to select plugins, themes, and options. Must-have Dev tools https://developer.chrome.com/docs/devtools code ~/.zshrc In order to use nvm and thefuck you must have to add the following to your local ~/.zshrc file: A initial set of basic aliases Install the latest LTS release of Node https://github.com/nvm-sh/nvm#long-term-support https://github.com/nvm-sh/nvm#intro Specific Env info code docs https://code.visualstudio.com/docs/languages/typescript (code + prettier) preferences -> settings (ssh key + ssh-agent) config Generating a new ssh key and adding it to…

    Comentarios desactivados en Setting up your JS Dev Env
  • Code

    Painless Apps with Vue

    Using Vue in Visual Studio Code https://code.visualstudio.com/docs/nodejs/vuejs-tutorial Volar Fast Vue Language Support Extension for VSCdode. TypeScript Vue Plugin (Volar) TypeScript Vue Plugin (Volar). Vetur Supports Vue.js IntelliSense, code snippets, formatting, and more. Vue 3 snippets This extension adds Vue Snippets into Visual Studio Code. Vue VSCode snnipets eslint-plugin-vue VueJS has its own ESLint Plugin to check the syntax of single file components. Using Vue with TypeScript https://vuejs.org/guide/typescript/overview.html#using-vue-with-typescript Vue is written in TypeScript itself and provides first-class TypeScript support. All official Vue packages come with bundled type declarations that should work out-of-the-box. Use create-vue https://github.com/vuejs/create-vue The recommended tooling to start and develop an awesome modern Vue project consist of: Install latest…

    Comentarios desactivados en Painless Apps with Vue
  • Code

    How to learn Vue

    Vue is an awesome JavaScript framework for building user interfaces. https://vuejs.org/guide/introduction.html Here’s what using the Vue Framework in code looks like: We can see two core features of Vue: Declarative Rendering: Extending standard HTML with a declarative template syntax. Reactivity: Tracking state changes and efficiently updating the DOM when changes happen. Vue single-file components (SFC) https://vuejs.org/guide/essentials/component-basics.html SFC is a defining feature of Vue, and is the recommended way to author Vue components. They encapsulates the component’s code in a single file: Logic (JavaScript) Template (HTML) Styles (CSS) API Styles You can author author Vue components in two different API styles: Options API. Composition API. Options API (class-based mental mode) You…

    Comentarios desactivados en How to learn Vue
  • Code

    TS Cheatsheet

    https://react-typescript-cheatsheet.netlify.app https://www.typescriptlang.org/id/docs/handbook/react.html Types by Inference Type annotations Interfaces Use interface if exporting so that consumers can extend. Intersect types Explicit object shape using types and interfaces As a function type Objects Dictionaires Utility types Partial (Optional) We can see: That two fields are required: name and year. The description field is optional. When would you use a Partial? Helpful when you are required to use only certain fields. When we have a row of a table that represents in its columns the different fields of a record that can be updated, it can be any of the fields, so you don’t mind assuming that all fields may be ultimately optional…

    Comentarios desactivados en TS Cheatsheet
  • Code,  Console

    Essential GIT Commands

    To follow the pathlook to the masterfollow the masterwalk with the mastersee through the masterbecome the master Imágenes Referencias https://github.com/git-guides https://cli.github.com/manual https://lab.github.com

    Comentarios desactivados en Essential GIT Commands
  • Code

    Watch the bar turn green with TDD

    When there are bugs, there is probably nothing more pleasing than figure out a way to: Write a failing unit test that reproduces that bug. Fix it and watch the bar turn green again, forever and ever 😉 If your goal is to stay green for all of your existing tests by using the Test Driven Development (TDD) approach, you need to mentally train yourself to: Think about the behavior around the next pieces of functionalities that you need in your code, then start moving towards your end goal in tiny steps and you will end up seeing tangible progress every moment. Write unit test first, they shouldn’t be written…

    Comentarios desactivados en Watch the bar turn green with TDD
  • Code

    Use SWR with React Suspense

    This article will explore how you should use the awesome useSWR hook for remote data fetching. Why the SWR hooks for remote data fetching? Because SWR (stale-while-revalidate) is a fully dedicated React Hooks library for remote data fetching. So basically, this is what SWR does: First returns the data from cache (stale) Then sends the fetch request (revalidate). Finally comes with the up-to-date data again. Why Suspense? Because Suspense will definitely help you to maintain a consistent UI in the face of asynchronous dependencies. Something I prefer to call on-demand loaded React components. All you need is to: Set the suspense: true as one of the useSWR hook options. Wrap…

    Comentarios desactivados en Use SWR with React Suspense
  • Code

    Manage non connected components state

    It is pretty simple, the React Context API helps to simplify the way you pass or share data across components. Let’s start with using createContext() to offer a custom Provider component, including its Consumer component for interacting with your custom global state later: Great thing about the Provider is that it is really useful to make the state available to all your child components: The Consumer component goal is simple, it just consume the data that comes from the Provider, without any need for prop drilling your components. Just combine the Context API with the useReducer Hook to start enjoying the features of a custom and very simple global state…

    Comentarios desactivados en Manage non connected components state
  • Code

    Control your load prioritization in React

    Let’s start talking about the idea behind bundle splitting in React , it is pretty simple as handling multiple bundles that can be dynamically loaded on demand at runtime. Basically, you should start: Importing all your dynamic imports as regular components with React.lazy Rendering all your lazy components inside a Suspense component. The outcome is pretty awesome too. You will end up with smaller bundles thanks to this control resource load prioritization approach, which generally give you a major impact on your React App load time. Complete code src/routes/Routes.js src/components/States/States.js

    Comentarios desactivados en Control your load prioritization in React
  • Code

    Workshop: Node JS

    Sólo porque siempre hay más de una manera de hacer las cosas, este repo incluye otras maneras interesantes de resolver el mismo problema, dicho esto… Sus comentarios, sugerencias y mejoras son bienvenidas. Por favor consulte: Solutions to learnyounode workshops

    Comentarios desactivados en Workshop: Node JS