Forem: Nahrin Jalal

Hacktoberfest 2021: Celebrate Open Source With CodeSee

Nahrin Jalal — Fri, 01 Oct 2021 20:21:27 +0000

For the past 8 years, the days leading up to October have seen a flurry of activity in the open source community—2021 was no different.

It’s all in anticipation of the official start of Hacktoberfest—a month-long global celebration of open-source software. The event encourages giving back to the open source community by participating in donating effort, time, and funds to code-based events and projects.

At CodeSee, we’re passionate about this mission and committed to launching OSS Port just in time for Hacktoberfest 2021!

On OSS Port

With OSS Port, we aim to connect projects to people and ease codebase onboarding for all. Maintainers are invited to provide contribution best practices, support guidance, and interactive visual walkthroughs of their codebase using CodeSee Maps. Using Maps, contributors can readily onboard to a new project, with features to understand how files are connected, see how a pull request fits into the larger architecture, and more.

About Hacktoberfest

Last Hacktoberfest saw more than 66,000 challenge completions, with a total of 387,052 pull requests opened across 116,361 repositories. And this year’s event is expected to deliver even stronger results!

All of us on Team CodeSee are eager to support maintainers and contributors alike, share our knowledge, and connect with members across the community to do what we can to help lower the barrier of entry to open source!

OSS Port x Hacktoberfest Challenges

It all starts with the basic Hacktoberfest qualifications. Registered Hacktoberfest participants who are contributors must submit four quality pull requests to public GitHub or GitLab repositories in the month of October. Maintainers are also eligible to earn a reward for showing that they've completed 4 or more actions on unique pull requests.

To boost your impact (and swag haul), we invite you to take part in our OSS Port x Hacktoberfest Challenges. Head over to our landing page for complete details on how you can partake in the fun as a Maintainer, Contributor, or both!

Once you've completed our challenge(s), let us know by filling out this form. After the month of October is over, CodeSee will process and verify all submissions, then let you know how you can claim your limited edition OSS Port swag.

OSS Port x Hacktoberfest Challenge Rewards

We’ve got you!

Hacktoberfest expects hundreds of thousands of participants in 2021. To fully immerse yourself in the festivities, be sure to stay tuned for all that we have planned at CodeSee. October will be packed with weekly streams on our Twitch channel, helpful tutorials on the blog, and even a series of weekly challenges in Port for some supremely wicked swag!

At CodeSee, we believe every level of developer can confidently contribute to open source and help the community. If you have any questions or require support, reach out to us on Twitter or the OSS Port Discord Server.

From all of us at CodeSee, happy hacking!

Announcing the CodeSee Emerging Developer Track

Nahrin Jalal — Thu, 08 Jul 2021 14:27:29 +0000

As a team largely comprised of self-taught developers and educators, we've noticed a plethora of technical tutorials for beginners at the start of their tech journey and for those well-established in their careers. However, we've also seen significant gaps in the information available for folks looking to get into their first jobs in tech and/or be successful in those first years of that role.

With CodeSee's Emerging Developer Track, we hope to bridge those gaps and empower folks with the resources needed to develop core skills, build confidence, and advance professionally.

What Are Emerging Developers?

We have classified folks preparing to end their studies and start looking for a job, up to folks through their early years in work in tech, as emerging developers. If you are in this "advanced beginner" stage, our resources were created with you in mind.

What Will You Learn?

You can look forward to weekly blog posts and live streams, video tutorials, infographics and visuals, challenges, and opportunities to expand your knowledge with insights from industry guests. Our content will span across platforms and allow you the opportunity to ask questions, seek support, and engage with our team. Each week, we will deep-dive into various key topics, such as:

How to Get Unstuck
Finding Your First Job in Tech
Top Mistakes New Developers Make and How to Avoid Them
Understanding Your First Real-World Codebase
Getting Started With OSS Projects
How To Get the Most Out of Pair Programming
Ways to Ace Your First Year as a Developer
Best Practices: Code Reviews
Introduction to Software Architecture
And much more!

We recognize any piece of content is best as a conversation. Whether you're new to tech, a student, or a long-time developer, we hope you'll share with us your experiences, lessons learned, and advice for others. Drop us an email at devrel[ at ]codesee.io or chat with us in real-time on our streams—we would be delighted to hear from you.

Meet the Team

Staff	Introduction
	Jessica Rose is a longtime tech educator passionate about access to technical education and meaningful work in tech.
	Ramón Huidobro is a web/macOS/mobile software dev and community organizer based in Vienna, Austria. He's spent a lot of his time mentoring, coaching and introducing folks on their development journey, as well as previously ran an after-school coding club to introduce children to programming..
	Nahrin Jalal is a developer, educator, and community organizer based in Toronto, Canada. She is passionate about building inclusive communities, addressing real-world needs with pragmatic software solutions, and creating technical content accessible to all skill levels.

Join Us!

To fully immerse yourself in the CodeSee Emerging Developer Track, be sure to:

Stay tuned on Twitter to be informed of new content and all that we have planned
Follow us on Twitch to catch our jam-packed weekly streams
Subscribe to our YouTube channel to never miss out on innovative video tutorials

We could not be more excited to support you in your tech journey. We hope to see you online! 👋

At CodeSee, we are committed to helping you understand codebases. In just 5 clicks, CodeSee will generate a self-updating visual map of your codebase's dependencies, providing you with a single source of truth for your entire system. For exclusive beta access, sign up to join the waitlist.

The Importance of Self-Advocacy for Career Advancement

Nahrin Jalal — Mon, 08 Mar 2021 15:15:55 +0000

This year marks five years (!) since I started my career in the tech industry. To commemorate the milestone, I want to share a practice that has played a monumental role in my career advancement over this time:

Consistent self-advocacy.

I often tell my students how imperative it is to share their accomplishments and elevate their visibility regularly. A lot goes into this, such as weekly accomplishment tracking, connecting your achievements to compensation, scheduling weekly meetings with your manager, collecting testimonials, and more. However, the most repeated blocker I hear is this:

People don't know how to tell their story effectively.

Stories have three parts: a problem, a solution, and a result. If you accomplished something at work recently, you likely had to go through all three of those phases. So now it's time to think about yourself as the protagonist of the story and share it with others.

Crafting Your Story

Firstly, reflect on a professional accomplishment that you're proud of—ideally one that took place recently. Then, answer these questions:

What challenge did you overcome?

Did you break into a new industry or find success with a difficult client? What is the headline of your story?

Highlight your contribution.

Briefly share how your solution addressed the issue. How were your strengths and passions essential?

What was the business impact?

How did you make money or save money for the company? Did you contribute to innovation, revenue, growth, or culture?

Remember to keep your story short! Your final result should be about 3-4 sentences (or bullet points) long. Your manager doesn't have time to read an essay, but she will appreciate and remember your impact if she can quickly understand how you solved a problem for the company.

Also, bear in mind that not every key accomplishment may fit into this storytelling structure. Please still share those other accomplishments with your manager—ensuring that you're still effectively highlighting how you impacted the business.

Ultimately, it all boils down to how you made a difference. Be proud of what you have achieved and share your accomplishments widely.

Seek Support When You Need It

Self-advocacy is difficult.

If you're struggling, remember that you are not the only one feeling this way, and it will get easier with practice.

Also, never think you need to go it alone. Reach out to a mentor. Vent to a trusted friend. Let this incredible community support you.

In Celebration of International Women's Day 2021

Nahrin Jalal — Mon, 08 Mar 2021 03:51:44 +0000

The official theme of International Women's Day 2021 is "Choose to Challenge." At Vonage, we believe that together, we can choose to challenge and call out gender bias and inequity. We can choose to seek out and celebrate women's achievements. Collectively, we can all help create a more inclusive world.

