Blog

  • rimble-ui

    rimble-ui

    Rimble Design System’s react component library.

    NPM JavaScript Style Guide Travis Build Status Join the community on Spectrum

    Rimble is a project from ConsenSys Design, aiming to provide adaptable components and design standards for decentralized applications (dApps). Our goal is simply to make it easier to build dApps with outstanding user experience. If you’re interested, we have written a bit more about our rationale and approach to building Rimble.

    Rimble is in initial development and should not be considered stable today. We have made the project public in a very early stage of work in order to gather feedback from the community of designers and developers building dApps.

    We are actively working on adding new components to Rimble and will be sharing more information on the roadmap very soon.

    Install

    npm install --save rimble-ui styled-components

    Usage

    import React, { Component } from 'react'
    
    import { Button } from 'rimble-ui'
    
    class Example extends Component {
      render() {
        return <Button size={'medium'}>Click me!</Button>
      }
    }

    Change log

    0.14.0

    πŸš€ New Feature

    • Export ES6 modules for tree shaking 🌳

    0.13.1

    πŸ› Bug Fix

    • Added default props for Heading component.

    0.13.0

    πŸš€ New Feature

    • Added crypto icons under the Icon component.

    πŸ› Bug Fix

    • Fixed Heading component as prop not working.
    • Fixed Text component as prop not working.
    • Fixed Select component arrow icon placement.

    0.12.0

    πŸš€ New Feature

    • Updated all components to styled-system v5.

    0.11.1

    πŸ› Bug Fix

    • Fixed icon background color on ToastMessage component. #381
    • fixed display prop not rendering correctly for Icon component. #380
    • fixed disabled styling for Slider component. #414

    0.11.0

    πŸš€ New Feature

    • Added BaseStyles component

    πŸ› Bug Fix

    • Updated Text component to pass as prop correctly.
    • Updated Heading component to pass as prop correctly.
    • Updated Select component to adjust width.
    • Updated Field to inherit color.
    • Updated Radio and Checkbox components to inherit text and icon colors correctly.
    • Fixed pre-commit deprecation warning #372.
    • Fixed warnings when building library #376.

    πŸ’… Enhancement

    • Adjusted EthAddress component padding.
    • Addeded default font sizes for h1-h6 elements.
    • Styled input[type="color"] for better visibility.
    • Updated default props for Input, Textarea, Card.
    • Removed copyColor from theme.js.
    • Added text and background colors to theme.js.

    0.10.0

    • Fixed Select arrow display bug.
    • Added missing props to QR component.
    • Added title and aria-label attributes to EthAddress inputs (accessibility).
    • Changed default module from cjs to umd.
    • Upgraded to storybook app and updated stories.
    • Reorganized component testing app (CRA).

    0.9.8

    • updated vulnerable dependencies.
    • fixed onChange event not firing for file inputs.
    • added new EthAddress component.

    0.9.7

    • fixed onChange events not firing for file inputs.

    0.9.6

    • Fixed default theme in rimble ThemeProvider.

    0.9.5

    • Fixed Select component accepts more options + children.
    • Fixed outdated dependencies vulnerability.
    • Fixed PublicAddress width property being passed to it’s parent Field component.

    0.9.4

    • Added ref forwarding for all components.
    • Fixed input validation icon padding.
    • Fixed Tooltip positioning.
    • Fixed broken copy button on PublicAddress component.

    0.9.3

    • revert to last stable version

    0.9.2

    • Fixed Slider bar in FireFox
    • Added PropType definitions for all components

    0.9.1

    • Fixed Tooltip breaking server side rendering

    0.9.0

    • Refactored Box component to add overflow prop
    • Refactored Heading component to remove default margins
    • Refactored Text component to remove default margins
    • Bug fix for anchor elements inside Flash component
    • Removed selected props from Pill component

    0.8.0

    • Refactored Button with Text and Outline as compounds of Button
    • Refactored MetaMaskButton and UPortButton to use Button as base
    • Added more colors to theme for success, warning, danger, info
    • Bug fix for ref property on Input component
    • Bug fix for ref property on Button component

    0.7.1

    • Removed background color on Image component

    0.7.0

    • Flash component
    • Custom labels for PublicAddress component
    • Bug fixes

    0.6.0

    • Tables
    • Bug fixes

    0.5.0

    • Better form validation
    • uPort connect button
    • Upgraded to Storybook 5
    • Bug fixes

    0.4.0

    • Toast Messages and Toast Message provider
    • QR code
    • Modal
    • Pills
    • Expanded test coverage

    0.3.0

    • Styling cleanup for lots of components
    • Bug fixes

    0.2.0

    • PublicAddress component
    • MetaMask buttons and more button variants
    • Basic layout components
    • Cards
    • Loaders

    0.1.0

    • Theming
    • Buttons and other simple components
    • Blockies

    License

    MIT Β© ConsenSys

    Visit original content creator repository https://github.com/ConsenSysMesh/rimble-ui
  • storage

    GitHub license Build Status Coveralls

    IOTA Pico Framework Storage

    The library contains classes for storing data on the tangle.

    You will also need to install a PAL to use it.

    Installation

    npm install @iota-pico/storage --save

    Platform Abstraction Layers (PALs)

    Documentation

    Documentation for the code can be found in docs folder.

    Library

    The IOTA Pico Framework is a multi-layered set of object oriented JavaScript libraries for use with the IOTA tangle.

    If you don’t want to use the layered versions of the libraries consider using the ready bundled versions:

    Each layer is fully abstracted allowing you to replace components with your own implementations very easily.

    The layered libraries are written in TypeScript so are all strongly typed. The modules are generated as ES6 so you may need to transpile them when including them for use in older JavaScript eco-systems. The code will run without transpilation in all modern browsers and when used by NodeJs.

    Tutorials

    Some tutorials can be found in the following repo @iota-pico/tutorials

    Contributing

    Contributions are always welcome to the project. Feel free to raise issues, create pull requests or just make suggestions.

    Authors

    Come and find us on the IOTA Discord development channels

    License

    This project is licensed under the MIT License – see the LICENSE file for details.

    Visit original content creator repository https://github.com/iota-pico/storage
  • nsv

    NSV

    NSV (Next Semantic Version) is a convention-based semantic versioning tool that leans on the power of conventional commits to make versioning your software a breeze!

    See it in action

    nsv.mp4

    Why another versioning tool

    There are many semantic versioning tools already out there! But they typically require some configuration or custom scripting in your CI system to make them work. No one likes managing config; it is error-prone, and the slightest tweak ultimately triggers a cascade of change across your projects.

    Step in NSV. Designed to make intelligent semantic versioning decisions about your project without needing a config file. Entirely convention-based, you can adapt your workflow from within your commit message.

    The power is at your fingertips.

    Features

    • First-class support for semantic versioning. Conventional commits help give it a nudge in the right direction.
    • Configure your Conventional Commit prefixes for complete control.
    • If you batch your commits per release or prefer a continuous delivery approach, it has you covered.
    • Context-aware, it automatically switches to a monorepo workflow.
    • Extend the power of your commits through commands to dynamically change your semantic release workflow.
    • Patch files with the next semantic version for that complete release workflow.
    • Get up and running in seconds within GitHub and GitLab with the available action or template.
    • First class Dagger support.

    Documentation

    Check out the latest documentation

    Badges

    Build status License MIT Go Version DeepSource

    Visit original content creator repository https://github.com/purpleclay/nsv
  • Object-Detection-with-Voice-Feedback-YOLO-v3-and-gTTS

    Object-Detection-with-Voice-Feedback-YOLO-v3-and-gTTS


    Object Detection is a field of Computer Vision that detects instances of semantic objects in images/videos (by creating bounding boxes around them in our case). We can then convert the annotated text into voice responses and give the basic positions of the objects in the person/camera’s view.


    A very high-level overview



    1. Training Data: The model is trained with the Common Objects In Context (COCO) dataset. You can explore the images that they labeled in the link, it’s pretty cool.

    2. Model: The model here is the You Only Look Once (YOLO) algorithm that runs through a variation of an extremely complex Convolutional Neural Network architecture called the Darknet. We are using a more enhanced and complex YOLO v3 model. Also, the python cv2 package has a method to setup Darknet from our configurations in the yolov3.cfg file. COCO has already been trained on YOLO v3 by others, so I will be using a pre-trained model and we have already obtained the weights stored in a 200+mb file.

    3. Input Data: We will be using static images and feed them to this trained model.

    4. API: The class prediction of the objects detected in every image will be a string e.g. β€œcat”. We will also obtain the coordinates of the objects in the image and append the position β€œtop”/β€œmid”/β€œbottom” & β€œleft”/β€œcenter”/β€œright” to the class prediction β€œcat”. We can then send the text description to the Google Text-to-Speech API using the gTTS package.

    5. Output: We will be getting voice feedbacks in the form e.g. β€œbottom left cat” β€” meaning a cat was detected on the bottom-left of my camera view using Google Text-to-Speech API using gTTS package by giving text description of the object.

    Voice Feedback

    We can use bx & by relative to W & H to determine the position of the objects detected and send it as a text string to gTTS.

    Note:

    You need to download the yolo pretrained weights to get started with the code.

    Visit original content creator repository https://github.com/HimanchalChandra/Object-Detection-with-Voice-Feedback-YOLO-v3-and-gTTS
  • NC-COVID-SMS-Messaging

    nc-covid-response

    This project is related to the NC Covid Support project: https://github.com/code-for-chapel-hill/NC-COVID-Support

    This project is intended to automatically text message our business partners prompting them for updates to their business hours/offers/etc that should be reflected on https://nccovidsupport.org.

    Setup

    You will need to generate a client_secret.json file and put it in the same directory as ask_for_updates.py in order to read from the Google sheet.

    In order to do this:

    1. Head to the Google Developers Console: https://console.developers.google.com/
    2. Under β€œAPIs & Services > Library”, search for β€œDrive API” and enable it.
    3. Under β€œAPIs & Services > Library”, search for β€œSheets API” and enable it.
    4. Go to β€œAPIs & Services > Credentials” and choose β€œCreate credentials > Service account”.

    You should be able to generate a json file that looks something like this:
    {
    “private_key_id”: “2cd … ba4”,
    “private_key”: “—–BEGIN PRIVATE KEY—–\nNrDyLw … jINQh/9\n—–END PRIVATE KEY—–\n”,
    “client_email”: “473000000000-yoursisdifferent@developer.gserviceaccount.com“,
    “client_id”: “473 … hd.apps.googleusercontent.com”,
    “type”: “service_account”

    }

    Put that in the same directory as ask_for_updates.py.

    Now run pip install -r requirements.txt in the base directory.

    You will need to set the following environmental variables

    1. SPREADSHEET_KEY - They key of the google spreadsheet, which can be found in the URL
    2. TWILIO_NUMBER - the Twilio phone number we are using for texting
    3. FLOW_URL - the URL of the Twilio studio flow
    4. TWILIO_ACCOUNT_SID - get from twilio account
    5. TWILIO_AUTH_TOKEN - get from twilio account
    

    Deploy

    This project is deployed as an AWS Lambda function. To deploy, zip the nc_covid_response directory (the directory with ask_for_updates.py) and use the AWS CLI to update the function code.

    1. zip -r function.zip nc_covid_response/*
    2. aws lambda update-function-code –function-name nc-covid-send-sms –zip-file fileb://function.zip

    For more detailed instructions on setting up the AWS CLI and lambda-related CLI commands, see https://docs.aws.amazon.com/lambda/latest/dg/gettingstarted-awscli.html

    Update modules

    The lambda function runs on top of an AWS layer containing all the necessary third-party Python modules. If you need to update or add a module, add that module to the modules directory with pip, then zip that to modules.zip, then use the AWS CLI to update the layer. Assuming you are in the base directory,

    1. pip install package_name -t modules
    2. zip -r modules.zip modules/*
    3. aws lambda publish-layer-version –layer-name sms-packages –description “Packages for NC covid response SMS automated messaging” –zip-file fileb://modules.zip –compatible-runtimes python3.6 python3.7

    You will then need to head into the AWS Lambda consol and click on ‘Layers’ in the ‘Designer’ box. Change the version of the layer to the latest version.

    Creating a new resource

    The data is split into different types of resources (farms, restaurants, etc.) The messages sent to different types of resources can be customized by creating a new resource class. See the abstract base class and docstring in resources.py for details.

    Scheduling

    Task scheduling is handled by AWS EventBridge.

    Visit original content creator repository
    https://github.com/code-for-chapel-hill/NC-COVID-SMS-Messaging

  • config.phundrak.com

    P’undrak’s dotfiles

    About the Project

    This repository holds my Linux dotfiles and other configuration files. The files I’m using are written in org-mode and exported in Markdown through Emacs.

    These Markdown files are then compiled by Vuepress into a beautiful website available at config.phundrak.com.

    Note that a few configs here are no longer up to date. I am in the process of switching over to NixOS. You can find my current NixOS configuration in this repository. It will eventually circle back to being a litterary configuration. Not every piece of software will be configured by Nix exclusively though, Emacs for instance will stay relatively free of Nix configurations aside from its basic installation.

    Running the project

    In order to run the project, you need to export all .org files in the Markdown format. To do that easily, you can use an org project setup in Emacs, mine looks like this:

    (require 'ox-gfm)
    (defvar phundrak--projects-config-common-root
      "~/org/config/docs/"
      "Points to the common root of my source and target for my
    config.phundrak.com org project.")
    (setq org-publish-project-alist
            `(("config-phundrak-com-md"
               :base-directory ,phundrak--projects-config-common-root
               :base-extension "org"
               :exclude ,(rx (* print
                                (or "CONTRIB"
                                       "README"
                                       "site-map"
                                       "temp"
                                       "private"
                                       "svg-ink")
                                (* print)))
               :publishing-directory ,phundrak--projects-config-common-root
               :recursive t
               :language "en"
               :publishing-function org-gfm-publish-to-gfm
               :headline-levels 5
               :auto-sitemap nil
               :auto-preamble nil)
              ("config-phundrak-com"
               :components ("config-phundrak-com-md"))))

    Once you have all the Markdown files generated correctly, you can install the dependencies of the project.

    yarn
    # or
    npm install # delete the yarn.lock file first

    Once this is done, you can launch a preview of the project.

    yarn dev
    # or
    npm run dev

    You can also compile the project to a static website.

    yarn build
    # or
    npm run build

    With Nix shell

    A Nix shell is available for running the project without the Emacs part. Simply run nix-shell in the project root. You’ll get the latest version of yarn installed and should be able to run the commands above.

    Visit original content creator repository https://github.com/Phundrak/config.phundrak.com
  • ffi-bitfield

    ffi-bitfield

    Gem Version test

    Bit field for Ruby-FFI

    Installation

    gem install ffi-bitfield

    Usage

    Classes

    • class BitStruct < FFI::Struct
    • class ManagedBitStruct < FFI::ManagedStruct

    Loading

    require 'ffi/bit_struct'
    require 'ffi/managed_bit_struct'

    Define your struct

    class Struct1 < FFI::BitStruct
      layout \
        :a, :uint8,
        :b, :uint8
    
      bit_fields :a,
        :u, 2,
        :v, 2,
        :w, 1,
        :x, 1,
        :y, 1,
        :z, 1
    end

    Reading

    s = Struct1.new
    
    s[:a] = 63
    p s[:u] # 3
    p s[:v] # 3
    p s[:w] # 1
    p s[:x] # 1
    p s[:y] # 0
    p s[:z] # 0

    Writing

    s = Struct1.new
    
    s[:u] = 0
    s[:v] = 0
    s[:w] = 0
    s[:x] = 0
    s[:y] = 1
    p s[:a] # 64

    Inspecting Bit Fields

    You can use the bit_field_members method to get a hash of bit fields grouped by parent field:

    class Flags < FFI::BitStruct
      layout \
        :value, :uint8
    
      bit_fields :value,
        :read,    1,
        :write,   1,
        :execute, 1,
        :unused,  5
    end
    
    p Flags.bit_field_members
    # => {:value=>[:read, :write, :execute, :unused]}

    For more detailed information, you can use the bit_field_layout method:

    p Flags.bit_field_layout
    # => {
    #      :value => {
    #        :read    => { :start => 0, :width => 1 },
    #        :write   => { :start => 1, :width => 1 },
    #        :execute => { :start => 2, :width => 1 },
    #        :unused  => { :start => 3, :width => 5 }
    #      }
    #    }

    These methods are useful for custom pretty printing or introspection of your bit struct classes.

    Loading

    require 'ffi/bit_field'

    The above is the same as below.

    require 'ffi/bit_struct'
    require 'ffi/managed_bit_struct'

    Development

    git clone https://github.com/kojix2/ffi-bitfield
    cd ffi-bitfield
    bundle install
    bundle exec rake test
    

    Contributing

    Your feedback is important.

    ffi-bitfield is a library under development, so even small improvements like typofix are welcome! Please feel free to send us your pull requests. Bug reports and pull requests are welcome on GitHub at https://github.com/kojix2/ffi-bitfield.

    Do you need commit rights to my repository?
    Do you want to get admin rights and take over the project?
    If so, please feel free to contact me @kojix2.
    

    License

    The gem is available as open source under the terms of the MIT License.

    Visit original content creator repository https://github.com/kojix2/ffi-bitfield
  • enword

    EnWord – English Word Memorization App

    EnWord is a simple yet effective English word memorization application designed to help users improve their vocabulary daily. The app provides 10 random English words each day, along with their Turkish translations. To reinforce learning, the app also offers example sentences for each word, helping users understand the usage and context of the words.

    Features

    • Daily Vocabulary: Get 10 random English words every day with their Turkish translations.
    • Example Sentences: Each word is accompanied by example sentences in English to help reinforce learning.
    • Simple Interface: A clean and user-friendly interface developed with Next.js.
    • Backend Integration: Node.js backend with MongoDB for storing and managing data.

    Tech Stack

    Frontend

    • Next.js: React framework for building the frontend interface.
    • Tailwind CSS: Utility-first CSS framework for styling the application.

    Backend

    • Node.js: JavaScript runtime for building the backend logic.
    • MongoDB: NoSQL database for storing words, translations, and example sentences.

    Installation

    To run this project locally, follow these steps:

    1. Clone the repository:

      git clone https://github.com/muhammed-gumus/memory-word.git
      cd memory-word
      
    2. Install dependencies for both frontend and backend:

      npm install
      
    3. Set up your environment variables:
      Create a .env file in the root directory and add the following:

      MONGODB_URI=your_mongodb_connection_string
      NEXT_PUBLIC_API_URL=your_api_url
      
    4. Run the backend server:

       npm run start:backend
      
    5. Run the frontend development server:

       npm run dev
      

    Usage

    • Daily Words: Log in daily to view your 10 random words.
    • Example Sentences: Review the example sentences provided for each word.
    • Track Progress: Consistently use the app to build and reinforce your English vocabulary over time.

    Contributing

    Contributions, issues, and feature requests are welcome! Feel free to check the issues page for any open issues.

    Contact

    For any inquiries, feel free to reach out:

    Visit original content creator repository
    https://github.com/muhammed-gumus/enword

  • Cypress-Framework

    Cypress Gardens

    Overview

    This project is a Cypress based automated testing framework designed for testing the musical instrument website Reverb.com 🎸. It includes a number of pre-written tests and page objects, as well as configuration files and other utilities to make writing and executing tests easier.

    Installation

    To install this project, follow these steps:

    Clone the repository to your local machine.
    Navigate to the project directory in your terminal or command prompt.
    Run npm install to install the necessary dependencies.
    Run npm run cy:open to open the Cypress Test Runner.
    

    Usage

    To run the tests, use the Cypress Test Runner:

    Navigate to the project directory in your terminal or command prompt.
    Run npm run cy:open to open the Cypress Test Runner.
    Click on the test file or individual tests you want to run.
    

    Alternatively, you can run the tests headlessly by running npm run cy:run in your terminal or command prompt.

    File Structure

    The project file structure is as follows:

    β”œβ”€β”€ src
    β”‚   β”œβ”€β”€ data
    β”‚   β”œβ”€β”€ features
    β”‚   β”œβ”€β”€ plugins
    β”‚   β”œβ”€β”€ screenshots
    β”‚   β”œβ”€β”€ support
    β”‚   └── videos
    β”œβ”€β”€ node_modules
    β”œβ”€β”€ node_modules
    β”œβ”€β”€ node_modules
    
    β”œβ”€β”€ cypress.json
    β”œβ”€β”€ LICENSE
    β”œβ”€β”€ package-lock.json
    β”œβ”€β”€ package.json
    β”œβ”€β”€ README.md 
    

    🌳 cypress: This directory contains all of the Cypress-related code, including test files, fixtures, plugins, support files, and videos of test runs.

    πŸ’Ώnode_modules: This directory contains all of the project’s dependencies.

    πŸ“· screenshots: This directory will contain screenshots captured during test runs.

    πŸ”Œcypress.json: This file contains configuration options for the Cypress Test Runner.

    πŸ”Œpackage.json: This file contains information about the project and its dependencies.

    πŸ–¨οΈREADME.md: This file contains information about the project, its purpose, and how to use it.

    Contributing

    If you’d like to contribute to this project, please fork the repository and submit a pull request with your changes.
    This project was created by Mark S.
    MIT License

    Visit original content creator repository
    https://github.com/markjsapp/Cypress-Framework

  • Cypress-Framework

    Cypress Gardens

    Overview

    This project is a Cypress based automated testing framework designed for testing the musical instrument website Reverb.com 🎸. It includes a number of pre-written tests and page objects, as well as configuration files and other utilities to make writing and executing tests easier.

    Installation

    To install this project, follow these steps:

    Clone the repository to your local machine.
    Navigate to the project directory in your terminal or command prompt.
    Run npm install to install the necessary dependencies.
    Run npm run cy:open to open the Cypress Test Runner.
    

    Usage

    To run the tests, use the Cypress Test Runner:

    Navigate to the project directory in your terminal or command prompt.
    Run npm run cy:open to open the Cypress Test Runner.
    Click on the test file or individual tests you want to run.
    

    Alternatively, you can run the tests headlessly by running npm run cy:run in your terminal or command prompt.

    File Structure

    The project file structure is as follows:

    β”œβ”€β”€ src
    β”‚   β”œβ”€β”€ data
    β”‚   β”œβ”€β”€ features
    β”‚   β”œβ”€β”€ plugins
    β”‚   β”œβ”€β”€ screenshots
    β”‚   β”œβ”€β”€ support
    β”‚   └── videos
    β”œβ”€β”€ node_modules
    β”œβ”€β”€ node_modules
    β”œβ”€β”€ node_modules
    
    β”œβ”€β”€ cypress.json
    β”œβ”€β”€ LICENSE
    β”œβ”€β”€ package-lock.json
    β”œβ”€β”€ package.json
    β”œβ”€β”€ README.md 
    

    🌳 cypress: This directory contains all of the Cypress-related code, including test files, fixtures, plugins, support files, and videos of test runs.

    πŸ’Ώnode_modules: This directory contains all of the project’s dependencies.

    πŸ“· screenshots: This directory will contain screenshots captured during test runs.

    πŸ”Œcypress.json: This file contains configuration options for the Cypress Test Runner.

    πŸ”Œpackage.json: This file contains information about the project and its dependencies.

    πŸ–¨οΈREADME.md: This file contains information about the project, its purpose, and how to use it.

    Contributing

    If you’d like to contribute to this project, please fork the repository and submit a pull request with your changes.
    This project was created by Mark S.
    MIT License

    Visit original content creator repository
    https://github.com/markjsapp/Cypress-Framework