DEV Community

Ben Halpern
Ben Halpern Subscriber

Posted on

Who's looking for open source contributors? (June 18 edition)

Please shamelessly promote your project. Everyone who posted in previous weeks is welcome back this week, as always. πŸ˜„

Top comments (12)

Collapse
 
lsm profile image
Marc Liu

Effortless React State Management - github.com/lsm/alfa

Guide

Add Alfa to Your React Project

Use npm to add it to your package.json.

npm install --save alfa

Alternatively, use yarn if you prefer:

yarn add alfa

Getting Data for Components

Alfa converts your regular React component into a dependency injected component by injecting application data from a key/value store. Let Alfa handle the data if you use it in different components:

// hello.js
import React from 'react'
import { inject } from 'alfa'

// A stateless functional component.
function HelloMessage(props) {
  // Data is injected as the property of props.
  return <div>Hello ${props.name}!</div>
}

export default inject(HelloMessage, ['name'])

inject makes a new component which gets data name from the store and renders HelloMessage internally.

Now let's see how to use the above component in our app:

// index.js
import React from 'react'
import { render } from 'react-dom'
import { inject } from 'alfa'
import HelloMessage from './hello.js'

// Define the root app which renders HelloMessage as a child.
const App = () => (
  <div>
    <HelloMessage />
  </div>
)

// Create the root component using `inject(Component, data)` with initial data.
const Root = inject(App, {
  name: 'Motoko'
})

render(<Root />, document.getElementById('root'))

We don't need to pass the name to HelloMessage component as Alfa gets that value for us from the store. That allows us to quickly move the component around without worrying about how to get the data.

Changing Data

The simplest way to modify the data of the Alfa store is to inject the set function to the component.

// change.js
import React, { Component } from 'react'
import { inject } from 'alfa'

// A stateful class component.
class ChangeName extends Component {
  handleChange = event => {
    // Calling `set('mykey', 'my value')` will change the data `mykey`
    // in store to value `my value`.
    this.props.set('name', event.target.value)
  }

  handleSubmit = event => {
    event.preventDefault()
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            value={this.props.name}
            onChange={this.handleChange}
          />
        </label>
      </form>
    )
  }
}

export default inject(ChangeName, ['set', 'name'], ['name'])

As mentioned earlier Alfa makes things explicit. So we need to define the output of the component explicitly if we want to change a value of a key in the global data store (the 3rd argument when calling function inject). Otherwise, Alfa complains we are trying to use set without defining the correct output.

Now add the ChangeName component to App:

const App = () => (
  <div>
    <HelloMessage />
    <ChangeName />
  </div>
)

If you run the app and modify the value in the input field, the name on the page do not change? Why?

Because components made by inject does not trigger re-render when we change the injected state in the store. We need to replace it with another function called subscribe.

Subscribing Data

We need to call subscribe instead of inject if we want to trigger the re-render of the component when changing the data. Simply swap inject with subscribe, and you can see the name is changing when you are typing in the input field:

// hello.js
import { subscribe } from 'alfa'

//...

// Use function `subscribe` instead of `inject`.
export default subscribe(HelloMessage, ['name'])
// change.js
import { subscribe } from 'alfa'

//...

// Use function `subscribe` instead of `inject`.
export default subscribe(ChangeName, ['set', 'name'], ['name'])

The subscribe has exactly same API as inject. The reason why Alfa provides two functions with slightly different behavior is to let the application developers clear about the type of data they are dealing with - static or dynamic. It not only makes the app more performant but also makes it easier to understand.

You can find the finished version of the above example in the folder examples/hello.

Collapse
 
chenshuiluke profile image
Luke Chen Shui

Wow I don't think I've seen anything as useful as this in a long while!

Collapse
 
lsm profile image
Marc Liu

Thank you for the compliment. Let me know if you have any issues when you try it out.

Collapse
 
ganeshtata profile image
Tata Ganesh • Edited

Posted last week as well. :-D
pdfminer.six

Description
Pdfminer.six is a python library used for extracting information from PDF documents. It is a fork of pdfminer. This fork was created because the original repository is not being maintained anymore. Pdfminer.six is 100 commits ahead of the original pdfminer, thanks to a number of contributors. Parsing PDFs is extremely difficult, and pdfminer provides some APIs that can help in extracting text and non-text information from PDFs. I am one of the maintainers / admins of the project, but unfortunately, I am not able to give this project the time it deserves. A lot of PRs are still pouring in, and there are several open issues as well. I am trying to address them, but it would be great if more people start to contribute to the project.
Some Tasks

  • Reviewing existing PRs / resolving open issues.
  • There is tons of Documentation work. Somebody can work on making the README better. Maybe beautify it / show capabilities of the library. Documentation is long pending for this project.
  • This is a pure python implementation, but there have been suggestions to use cython for increased speed. Maybe, at a later point of time, the library itself can be written in c++, with a simple python interface ( Something like opencv-python. Not sure about this though ).
  • I am pretty sure that there are people who are far more experienced in working with open source projects than me. I would love it if people can pitch in their ideas on the future of this project. I don’t have any specific roadmap in mind, so I am open to any suggestion.

Please note that this is in no way an exhaustive list of the tasks. I have just written tasks that I can immediately think of.

Tech Stack - Primarily python

This project is alive primarily because people have actively contributed to it, and haven't let it die. It started with goulu creating the repo, and others contributing from time to time. Hopefully, we can keep maintaining it to make it easier for people to work with PDFs! I will keep adding more open tasks as and when I come up with some. Thank you for your time !
Thank you dev.to for this wonderful platform!
ALSO, I have created a Gitter chatroom for having discussions regarding the project. There isn't much content there yet, but I am looking forward to some discussions in the near future!