Each year, in honour of International Women's Day, the global Vonage community comes together to celebrate the incredible journeys, stories and voices of our colleagues and the amazing people around us. 2021 is no exception.

Stories and Journeys From Our Colleagues

In 2020, we began the tradition of collecting personal stories from the Vonage community for Dev.to's "Nevertheless, She Coded" initiative. Dev.to's annual celebration has blossomed into a beautiful collection of experiences, with each voice adding powerful perspective, wisdom, and advice. We're proud to help amplify the voices of the Vonage community and support members in participating in this incredible program.

Biochemist turned Solutions Engineer

Siobhan Lettice is a Solutions Engineer for Vonage. Siobhan shares how her experiences in tech drove her to create a Women at Vonage Employee Resource Group, focusing on removing barriers to entry and empowering women seeking to move into leadership roles.

Everyone deserves an equal voice and opportunity

A Plea, an Apology, and a Passing Reference to Batman

Mark Lewin is a Technical Writer for Vonage. Mark talks about the ways in which privilege has shaped his life, the importance of diversity in the industry, and implores those previously dissuaded from pursuing a career in tech to join now.

If you are a woman or non-binary person who has been put off joining us in the past, I plead you to reconsider now. You're not the heroes we deserve, but you are the heroes we need

Nevertheless, I changed my goals

Bethany Loft is a Community Manager for Vonage. Bethany reflects on the previous year and emphasizes the importance of normalizing goals changing to adapt and accommodate new interests.

My message for others is to take time to rest amongst challenging situations, protect your energy and if you have some to lend, spread it around your community to those who could benefit

How I improved my coding skills in 2020/21

Daniela Facchinetti is a Developer Education Coordinator for Vonage. Daniela shares the progress she has made to improve her coding skills and advice for others in the same pursuit.

You will never be done learning or improving, but carrying on gets easier with practice

We Need YOU! I'm Andrew Rice, and I encourage women devs in 2021!

Andrew Rice is a Head of Information Security (API) for Vonage. Andrew discusses the importance of creating an inclusive industry and shares advice on attracting top talent to Cyber Security.

We needed different thinking, we needed a broader pool of talent, we needed equality, we needed to encourage the brightest minds and guess what, they are not always men

Nevertheless, I Will Continue to #ChooseToChallenge Myself

Laura Czajkowski is a Developer Relations Manager for Vonage. Laura outlines how she is pushing past her comfort zone and choosing to challenge herself this year.

This year will no doubt be challenging. However, I know that I have allies, supportive colleagues, and I'm fortunate to know some amazing people that inspire me daily

Nevertheless, Lauren Focused on Community

Lauren Lee is a Developer Education Manager for Vonage. On the second anniversary of Lauren's #WeBelongHere podcast, she shares key lessons learned from those conversations and the community of career changers and those diversifying the tech industry.

As a bootcamp grad and career changer myself, I remember craving community and wanting to know that I was not alone in my journey to tech

I'm Aida Pourshirazi, and I support women devs in 2021!

Aida Pourshirazi is a Support Engineer for Vonage. Aida reflects on how her upbringing inspired her to follow an engineering path.

My message to others is that life is shorter than we think, so we should do what we like and enjoy the path to achieve our goals

The Importance of Self-Advocacy for Career Advancement

Nahrin Jalal is a Developer Educator for Vonage. Nahrin shares the practice that has made the most significant impact on her career advancement to date: self-advocacy.

It's time to think about yourself as the protagonist of this story and share it with others

My Journey in Tech

Clarisse Ng is an APAC Community Manager for Vonage. Clarisse reflects on how she ended up in tech by pure coincidence. She also discusses the importance of caring for yourself while working towards goals.

It was the constant struggle of getting stuff done, making sure I remain creative, relevant, and giving meaning to my work, while staying on top of everything else going on in my life, including my role as a daughter, sister, friend, etc.

I'm Luke, and I support women in tech.

Luke Oliff is a Developer Educator for Vonage. Luke shares the work and content of some of the folks who have inspired him.

Last year I wrote about things I advocated that we can all do to further equality in tech. This year, I'd rather give space to those in tech who have or do inspire me

Resilience is key to my success

Tatiana Xyda is an Enterprise Relationship Manager for Vonage. Tatiana reflects on her journey to tech, the struggles she has had to overcome along the way, and an important message for others.

I deserve credit for never giving up on what I wanted and the path I took to get there. I learned to receive a ‘No’ and learn from it

International Women's Day 2021 Panel

To kick off the celebrations for International Women's Day 2021, we held a panel discussion with some of our Vonage leaders on March 2, 2021. Featured speakers Amitha Pulijala, Danielle Vergara, Lauren Lee, Marina Serrano Montes, and Nahrin Jalal provided insight into their experiences, both as women and as advocates for women in technology. Through their stories, we learned how they navigated the tech industry and what their experience has taught them. Watch the recording on YouTube!

In Closing

We are proud to be elevating voices and shining a light on issues women and non-binary folks face in the software industry this International Women's Day. At Vonage, we will continue to choose to seek out and celebrate women's achievements in an effort to help create a more inclusive world.

Visual Studio Code Extensions To Enhance Productivity in 2021

Nahrin Jalal — Wed, 06 Jan 2021 16:27:33 +0000

Visual Studio Code is a simple yet highly extensible code editor. As developers, we spend a lot of time here—which is why it's so important to get the most out of our editors and streamline and automate where possible.

As we enter 2021, I've compiled a list of extensions that I personally use daily in the hopes that it will help you save time and enhance productivity this year. Do note that while the extensions highlighted below are suitable for all languages, there are language-specific plugins that are also worth exploring.

How To Install a VS Code Extension

Open your Visual Studio Code.
Click the marked button on the panel located left.
In the "Search Extensions" box, type in the name of the extension you would like to download.
Choose the correct search result and click "Install."

Selected VS Code Extensions

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 allows matching brackets to be identified with colors. The user can define which tokens to match and which colors to use.

Remote Containers

Remote Containers lets you use a Docker container as a full-featured development environment. Whether you deploy to containers or not, containers make a great development environment because you can:

Develop with a consistent, easily reproducible toolchain on the same operating system you deploy to.
Quickly swap between different, isolated development environments and safely make updates without worrying about impacting your local machine.
Make it easy for new team members/contributors to get up and running in a consistent development environment.
Try out new technologies or clone a copy of a codebase without impacting your local setup.

Import Cost

Import Cost will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin to detect the imported size.

Path Intellisense

Path Intellisense helps to autocomplete filenames. This extension supports developers to define file paths with accuracy.

Live Share

Live Share provides you with the ability to co-edit, co-debug, have an audio call, chat with your peers, share terminals, servers, look at comments, and more.

Peacock

Peacock subtly changes the color of your Visual Studio Code workspace. It's udeal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to identify your editor quickly.

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Quokka

Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code as you type.

Better Comments

Better Comments will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into:

Alerts
Queries
TODOs
Highlights
Commented out code can also be styled to make it clear the code shouldn't be there
Any other comment styles you'd like can be specified in the settings

Settings Sync

Settings Sync synchronizes settings, snippets, themes, file icons, launch, keybindings, workspaces, and extensions across multiple machines using GitHub Gist.

Remote - SSH

Remote - SSH lets you use any remote machine with an SSH server as your development environment. This can significantly simplify development and troubleshooting in a wide variety of situations. You can:

Develop on the same operating system you deploy to or use larger, faster or more specialized hardware than your local machine.
Quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.
Access an existing development environment from multiple machines or locations.
Debug an application running somewhere else, such as a customer site or in the cloud.

No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine. You can open any folder on the remote machine and work with it just as you would if the folder were on your machine.

Polacode

