A mock Twitter page implemented without, partially with, and then with a design system.

Overview

Design Systems Workshop

A mock Twitter page implemented without, partially with, and then with a design system.

Setup

Install npm dependencies, then start the local dev server:

npm i
npm run dev

You should now be able to access a URL like http://localhost:5173 in your browser. Visit http://localhost:5173/native/0-start to view the page.

Workshop

We'll be walking through three steps in the workshop:

  1. Tokens
  2. Components
  3. Documentation

Inline documentation contains solutions to step exercises in <details> tags. I recommend viewing the docs files on GitHub so you can try to come to the solutions on your own. 🧠

Takeaways

This workshop will teach you:

  • Atomic Design and its three most common uses: tokens, atoms, and molecules 🎨
  • How to break down a design into its atomic tokens, atoms, and molecules 🛠
  • Strategies for incrementally implementing a design system in-place 🚀
  • A plethora of VS Code shortcuts 🧑‍💻
You might also like...

Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code

RoughDraft.js v0.1.5 Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code. section

Dec 21, 2022

A social-media mock app for the ones who love to read - and maybe show it off

🐋 🐳 Cachalote 🐳 🐋 Share what you are reading and find people who also likes it - or not! What does it do? This app focuses on three main questions

May 22, 2022

The Remix Stack for deploying to Vercel with testing, linting, formatting, structure and mock for 3rd party API integration.

The Remix Stack for deploying to Vercel with testing, linting, formatting, structure and mock for 3rd party API integration.

Remix DnB Stack See it live: https://dnb-stack.vercel.app/ Learn more about Remix Stacks. npx create-remix --template robipop22/dnb-stack What's in th

Dec 13, 2022

mock APIs, intelligently, with context, and perform other stuff as well

@sasta-sa/project mock APIs, intelligently, with context, and perform other stuff as well 😄 Setting up Clone the project git clone https://github.com

Jan 27, 2022

Base-mock-api - Repo to storage my fake api's to use in my 2022 projects.

Base Mock API's Project made 100% with JavaScript, with the objective of creating endpoints to use in projects. Prerequisites Before you begin, ensure

Nov 20, 2022

Linely is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

Linely Linely is inspired by LocalStack. Goal of this tool is to create a mock service for LINE. Setup Docker docker run -d -p 3000:3000 dyoshikawa/li

Jan 24, 2022

NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

NiseLine NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE. Getting Started Launch NiseLine server. docker ru

Jan 24, 2022

NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

NiseLine NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE. Getting Started Launch NiseLine server by Docker

Jul 29, 2022

LIFF Mock is a LIFF Plugin that make testing your LIFF app easy.

LIFF Mock LIFF Mock is a LIFF Plugin that make testing your LIFF app easy. ※ LIFF Plugin feature is available since LIFF SDK v2.19.0. Usage NPM $ npm