Collapse
 
gokulkanand profile image
gokulkanand

The project looks interesting. I'll look at the readme to see what needs to be done.

Collapse
 
egimba profile image
Eric Gitonga

Newish to the world of dev, but most definitely interested. Going to peruse the repo to see how and where I can fit in...

Collapse
 
ganeshtata profile image
Tata Ganesh

Awesome Eric! Please peruse through the repo, and contribute if you find it interesting! Thank you!

Collapse
 
ptkdev profile image
Patryk RzucidΕ‚o • Edited

Logo

Welcome

Today, I want to present you InstagramBot.js, javascript-nodejs bot made with puppeteer

What does it do

This bot helps you increase the engagement of your Instagram profile through different social algorithms. Increase the likes on your photos and followers.

Features

  • [βœ“] Easy to use
  • [βœ“] Login
  • [βœ“] 2FA (bad location)
  • [βœ“] 2FA (sms pin enabled)
  • [βœ“] Multi-Session
  • [βœ“] Multi-Platform (Windows 10, Mac OSX, Linux, Raspberry PI 3)
  • [βœ“] Errors manager (bad pin, bad password)
  • [βœ“] Screenshot and Verbose logger
  • [βœ“] Like Mode Classic: bot select random hashtag from config list and like 1 random photo and repeat this all time.
  • [βœ“] Like Mode Realistic: bot select random hashtag from config list and like fast 10-12 photos, sleep 15-20min and repeat this all time. Sleep at night.
  • [βœ“] Like Mode Competitor Users: select account, select random followers, like 10-12 photo and sleep 15-20min. Sleep at night.
  • [βœ“] Like Mode Superlike: select random hashtag from config list and like 3 random photo of same user.
  • [βœ“] Comment Mode Classic: select random comment and random hashtag and write comment under photo.
  • [TODO] Follow/Defollow Classic: follow user from random hashtag and defollow after 1h.
  • [TODO] Defollow All: defollow all your following (ignore users in whitelist).

Fast setup

  1. Download stable bot version and extract it.
  2. Download Node.js >= 7.6 and install it.
  3. Run npm install in instagram-bot.js folder.
  4. Rename config.js.tpl to config.js, fill it properly.
  5. Start the bot via node bot.js
  6. If work add star at this project
  7. If you want help me: donate on paypal or become a backer on patreon.

Read more: dev.to/ptkdev/instagrambotjs-4ma2

Collapse
 
tmcsquared profile image
TMcSquared

QubΒ³d Engine Group is a brand new voxel-based engine and game project, aiming to make a mature and extensible Minecraft-like game, backed by a vibrant and friendly community.

Anyone with interest in or experience with the following technologies are encouraged to join the project. They're just starting up, so there's plenty of room to find your niche.

Current Needs:

Are you interested in helping with any of the following? We're working on building small teams for each sector.

  • Cross-platform C++ compilation w/ Clang and C++. (We especially need help with wrangling our dependencies.)
  • Basic application/library structure work (C++)
  • 3D block rendering (C++/OpenGL)
  • Map generation (C++)
  • Entity system (C++)
  • Voxel storage (C++)
  • UI design (C++/CEGUI)
  • Mod/Server Marketplace prototype (Python/Django)
  • User authentication servers
  • Implementing Agile/Scrum

Team Dynamic:

We are a growing, distributed team of volunteers at varying experience levels, helping and learning from one another. The teams are led by a group of dedicated volunteer leaders, who work together to build a healthy, open, collaborative environment.

Currently, we meet once a week for a DevTalk on Discord, to discuss current project goals and to solve design and logistical problems. We also have a weekly webcast workshop, which covers a wide variety of project management and programming topics.


Tech Stack:

  • C++ (especially C++17)
  • Clang compiler (GCC secondary)
  • OpenGL
  • CEGUI
  • SDL2
  • Lua
  • Sphinx (documentation)
  • CMake
  • Python/Django (marketplace)
  • Grav (static website)
  • Git (VCS)
  • Phabricator (development platform)

Jump In!

The easiest way to get started is to join the Discord room. Link is on the website: qub3d.org

Collapse
 
4lch4 profile image
Devin W. Leaman

Since I found out this repository was looking for contributors via one of these previous posts, I'll post it for the repo creator/owner (Jeremy Griffski) and hope someone else finds it as interesting as I did and will help out 😊

Anyway, the repository is a collection of sample programs in as many programming languages as possible, as Jeremy explained.

So far, I've added the PowerShell scripts and an article accompanying the Hello-World script.

If you're able and willing to help tackle any of the issues on our big ol' board, we'd be more than happy to have you!

Collapse
 
nuster profile image
Nuster Cache Server

nuster is a high performance caching proxy server based on HAProxy.
It is 100% compatible with HAProxy, and takes full advantage of the ACL
functionality of HAProxy to provide fine-grained caching policy based on
the content of request, response or server status. Its features include:

  • All features of HAProxy are inherited, 100% compatible with HAProxy
  • Powerful dynamic cache ability: based on HTTP method, URI, path, query, header, cookies, HTTP request or response contents, environment variables, server state, SSL version, SNI, connection rate, number, byte, etc
  • Extremely fast
  • Cache purging
  • Cache stats
  • Cache management
  • HTTPS supports on both frontend and backend
  • HTTP compression
  • HTTP/2
  • HTTP rewriting and redirection

I welcome any contributors for ideas, bugs reports, PRs:

  • Disk persistence
  • Sync between nodes
  • Other GitHub issues
  • etc
Collapse
 
richienb profile image
Richie Bendall

ROS Code, the new programming language: richienb.github.io/ROS-Code