This last extension is a fun one—create a Polaroid for your code! If you were planning on taking a screenshot of your code to share on Twitter or a blog post, I highly recommend using this tool for a more aesthetically appealing result.

What Are Your Favorite Extensions?

That concludes my list of most-used extensions! I hope you came across one that will improve your developer productivity this year. What are your favorite VS Code extensions? Please share them in the comments or let me know on Twitter!

12 Bots To Better Your Open Source Project

Nahrin Jalal — Wed, 28 Oct 2020 14:35:06 +0000

The longer an open source project exists and grows, the more issues and unmerged pull requests it will accumulate. Keeping up with new contributions, especially if there are still unresolved problems from the past, is no easy task.

Enter, bots! Automating and outsourcing labour to bots eases maintainers’ burden, freeing up time for more impactful tasks.

This post will cover 12 ways to improve your open source project with Probot (GitHub Apps) and GitHub Actions—two separate projects with a shared goal of enabling and empowering developers to extend their workflows and customizing the way GitHub functions.

If you’d like to know more about how the projects differ, Jason Etcovitch’s excellent blog post on the topic could help. Here’s his comparison of the two:

Now, let’s begin highlighting automation tools that will ease your life as a project maintainer. Without further ado, here are bots to better your open source project!

Probot (GitHub Apps)

Request Info

Requests more information on issues and pull requests with the default title or an empty body.

Request-Info requests more information from newly opened Pull Requests and Issues that contain either default titles or whose description is left blank. It does so by taking data from a .github/config.yml.

No Response

Closes Issues where the author hasn’t responded to a request for more information.

Very often, issues get filed without enough information to be adequately investigated. When this happens, maintainers can label an issue as requiring more information from the original author. If the author doesn’t provide the necessary information within a timely manner, the issue is automatically closed by the bot. If the original author comes back and gives more information, the No Response bot removes the label, and the issue gets automatically reopened if necessary.

Mergeable

Prevent merging of Pull Requests based on configurations.

Make your Pull Requests “mergeable” only when specific terms are not in the title or label, the milestone on the pull request matches with what is configured, and there is at least n number of approved reviews, where n is configurable.

Auto Assign

Add reviewers/assignees to pull requests when pull requests are opened.

When the pull request is opened, this bot will automatically add reviewers/assignees to the pull request. If the number of reviewers/assignees is specified, it will randomly add reviewers/assignees to the pull request. If the pull request title contains a specific keyword, the bot does not add reviewers/assignees to the pull request.

Stale

Automatically close stale Issues and Pull Requests that tend to accumulate during a project.

After a period of inactivity, a label will be applied to mark an issue as stale, and optionally a comment will be posted to notify contributors that the Issue or Pull Request will be closed. If the Issue or Pull Request is updated, or anyone comments, then the stale label is removed, and nothing further is done until it becomes stale again. If no more activity occurs, the Issue or Pull Request will be automatically closed with an optional comment.

First Timers

Creates starter issues to help onboard new open source contributors.

The process of creating a pull request is the most significant barrier for new contributors. First Timers streamlines the process to create straightforward contributor-friendly issues to help onboard more people to become Open Source contributors for the first time.

GitHub Actions

Lint

Show and auto-fix linting errors for many programming languages.

Lint shows linting errors on GitHub commits and PRs, allows auto-fixing issues, and supports many linters and formatters.

Size Limit

Compares the real cost to run your JS application or library to keep good performance in every pull request.

This action uses Size Limit (performance budget tool for JavaScript) to calculate your JavaScript’s real cost for end-users. This action’s main features are to comment on pull requests with the comparison of Size Limit output and reject a pull request if the cost exceeds the limit.

LibreSelery

Continuous distribution of funding to your project contributors and dependencies.

LibreSelery is a tool to distribute funding in free and open source projects. With a new funding model, it offers transparent, automated and adaptable compensation of contributors. The aim is to replace the middleman in donation distribution as far as possible with a free and transparent algorithm. Unlike most other donation systems, LibreSelery only offers a decentralized tool and not a platform.

Lock Threads

Locks closed issues and pull requests after a period of inactivity.

The action uses GitHub’s updated search qualifier to determine inactivity. Any change to an issue or pull request is considered an update, including comments, changing labels, applying or removing milestones, or pushing commits. Lock Threads is a GitHub Action that locks closed issues and pull requests after a period of inactivity.

Pull Request Labeler

Automatically labels a pull request based on committed files.

When pushing, the action will be triggered and will look for committed files over the branch. It applies configured labels whenever it finds a file whose name matches the associated regular expression.

alex

Catches insensitive, inconsiderate writing.

Alex helps you find gender favouring, polarizing, race-related, religion inconsiderate, or any other unequal phrasing in text.

Next Steps

There are many more automation tools out there that may improve your workflow as a maintainer. I encourage you to explore more options or try your hand at building your own!

Probot apps can be written, deployed, and shared. Many of the most popular Probot apps are hosted, so there’s nothing for you to deploy and manage. You can also create your actions or customize actions shared by the GitHub community with the help of tutorials.

What are your favourite open source automation tools? Have you built one yourself? Let us know in the comments section below, on Twitter, or the Vonage Developer Community Slack!

Additional Resources

Vonage is thrilled to be a Hacktoberfest 2020 partner. We’re no strangers to open source, with our libraries, code snippets, and demos all on GitHub. To fully immerse yourself in the festivities, be sure to check out our Hacktoberfest page for details on all that we have planned.

You may also find more of our open source related blog posts below:

The post 12 Bots To Better Your Open Source Project appeared first on Vonage Developer Blog.

33 High Impact Open Source Projects Seeking Contributors

Nahrin Jalal — Fri, 16 Oct 2020 13:36:54 +0000

There is no shortage of open source projects dedicated to social change and improving lives. However, projects with a social good application often do not get the support and attention they deserve. This is unfortunate as the collaborative nature of open source can spark innovation and accelerate social good.

Therefore, in the spirit of Hacktoberfest, we have put together thirty-three projects that show the potential for open source to make a real social impact. The projects have various open issues, many of which are labelled hacktoberfest and will count towards the four pull requests required of the challenge. Whether you’re new to development, a student, or a long-time contributor, you can make positive contributions and help drive open source growth in an ever-growing global community.

The projects below are organized according to technology. We encourage you to contribute to projects within your skillset and explore projects that inspire growth—all while changing the world, one pull request at a time.

Technology Directory:

Python
Ruby
JavaScript
R
PHP
C#, .NET
Java
C, C++
Jupyter Notebook

Python

Callisto

Callisto is a non-profit that creates technology to detect repeat perpetrators of sexual coercion and sexual assault. The Callisto online reporting system is used for intake, escrow, matching and secure delivery code.

NVDA

NVDA (NonVisual Desktop Access) allows blind and vision-impaired people to access and interact with the Windows operating system and many third-party applications.

Also has contributor opportunities for those with C, C++ knowledge.

CommCare

CommCareHQ is the server backend for CommCare, the world’s largest platform for designing, managing, and deploying robust, offline-first, mobile applications to frontline workers worldwide. By replacing paper-based forms, frontline workers can use CommCare to track and support their clients with registration forms, checklists, SMS reminders, and multimedia.

Also has contributor opportunities for those with JavaScript knowledge.

Trends.earth

Trends.Earth (formerly the Land Degradation Monitoring Toolbox) is a QGIS plugin that supports land change monitoring, including changes in productivity, land cover, and soil organic carbon. The tool can help to monitor land degradation for reporting to the Global Environment Facility (GEF) and the United Nations Convention to Combat Desertification (UNCCD), as well as tracking progress towards the achievement of Sustainable Development Goal (SDG) target 15.3, Land Degradation Neutrality (LDN).

InaSafe