Dec 2, 2022
Comments
  • Configure Renovate

    Configure Renovate

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • package.json (npm)
    • .nvmrc (nvm)

    Configuration Summary

    Based on the default config's presets, Renovate will:

    • Start dependency updates only once this onboarding PR is merged
    • Enable Renovate Dependency Dashboard creation.
    • If Renovate detects semantic commits, it will use semantic commit type fix for dependencies and chore for all others.
    • Ignore node_modules, bower_components, vendor and various test/tests directories.
    • Autodetect whether to pin dependencies or maintain ranges.
    • Rate limit PR creation to a maximum of two per hour.
    • Limit to maximum 10 open PRs at any time.
    • Group known monorepo packages together.
    • Use curated list of recommended non-monorepo package groupings.
    • A collection of workarounds for known problems with packages.

    🔡 Would you like to change the way Renovate is upgrading your dependencies? Simply edit the renovate.json in this branch with your custom config and the list of Pull Requests in the "What to Expect" section below will be updated the next time Renovate runs.


    What to Expect

    With your current configuration, Renovate will create 9 Pull Requests:

    Update dependency decode-uri-component to 0.2.1 [SECURITY]
    • Branch name: renovate/npm-decode-uri-component-vulnerability
    • Merge into: main
    • Upgrade decode-uri-component to 0.2.1
    Update dependency glob-parent to 5.1.2 [SECURITY]
    • Branch name: renovate/npm-glob-parent-vulnerability
    • Merge into: main
    • Upgrade glob-parent to 5.1.2
    Update dependency loader-utils [SECURITY]
    • Branch name: renovate/npm-loader-utils-vulnerability
    • Merge into: main
    • Upgrade loader-utils to 1.4.2
    • Upgrade loader-utils to 2.0.4
    Update dependency trim to 0.0.3 [SECURITY]
    • Branch name: renovate/npm-trim-vulnerability
    • Merge into: main
    • Upgrade trim to 0.0.3
    Update dependency trim-newlines to 3.0.1 [SECURITY]
    • Branch name: renovate/npm-trim-newlines-vulnerability
    • Merge into: main
    • Upgrade trim-newlines to 3.0.1
    Update Node.js to v18
    • Schedule: ["at any time"]
    • Branch name: renovate/node-18.x
    • Merge into: main
    • Upgrade node to 18
    Update dependency @​vitejs/plugin-react to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/vitejs-plugin-react-3.x
    • Merge into: main
    • Upgrade @vitejs/plugin-react to ^3.0.0
    Update dependency babel-loader to v9
    • Schedule: ["at any time"]
    • Branch name: renovate/babel-loader-9.x
    • Merge into: main
    • Upgrade babel-loader to ^9.0.0
    Update dependency vite to v4
    • Schedule: ["at any time"]
    • Branch name: renovate/vite-4.x
    • Merge into: main
    • Upgrade vite to ^4.0.0

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or overwhelm the project. See docs for prhourlylimit for details.


    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 1
Owner
Josh Goldberg
Full time open open source 💖✨ prev @Codecademy @microsoft ✨ @typescript-eslint maintainer, occasional @typescript contributor, side of accessibility
Josh Goldberg
Kasada's p.js partially deobfuscated, still has VM logic

Kasada's p.js Deobfuscated The script was obfuscated by replacing most strings with a function to grab the string from an array and decode it. Ex: _0x

null 11 Nov 9, 2022
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 4 Jan 2, 2023
Material Design implemented in Web Components (Custom Elements v1)

Material Web Components Material Design implemented in Web Components (Custom Elements v1) https://dannymoerkerke.github.io/material-webcomponents/ Ge

Danny Moerkerke 110 Nov 14, 2022
Awesome books app is a basic website that allows users to add/remove books from a list. It is a single page app (SPA) which allow switching to different pages of the app without page load. Built with JavaScript.

Awesome Books ES6 In this project, I build a basic website that allows users to add/remove books from a list. using ES6 syntax and make it more organi

Abdulhamid 11 Jul 1, 2022
Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

twitter-text This repository is a collection of libraries and conformance tests to standardize parsing of Tweet text. It synchronizes development, tes

Twitter 2.9k Jan 8, 2023
A Twitter filtered search to only get the live broadcasts hosted on Twitter itself, Built using Vanilla JS and Node.js

Twitter Broadcasts Search A Twitter filtered search to only get the live broadcasts hosted on Twitter itself, Built using Vanilla JS and Node.js. Live

Mohammad Mousad 2 Oct 6, 2022
Fuck Twitter NFTs - Userscript to delete or block all occurances of NFT Users on Twitter

FuckTwitterNFTs Fuck Twitter NFTs - Userscript to delete or block all occurances of NFT Users on Twitter Userscript will by default, attempt to delete

Blumlaut 1 Jan 20, 2022
Twitter bot to find what song is playing in a given uploaded twitter video.

what-song-is-this Twitter bot to find what song is playing in a given uploaded twitter video. How to setup. yarn install How to run. via npm script ya

Akinwande Akinboluwarin 17 Dec 11, 2022
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022