InaSAFE is a QGIS plugin that produces realistic natural hazard impact scenarios for better planning, preparedness and response activities.

Ruby

Code.org

Code.org is a non-profit dedicated to expanding access to computer science in schools and increasing participation by young women and students from other underrepresented groups.

Also has contributor opportunities for those with JavaScript knowledge.

Consul

Consul is a complete citizen participation tool for an open, transparent and democratic government.

Stethoscope

This open source stethoscope is research-validated to operate as well as a Littmann Cardiology III (the market gold standard), but can be produced using 3D printed parts for a fraction of the price. The cost of the entire stethoscope is between $2.5 to $5 to make!

Primero

Primero is an application designed to help child protection workers and social workers in humanitarian and development contexts manage data on vulnerable children and survivors of violence.

Also has contributor opportunities for those with JavaScript knowledge.

REFUGE

REFUGE restrooms indexes and maps safe restroom locations for trans, intersex, and gender-nonconforming individuals. It provides a free resource to trans* and queer individuals in need of gender-neutral and other safe restrooms.

R

UNEP-GRID MapX

MapX is a spatial data infrastructure that aims to support the sustainable use of natural resources and the environment by increasing access to the best available geospatial information and related monitoring technologies.

Also has contributor opportunities for those with JavaScript knowledge.

PEcAn Project

The Predictive Ecosystem Analyzer (PEcAn) is an integrated ecological bioinformatics toolbox. This project is motivated by the fact that many of the most pressing questions about global change are not necessarily limited by the need to collect new data as much as by our ability to synthesize existing data. PEcAn seeks to improve this ability by developing a framework for sensibly integrating multiple data sources.

JavaScript

SignDict

SignDict is an open sign language dictionary in which you can contribute to its source code or to the dictionary itself by adding a sign that is missing. SignDict believes that communication is the key to an open society and has created a living dictionary to help increase the integration of deaf communities.

Also has contributor opportunities for those with HTML or Elixer knowledge.

Kolibri

Kolibri makes high quality education technology available in low-resource communities such as rural schools, refugee camps, orphanages, non-formal school systems, and prison systems.

Also has contributor opportunities for those with Python knowledge.

Terrastories

Terrastories is a geostorytelling application built to enable indigenous and other local communities to locate and map their own oral storytelling traditions about places of significant meaning or value to them. Powered by the Mapbox platform, Terrastories is designed to be entirely offline-compatible, so that remote communities can access the application entirely without needing internet connectivity.

Also has contributor opportunities for those with Ruby or Docker knowledge.

Global Forest Watch

Global Forest Watch (GFW) is a dynamic online forest monitoring and alert system that empowers people everywhere to better manage and protect forests. This repository contains the GFW web app.

Community Health Toolkit

Community Health Toolkit is the core repository for Medic Mobile’s community health application framework, which you can use to build responsive, offline-first community health apps. The framework is highly configurable, with support for interactive messaging, decision support, task management, health records, data collection, and analytics.

Mifos Community App

Mifos enables financial service providers to effectively and efficiently deliver responsible financial services to the world’s 2 billion poor and unbanked to speed the elimination of poverty. This repository contains the default web application built on top of the MifosX platform for the Mifos user community.

Sahana Eden

Sahana Eden is an Open Source Humanitarian Platform by Sahana Software Foundation which can be used to provide solutions for disaster management, development, and environmental management sectors.

Also has contributor opportunities for those with Python knowledge.

C#, .NET

OptiKey

OptiKey is an on-screen keyboard that is designed to help Motor Neuron Disease (MND) patients interact with Windows computers. OptiKey’s on-screen keyboard allows MND patients to complete tasks, such as email composition, using only their eyes when used with an eye-tracking device. OptiKey can also be used with a mouse or webcam. Optikey is free, reliable, and easy to use.

Shadowsocks Windows

Shadowsocks is a secure socks5 proxy designed to protect your Internet traffic.

C, C++

EnergyPlus

EnergyPlus is a whole building energy simulation program that engineers, architects, and researchers use to model both energy consumption—for heating, cooling, ventilation, lighting and plug and process loads—and water use in buildings.

OBS Studio

OBS Studio is free software designed for capturing, compositing, encoding, recording, and streaming video content, efficiently.

Low Cost OS Ventilator

A low-cost open source ventilator-ish device or Powered Air Purifying Respirator (PAPR).

PHP

Open Machine Learning

OpenML is an online machine learning platform for sharing and organizing data, machine learning algorithms and experiments. It is designed to create a frictionless, networked ecosystem, that you can readily integrate into your existing processes/code/environments, allowing people all over the world to collaborate and build directly on each other’s latest ideas, data and results, irrespective of the tools and infrastructure they happen to use.

Also has contributor opportunities for those with JavaScript knowledge.

LibreHealth EHR

The mission of LibreHealth is to help provide high-quality medical care to all people, regardless of race, socioeconomic status, or geographic location, by providing medical practices and clinics across the globe access to free of charge medical software. The LibreHealth EHR application is a clinically-focused electronic health record (EHR) system designed to be easy to use “out of the box” and customizable for use in various healthcare settings.

Also has contributor opportunities for those with JavaScript knowledge.

Moodle

Moodle is a learning platform designed to provide educators, administrators and learners with a single robust, secure and integrated system to create personalized learning environments.

Also has contributor opportunities for those with JavaScript knowledge.

Java

Openapi Generator

The OpenAPI Generator allows generation of API client libraries (SDK generation), server stubs, documentation and configuration automatically given an OpenAPI Spec.

WHO App

There is a global need for an official WHO App to help contain and mitigate COVID-19. The app should support the WHO efforts and be available worldwide, with information tailored to the user’s location, culture, and language.

Rainforest Connection Guardian

The Rainforest Connection (RFCx) is a non-profit tech startup building scalable, open-source solutions to illegal logging, poaching and environmental threats. Notably, it creates acoustic monitoring systems for those who wish to end illegal deforestation in real-time.

Also has contributor opportunities for those with C, C++ knowledge.

The Guardian Project – Haven

Haven turns any Android phone into a motion, sound, vibration and light detector, watching for unexpected guests and unwanted intruders. Haven was designed for investigative journalists, human rights defenders and people at risk of forced disappearance to create a new kind of herd immunity. By combining the array of sensors found in any smartphone, Haven prevents the worst kind of people from silencing citizens without getting caught in the act with the world’s most secure communications technologies.

Jupyter Notebook

Child Growth Monitor

By determining weight and height through a 3D scan of children, the Child Growth Monitor can instantly detect malnutrition of children under five years of age.

AutoFocus

This project uses deep learning computer vision to label images taken by motion-activated “camera traps” according to the animals they contain. Accurate models for this labelling task can address a significant bottleneck for wildlife conservation efforts.

Conclusion

That concludes our collection of thirty-three open source projects that you can immediately help and, in turn, impact lives. If you made it all the way through, we would love to hear which projects you’re most excited about! Alternatively, if you have or know of another project that you believe is trying to make a change in the world, let us know by commenting below, reaching out on Twitter, or by joining our Developer Community Slack Channel. We would love to highlight more projects in the future and support initiatives that benefit us all.

Lastly, if you are in the process of completing the Vonage Hacktoberfest challenge, you’ll have the option to receive a pair of Vonage socks or a $5 Open Collective gift card. An Open Collective is a group of people with a shared mission that operates in full transparency. Many of the projects mentioned in this post, and other projects you may already use, manage their funding with Open Collective. If feasible, we encourage you to continue supporting the projects you’re passionate about by donating.

The post 33 High Impact Open Source Projects Seeking Contributors appeared first on Vonage Developer Blog.

Vonage Joins Hacktoberfest 2020

Nahrin Jalal — Fri, 25 Sep 2020 09:53:28 +0000

October is just around the corner—and that means Hacktoberfest is nearly upon us! This year, Vonage is thrilled to be a Hacktoberfest 2020 partner. We’re no strangers to open source, with our libraries, code snippets, and demos all on GitHub. We couldn’t be more excited to support participants, share our knowledge, and chat about how important open source contributions can be!

Wait, What Is Hacktoberfest?

Hacktoberfest—brought to you by DigitalOcean in partnership with Dev & Intel—is a month-long celebration of open source software. Maintainers are invited to guide potential contributors towards issues that will help move the project forward, and contributors get the opportunity to give back to projects they like and others they’ve just discovered.

To take part, Hacktoberfest participants must submit four quality pull requests to public GitHub repositories between October 1-31.

Upon completing four pull requests, you will have the option to choose either a Hacktoberfest shirt or the option to donate a tree. If you have made a valid contribution to a Vonage repository, you can also receive either a pair of Bamboo Vonage Socks or a $5 Open Collective Gift Card! You’ll be able to claim your prize here.

FYI: Open source refers to publicly accessible source code. Anyone is free to inspect, modify, or learn from the code. Pull requests are proposed code changes you can submit to a branch in a repository on GitHub. Once submitted, a project maintainer will review the changes before they become final.

Do I Need To Know How To Code?

No! Hacktoberfest is open to everyone. Whether you’re new to development, a student, or a long-time contributor, you can make positive contributions and help drive open source growth in an ever-growing global community. All backgrounds and skill levels are encouraged to complete the challenge.

Ready To Dive In?

Firstly, make sure you’ve registered! Then, contribute to Vonage projects by finding issues tagged with hacktoberfest on our GitHub repositories:

Alternatively, you may find a comprehensive list of suggested issues on our Hacktoberfest page with difficulties ranging from updating documentation to adding brand new features.

We Want To Help You Win

Hacktoberfest expects hundreds of thousands of participants in 2020. To fully immerse yourself in the festivities, be sure to stay tuned for all that we have planned! October will be jam-packed with:

Virtual events in the Americas, Europe, Israel, and Asia
Daily Hacktoberfest streams on our Twitch channel
Exciting blog posts and innovative tutorials and loads more!

We believe every level of developer can contribute to open source and help the community. If you have any questions or require support, reach out to us on our Developer Community Slack channel, Hacktoberfest Discord Server, or Twitter.

From all of us at Vonage, happy hacking!

The post Vonage Joins Hacktoberfest 2020 appeared first on Vonage Developer Blog.

5 Ways To Make HTTP Requests In Node.js – 2020 Edition

Nahrin Jalal — Wed, 23 Sep 2020 13:24:24 +0000

Learning how to make HTTP requests can feel overwhelming as there are dozens of libraries available, with each solution claiming to be more efficient than the last. Some libraries offer cross-platform support, while others focus on bundle size or developer experience. In this post, we’ll explore five of the most popular ways to achieve this core functionality in Node.js.

The code demonstrations will use the Lord of the Rings themed API, one API to rule them all, for all interactions—simply because I accidentally binge-watched the entirety of this excellent series last weekend.

Prerequisites

Ensure you have npm and Node.js installed on your machine, and you’re good to go!

Prefer to jump ahead? This post will cover:

HTTP (The Standard Library)
SuperAgent
Axios
Node Fetch
Got

HTTP (The Standard Library)

The standard library comes equipped with the default http module. This module can be used to make an HTTP request without needing to add bulk with external packages. However, as the module is low-level, it isn’t the most developer-friendly. Additionally, you would need to use asynchronous streams for chunking data as the async/await feature for HTTP requests can’t be used with this library. The response data would then need to be parsed manually.

The following code demonstrates how to use the standard http library to make a GET request to retrieve names of books in the Lord of the Rings series:

const https = require('https');

https.get('https://the-one-api.dev/v2/book?api_key=MY_KEY', (resp) => {
  let data = '';

  // a data chunk has been received.
  resp.on('data', (chunk) => {
    data += chunk;
  });

  // complete response has been received.
  resp.on('end', () => {
    console.log(JSON.parse(data).name);
  });

}).on("error", (err) => {
  console.log("Error: " + err.message);
});

Super Agent

SuperAgent is a small HTTP request library that may be used to make AJAX requests in Node.js and browsers. The fact that SuperAgent has dozens of plugins available to accomplish things like prevent caching, convert server payloads, or prefix or suffix URLs, is pretty impressive. Alternatively, you could extend functionality by writing your own plugin. SuperAgent also conveniently parses JSON data for you.

The browser-ready, minified version of SuperAgent is only 6KB (minified and gzipped) and very popular amongst developers.

Enter the following command in your terminal to install SuperAgent from npm:

npm install superagent --save

The following code snippet showcases how to use SuperAgent to make a request:

const superagent = require('superagent');

(async () => {
  try {
    const queryArguments = {
      api_key: 'MY_KEY'
    }

    const response = await superagent.get('https://the-one-api.dev/v2/book').query(queryArguments)
    console.log(response.body.name);
  } catch (error) {
    console.log(error.response.body);
  }
})();

Axios

Axios is a promise based HTTP client for the browser and Node.js. Like SuperAgent, it conveniently parses JSON responses automatically. What sets it further apart is its capability to make concurrent requests with axios.all—which, for example, would be an efficient way to retrieve quotes from the Lord of the Rings movies and books at the same time.

Enter the following command in your terminal to install Axios from npm:

npm install axios --save

The following code snippet showcases how to use Axios to make a request:

const axios = require('axios');

(async () => {
  try {
    const response = await axios.get('https://the-one-api.dev/v2/book?api_key=MY_KEY')
    console.log(response.data.name);
  } catch (error) {
    console.log(error.response.body);
  }
})();

Node Fetch

Node Fetch is a light-weight module that brings the Fetch API to Node.js. With fetch (in the browser or via Node Fetch) you can mix the .then and await syntax to make converting the readable stream into JSON a bit nicer—so data, as demonstrated in the snippet below, has the JSON without needing an awkward middle variable. Additionally, note that useful extensions such as redirect limit, response size limit, explicit errors for troubleshooting are available to use with Node Fetch.

Enter the following command in your terminal to install Node Fetch from npm:

npm install node-fetch --save

The following code snippet showcases how to use Node Fetch to make a request:

const fetch = require('node-fetch');

(async () => {
  try {

    const data = await fetch('https://the-one-api.dev/v2/book? 
    api_key=MY_KEY').then(r => r.json())

    console.log(data.name);
  } catch (error) {
    console.log(error.response.body);
  }
})();

Got

Got is another intuitive and powerful HTTP request library for Node.js. It was initially created as a light-weight alternative to the popular Request (now deprecated) package. To see how Got compares to other libraries, check out this detailed chart.

Unlike Axios and SuperAgent, Got does not parse JSON by default. Note that { json: true } was added as an argument in the code snippet below to achieve this functionality.

For modern browsers and Deno usage, the folks behind Got produced Ky. Ky is a tiny HTTP client with no dependencies based on the browser Fetch API.

Enter the following command in your terminal to install Got from npm:

npm install got --save

The following code snippet showcases how to use Got to make a request:

const got = require('got');

(async () => {
  try {
    const response = await got('https://the-one-api.dev/v2/book?api_key=MY_KEY', { json: true });
    console.log(response.body.name);
  } catch (error) {
    console.log(error.response.body);
  }
})();

Wrapping Up

This post demonstrated how to achieve HTTP request functionality using some of what are currently considered to be the most popular libraries in Node.js.

Other languages also have a myriad of libraries to tackle HTTP requests. What language do you want us to write about next? Let us know! We’d love to hear your thoughts or answer any questions on Twitter or the Vonage Developer Community Slack.

The post 5 Ways To Make HTTP Requests In Node.js – 2020 Edition appeared first on Vonage Developer Blog.

7 App Ideas to Build At Work (and 7 to Build At Home)

Nahrin Jalal — Tue, 05 May 2020 13:32:58 +0000

It isn’t easy navigating through uncertainty. But nothing happens in isolation, and even when we’re apart, it’s essential we find ways to bring us together. More than ever, we need each other to help us through these unprecedented times. We have to stay connected by using the tools out there—and when required, build our own solutions. Below you’ll find 14 exciting ideas that we hope will help you create or enhance communications between you and your peers, loved ones, or clients.

Ideas for Work

Build a Secure Video Appointments Application Using Vonage API

In today’s world, video is an essential and powerful tool for many use cases: whether you’re remotely joining a classroom, consulting with your doctor, or even sharing your whereabouts in an emergency. In a few simple steps, you can create video appointments, send a message with an appointment link to the participants, and start a video conversation.

Transcribe a Conference Call Using Amazon Transcribe and Vonage

If you’re like me, you spend quite a lot of time in conference calls and often need to refer back to what was said in those calls. Wouldn’t it be great if you could have them transcribed automatically so that you can revisit them at your leisure?

Translate SMS Messages With IBM Watson and Vonage

Translating incoming text messages can help break down communication barriers and help you reach a broader audience. Learn how to do so with IBM Watson, AWS Translate, or the Google Translation API.

Sentiment Analysis using IBM Watson Tone Analyzer in PHP

In a world where data and text often take a front-row seat, it is increasingly important to understand the sentiment of communications we send and receive. A Tone Analyzer helps bridge the gap between what we say and what we mean.

Building a Real-Time .NET Transcription Service

Building speech to text transcription services has never been more straightforward.

How to Launch Video Meetings in Slack with Vonage

This integration offers an easy way to launch a customized live video experience on Slack for end-users, without ever having to leave the workspace.

Build a Video Conversation Platform for Online Gatherings With Nuxt.js

During a time where many events are going online, one challenge community organizers face is how to facilitate conversations between attendees during breaks and after talks have ended. In this tutorial, learn how to build an application in which events have their own lobbies with multiple conversation tables.

Ideas for Home

Sending Group Notifications with Google Sheets and Node-RED

Quickly send out urgent notifications to a list of Google Sheet contacts with a Node-RED flow and the Vonage SMS API.

Build a Family Hotline with Vonage

Have you ever had to fill out an important contact form and noticed it only had one slot for a phone number? What happens if you give them your details and you’re unavailable? Learn how to set up a phone number capable of forwarding calls between two contact numbers or to both!

Building a Turkey Timer with Laravel, Facebook Messenger and Vonage

Streamline meal preparation for your family with this app that retrieves the list of steps your recipes require and sends you the next step when it’s time to do it. You can relax, safe in the knowledge that everything in the kitchen is under control, and when it’s time for human intervention, you’ll be notified!

Build a Family Stand Up App with Vonage

Stay better connected with your family (wherever in the world they may be) by reporting weekly highs and lows into one consolidated place to view.

Snapchat Style Filters with Tracking.js and Vonage

Be Batman or just freak some people out. In this guide, you’ll learn to add facial tracking using Tracking.js and create some cool Snapchat style filters for a video stream.

Build a Health Blog With Video Coaching Using Preact.js and Vonage

Track your health by creating a blog to report daily activity, diet, energy levels, mood and more. Share your app with any professionals you work with (personal trainer, nutritionist, therapist) and receive live video coaching directly on the app.

I See What You’re Saying: Sentiment Analysis With Azure Face API and Vonage

Learn how to build a multi-party video conference that analyzes the sentiment of each participant based on their facial expression.

Get More From Vonage

We’ve shared several posts on getting started with Vonage, but there’s so much more that can be done.

Explore more solutions pertaining to healthcare, education, and video collaboration
Watch this webinar to learn best practices for enabling employees to work from home, including critical insights for contact centres
Learn more about using Vonage APIs in our documentation
Collaborate with other developers who are using Vonage APIs to build communications apps in the Vonage Community Slack

The post 7 App Ideas to Build At Work (and 7 to Build At Home) appeared first on Vonage Developer Blog.

The One Where Nahrin Talks About Her Journey to Tech

Nahrin Jalal — Mon, 09 Mar 2020 05:27:32 +0000

I was in a good place in 2016. My life was going according to plan. If there had been a checklist, I would’ve been checking off boxes with gusto.

As a pre-law student, I had dreamt of acing the Law School Admission Test, attending a top law school, and becoming a high-flying corporate litigator. Now, more than halfway there, the end was in sight. I was going to be successful, make my friends and family proud, and be happy.

And while I have no doubt there are plenty of perfectly happy lawyers out there, in 2016, while I was working at a legal non-profit and counting down the days to my first day of law school, there didn’t seem to be. The thing no one tells you when you grow up wanting to be a lawyer is that while the trek there may be challenging, it doesn’t become less demanding. The women lawyers I aspired to one day join the ranks of worked all week tirelessly and took their work home with them on weekends. While they made a significant impact professionally, it seemed to be possible because of sacrifices made elsewhere. The end in sight now looked bleak, and I became disillusioned with my chosen path.

I had been laser-focused on my future legal profession for so long that I had never allowed myself to consider other potentially rewarding paths. Accepting that this journey had taken a turn that no longer served me was the best thing I had ever done for myself. Because soon after, I was able to take a leap of faith to start again.

This time, in pursuit of a career in tech. Having never shown a particular interest in computers as a child, I probably seemed very unlikely to end up working with them. And yet, it’s because I’m one of the least likely people to have ended up in tech that I feel that it’s important to talk about how I ended up here. While my path to tech may appear non-linear, it wasn’t random.

The One Where Nahrin Learns to Code

Flashback to 2016, the Communications Manager at the legal non-profit I was working at had abruptly quit. In a constant effort to prove myself, I volunteered for tasks left, right, and centre—although I had no clue how to do most of them. Being optimistic about my ability to figure things out is one of my best traits and one that I often regret. As my employer struggled to fill the role, I found myself gravitating towards the more technical tasks: I learned to manage the database, design and disseminate communications, and update the website in a matter of weeks. And I was hooked.

I had started learning how to code after work with resources like freeCodeCamp.org and codeacademy. I enjoyed what I was picking up, and I knew I wanted to continue. I wanted to build, learn, teach, and create.

But how could I break into the tech industry? Could I justify going back to university and adding more debt to my already daunting student loans?

I decided to visit a reputable coding bootcamp in Toronto and left feeling more excited and optimistic about my future than I had in months. I figured it didn’t hurt to apply. I got accepted.

I quit my job and started the web development immersive program at Juno College of Technology (then HackerYou) in the spring of 2017. Nine weeks went by in a flash of classes, creating projects using new (to me) technologies, and interview prep. I graduated Juno College feeling empowered in knowing I was leaving with skills I could take anywhere. Even on the bad days now, I remind myself of that feeling, and I fall back in love with code all over again.

The One Where Nahrin Becomes A Professional Developer

A combination of luck and preparation got me a job offer soon after I began applying. I had done it!

Yet in my software development team, I was very aware of being an only: the only junior, the only person of colour, and the only woman. While I loved what my work entailed, I wished I didn’t so often feel like the odd one out.

The One Where Nahrin Finds Community

Mentors in my coding bootcamp had shared how valuable attending meetups could be, and now that I had free time again, I started attending them as often as possible. I found friends that I related to, role models that made me feel represented, and above all, a sense of community.

I am now a Lead for Women Who Code Toronto. We provide an avenue for women to pursue a career in technology, help them gain new skills and hone existing skills for professional advancement, and foster environments where networking and mentorship are valued.

The One Where Nahrin Discovers A Love for Teaching

I strongly believe in giving back and paying it forward every step of the way. We always have something to offer, even when we’re just starting out! I had started volunteering as a mentor at Canada Learning Code workshops early in my bootcamp journey and carried this well into my first year as a developer. When approached with the opportunity to create an accessible technical education program, I took it. In mid-2018, I helped launch FemmTO at UforChange—a 12-week web development program offered to marginalized youth from underserved communities interested in pursuing STEM careers. In small classes, and through hands-on project-based work, our students develop technical skills and increased confidence.

// Detect dark theme var iframe = document.getElementById('tweet-1050078722605416450-533'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1050078722605416450&theme=dark" }

The One Where Nahrin Combines Passions

I’m now in the privileged position of being a Developer Educator at Vonage, where my work revolves around creating resources that help and inspire developers using our communications APIs. This role blends my passions for learning about cutting-edge technology, supporting communities, and advancing technical education—and I'm so excited to have landed here.

Parting advice: I understand the ability to take risks involves privilege, and there are many in circumstances that can’t afford to take big chances as I have. But when possible, I implore you not to settle. Don’t hold yourself back because you believe you’re not cut out for something. You’re not too old. It’s not too late. Always keep learning. Take risks. Don’t settle.

Build a Health Blog With Video Using Preact.js, Netlify CMS, and Vonage

Nahrin Jalal — Fri, 28 Feb 2020 18:06:06 +0000

In this tutorial, we will build a Progressive Web App (PWA) that serves as a personal health blogging tool with live video chat functionality—allowing you to receive coaching directly on the app! PWAs are websites that have been enhanced to feel and function like native apps and boast many features that a traditional website doesn’t, such as:

Installable on mobile devices
Push notifications
Offline support
Discoverable from web search results and app stores

And you can update your app by directly editing your web server code.

So how do you get started?

Just about any traditional web app can be converted into a baseline PWA with the addition of a manifest.json file and a Service Worker JavaScript file. However, if you’re starting from scratch, several tools can streamline the process.

PWAs with Create React App vs. Preact CLI

Create React App (CRA) is a tool for creating PWAs that is incredibly popular amongst developers, especially given the sheer size of the React.js ecosystem. By default, every new CRA project is a PWA—amazing! However, a PWA should be as fast and performant as possible, and CRA doesn’t do much for code optimization.

This is why our demo is built using Preact.js, a lightweight and faster alternative to React, with the same built-in support for PWAs. Preact delivers on performance, size, efficiency, and compatibility in a big way. Notably, it’s only 3.5kb in size and is compatible with the React modules you would find on npm. Being able to write React/React DOM code without making changes to workflow or codebase also significantly limits any learning curve.

For more information on how the libraries differ and features unique to Preact, check out the Preact documentation.

The Preact CLI functions like Create React App and is just as easy to use. It gets you up and running instantly with a minimal and understandable project structure and puts your project on the path to excellent performance. New projects ship with only 4.5kB of JavaScript in production and become interactive in under 3s—even on slow devices and networks. Noteworthy features include:

100/100 Lighthouse score, right out of the box
Fully automatic code-splitting for routes
Differential JavaScript serving
Auto-generated Service Workers for offline caching powered by sw-precache
Support for CSS Modules, LESS, Sass, and Stylus with Autoprefixer
Monitoring of your bundle/chunk sizes with built-in tracking
Push Render Pre-Cache Lazy-load (PRPL) pattern support for efficient loading

More information regarding features may be found in the Preact CLI documentation.

Build a Health Coaching PWA using Preact CLI and Vonage Video API

The Use Case

Is becoming healthier one of your New Year’s resolutions? This application will help you track your progress by enabling you to blog about daily activity, diet, energy levels, mood and more using the Preact CLI Netlify CMS template. Share your app with any professionals you work with (personal trainer, nutritionist, therapist) and receive live video coaching directly from the platform with Vonage Video API.

In case you’ve fallen off track with your health goals, keeping a journal has been proven to help with accountability!

The steps:

Install Preact CLI and Create Your Project
Update Default Text and Styling
Create a Vonage Video Project
Add Custom Video Chat
Deploy with Netlify
Publish Posts with Netlify CMS

Prerequisites

Before getting started, you’ll need a couple of things:

A Vonage Video API Account — create one for free if you haven’t already.
Node and NPM installed on your development environment. This tutorial uses Node (> V6.x) and NPM 6. Check that they’re installed and up-to-date by running the following in your terminal:

node --version

npm --version

If needed, navigate to nodejs.org to install the correct version (> V6.x).

Want to skip to the end? You can find the code for this tutorial on GitHub.

Step 1: Install Preact CLI and Create Your Project

To set up the application, we’ll need to have the Preact CLI installed globally. Use the following command to install the CLI.

npm install -g preact-cli

Now, let’s create a new project using the netlify-cms template. This will provide a simple blog that will serve as the base of our application. Remember to replace my-project-name with what you would like to call the project.

preact create netlify my-project-name

Start the development server with the following command:

cd my-project-name && npm run dev

You’re all set! A new project has been created. Open your browser and go to http://localhost:8080 to check progress on the application as we continue with the tutorial.

Step 2: Update Default Text and Styling

The application we are building is a platform personal to you—and I encourage you to get creative and customize the design! If you’d like to quickly get started, for now, the demo has some basic text and styling implemented, and the code can be found on GitHub. To change the default text on the homepage, update the code in home/index.js. For styling changes, style/index.css, home/style.css, blog/styles.css, and contact/styles.css are good places to look.

Feel free to revisit this step and change up the styling as often as inspiration hits!

Step 3: Create a Vonage Video Project

In your Vonage Video API account, click the Projects menu and Create New Project. You will have the option to Create Embed Project or Create Custom Project. The Video Chat Embed is the easiest way to add basic video functionality quickly and involves no coding. However, it does not currently allow for mobile app integration (which is a crucial PWA feature) and advanced features such as archiving, screen sharing, and text chat.

So, let’s proceed by clicking the Create Custom Project button. Give your new project a name and press the Create button. You can leave the preferred codec as ‘VP8’.

Next, click on View Project. At the bottom of the project detail page, you’ll find the Project Tools where you can create a Session ID and Token. Leave Routed as your session’s media mode and press the Create Session ID button.

Lastly, paste the generated session ID into the Session ID field of the Generate Token form and press the Generate Token button.

Note: The default expiration time for the token is one hour. Feel free to prolong that for up to 30 days at a time.

We’re now all set to start building out the video component!

Step 4: Add Custom Video Chat

One of the benefits of Preact is its ability to be used in the browser, with no build tools needed. As JSX, the syntax commonly used in React apps needs to be transpiled, Preact uses an alternative called HTM. Instead of using a custom syntax, it relies on native tagged template strings which are already in JavaScript.

To help with readability, we will mostly use JSX in this tutorial. We can easily switch between JSX and HTM because of preact-compat— more on that later!

Create a Video Component

Inside the components folder, create a video folder to hold all the components we are about to add. The structure should look like this:

Now, add the following files to the video folder:

video.js
publisher.js
subscriber.js
checkbox.js
connectionStatus.js

Go to src/routes/contact/index.js and import the Video component and call it within your return statement. This is where the video chat screen will be located in the app once we have built out the necessary components. The code should resemble this:

import { h } from 'preact';import { lazy, Suspense } from 'preact/compat';import style from './style';let Video;if (typeof window !== 'undefined') { Video = lazy(() => import('../../components/video/video.js'));}const photographs = (props) => { return ( <div class={style.pageContact}> <h1 class={style.pageTitle}>Hello.</h1> <p>Enable your audio and video to begin.</p> <div class={style.formWrapper}> <Suspense fallback={<div>loading...</div>}> <Video /> </Suspense> </div> </div> );};export default photographs;

Note: When the app is pre-rendering, our module as components are executed in a Node.js environment, where most Web APIs are not available. To account for this, we have wrapped the code in a check with: if (typeof window !== ‘undefined’). Neglecting this step will cause the deploy process to inevitably fail.

Install OpenTok

In your terminal, run:

npm install opentok-react

You may be wondering if that command has a typo in it. Shouldn’t that read opentok-preact? Interestingly enough, no!

The Preact CLI includes preact-compat, which is a thin layer over Preact that works to achieve 100% compatibility with React. preact/compat adds around 2kb to our bundle size, but has the advantage of supporting the large majority of existing React modules you may find on npm. This also lets us continue writing React/ReactDOM code without any changes to workflow or codebase.

Build the Video Component

Copy and insert the values for your API Key, Session ID and Token to the video.js component. These are the values we generated in our Vonage Video API account in Step 2.

The session is essentially a room where the video chat will occur. It starts as unoccupied and listens for users to join.

import { h, Component } from 'preact';import { OTSession, OTStreams, preloadScript } from 'opentok-react';import ConnectionStatus from './connectionStatus';import Publisher from './publisher';import Subscriber from './subscriber';class VideoComponent extends Component { constructor(props) { super(props); this.state = { error: null, connected: false }; this.sessionEvents = { sessionConnected: () => { this.setState({ connected: true }); }, sessionDisconnected: () => { this.setState({ connected: false }); } }; } onError = (err) => { this.setState({ error: `Failed to connect: ${err.message}` }); } render() { return ( <OTSession apiKey='' sessionId='' token='' eventHandlers={this.sessionEvents} onError={this.onError} > {this.state.error ? <div id="error">{this.state.error}</div> : null} <ConnectionStatus connected={this.state.connected} /> <Publisher /> <OTStreams> <Subscriber /> </OTStreams> </OTSession> ); }}export default preloadScript(VideoComponent);

This component is responsible for displaying your video (if you’re first to join the session) with <Publisher />, your coach’s video with <Subscriber />, and whether you are connected in a session with <ConnectionStatus />.

Video Publishing Functionality

After the session has been established, the session ID and token are used to publish an audio-video stream from the first user. At this point, there is one participant in the session.

In publisher.js, insert:

import { h, Component } from 'preact';import { OTPublisher } from "opentok-react";import CheckBox from "./checkbox";class Publisher extends Component { constructor(props) { super(props); this.state = { error: null, audio: false, video: false, videoSource: "camera" }; } setAudio = audio => { this.setState({ audio }); }; setVideo = video => { this.setState({ video }); }; changeVideoSource = videoSource => { this.state.videoSource !== "camera" ? this.setState({ videoSource: "camera" }) : this.setState({ videoSource: "screen" }); }; onError = err => { this.setState({ error: `Failed to publish: ${err.message}` }); }; render() { return ( <div className="publisher"> {this.state.error ? <div id="error">{this.state.error}</div> : null} <OTPublisher properties={{ publishAudio: this.state.audio, publishVideo: this.state.video, videoSource: this.state.videoSource === "screen" ? "screen" : undefined }} onError={this.onError} /> <CheckBox label="Share Screen" checked={this.state.videoSource === "screen"} onChange={this.changeVideoSource} /> <CheckBox label="Enable Audio" checked={this.state.audio === "audio"} onChange={this.setAudio} /> <CheckBox label="Enable Video" checked={this.state.videoSource === "video"} onChange={this.setVideo} /> </div> ); }}export default Publisher;

Using the CheckBox component, we are allowing the user to share their screen or choose to enable audio and/or video.

Video Subscribing Functionality

When a new user launches the app, the app server will send the session ID and a unique token that is then used to connect to the session. Once connected, both users have the ability to publish their audio-video stream and subscribe to access the other user’s stream.

In subscriber.js, insert:

import { h, Component } from 'preact';import { OTSubscriber } from "opentok-react";import CheckBox from "./checkbox";class Subscriber extends Component { constructor(props) { super(props); this.state = { error: null, audio: false, video: false }; } setAudio = audio => { this.setState({ audio }); }; setVideo = video => { this.setState({ video }); }; onError = err => { this.setState({ error: `Failed to subscribe: ${err.message}` }); }; render() { return ( <div className="subscriber"> Guest {this.state.error ? <div id="error">{this.state.error}</div> : null} <OTSubscriber properties={{ subscribeToAudio: this.state.audio, subscribeToVideo: this.state.video }} onError={this.onError} /> <CheckBox label="Enable Guest Audio" initialChecked={this.state.audio} onChange={this.setAudio} /> <CheckBox label="Enable Guest Video" initialChecked={this.state.video} onChange={this.setVideo} /> </div> ); }}export default Subscriber;

Using the CheckBox component once again, we are giving the second user the option to select whether to share their audio and/or video with you.

Enable/Disable Audio and Video Functionality

In checkbox.js, insert:

import { h, Component } from 'preact';import { uniqueId } from "lodash";class CheckBox extends Component { constructor(props) { super(props); this.state = { id: uniqueId("Checkbox") }; } onChange = e => { const checked = e.currentTarget.checked; if (checked !== this.props.value) { this.props.onChange(checked); } } render() { return <div> <label for={this.id}>{this.props.label}</label> <input id={this.id} type="checkbox" checked={this.checked} onChange={this.onChange} /> </div> }}export default CheckBox;

If you would prefer to display a toggle or radio button for users, make that swap in this component.

Display Chat Connection Status

With connectionStatus.js, we display whether the chat session is connected to both users. This step is optional but recommended.

import { h, Component } from 'preact';class ConnectionStatus extends Component { render() { let status = this.props.connected ? "Connected" : "Disconnected"; return ( <div className="connectionStatus"> <strong>Coaching Session Status:</strong> {status} </div> ); }}export default ConnectionStatus;

Congrats! You have now added all the components needed for your live chat sessions. Check http://localhost:8080 to test it all out.

Step 5: Deploy with Netlify

Deploying with Netlify is highly recommended as the Netlify bot for Preact CLI is capable of launching your CMS-enabled health app with one click. Once the bot has been connected to your GitHub (or GitLab) account, it will create a repository for your health app. Then, once the deploy has completed, push your local changes to the repo. Each time you push more changes, the bot will automatically deploy them to the global CDN.

Step 6: Publish Posts with Netlify CMS

The template deploy process will have emailed you an invitation to your new app. Wait for the deployment to complete, then click the link to accept the invite. Your app will open with a prompt to create a password. Enter a password, sign in, and you’ll go to the CMS. For future visits, you can go straight to <yoursiteaddress.com>/admin/ to access the CMS. Try editing and publishing placeholder posts to get yourself familiar with the platform.

With the CMS configured, our basic Health Coaching PWA is done!

Auditing

To audit the PWA, use Google’s Lighthouse in the Chrome Dev Tools or add the Firefox extension. Lighthouse will simulate a mobile device and throttle the internet to 3G speeds and generate scores and advice for improvement.

What’s Next?

There are a number of ways this application could be enhanced for better utility and experience.

Archive and log your video coaching sessions. If you’d like to watch the videos offline, add custom functionality to the Service Worker.
Import data from any additional health tools you may be using (e.g., My Fitness Pal API or FitBit API). This could help trainers provide more accurate coaching.
Send an SMS (or message on WhatsApp, Viber, or Facebook Messenger) to your coach when a new post has been published. Check out the Vonage Messages API for more information.

The post Build a Health Blog With Video Coaching Using Preact.js and Vonage appeared first on Vonage Developer Blog.