Code Monkey home page Code Monkey logo

dev.to's Introduction

1911 Mod 4 Dev.to Enhancement Project

Collaborators

Will Meighan; https://github.com/Will-Meighan

Elom Amouzou; https://github.com/eamouzou

Dan Reardon; https://github.com/dreardon1021

User Story/MVP

As a user,

On the article show page,

I should see three related youtube videos,

that can be played without leaving the page,

styled in an aesthetically pleasing format.

Description

The backend developers, Will and Elom, were able to succesfully consume the Youtube API using the search function. We used a partial within the article show page to direct our code to the youtube view, where we then used fetch to begin the Youtube MVC function. We used the article keywords and tags as the parameters, and created a JSON object for the front end.

Dan, our front end developer, was able to manipulate the JSON object to disply the videos in an aesthetically pleasing format. He was able to utilize stylesheets and liquid tags to format the youtube videos. The youtube videos are playable directly from the article show page.

Setbacks

The hardest aspect of this project for each of us was simply absorbing this monolithic code base and understanding where we would need to work and what we would need to do to get to our desired product. Once we were able to digest the code base, we felt pretty good about how to accomplish our goal.

The only spot we felt needed refactoring was our youtube API consumption. We were originally only using the article tags for the search function, but we felt we should incorporate the keywords as well to make the search more robust and dynamic, in case there were to ever be updated to the code base.

ERD

Below is the flow chart of the code base we used and adjusted for our given track, elsewhere on the internet.

ERD


DEV

DEV Community 👩‍💻👨‍💻

The Human Layer of the Stack

ruby version rails version Travis Status for thepracticaldev/dev.to Code Climate maintainability Code Climate test coverage Code Climate technical debt CodeTriage badge Dependabot Badge GitPod badge Netlify badge GitHub code size in bytes GitHub commit activity GitHub issues ready for dev Honeybadger badge

Welcome to the dev.to codebase. We are so excited to have you. With your help, we can build out DEV to be more stable and better serve our community.

What is dev.to?

dev.to (or just DEV) is a platform where software developers write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their place within our community. ❤️

Table of Contents

Contributing

We encourage you to contribute to dev.to! Please check out the Contributing to dev.to guide for guidelines about how to proceed.

Getting Started

This section provides a high-level quick start guide. If you're looking for the installation guide, you'll want to refer to our complete Developer Documentation.

We run on a Rails backend, and we are currently transitioning to a Preact-first frontend.

A more complete overview of our stack is available in our docs.

Prerequisites

Installation Documentation

View Full Installation Documentation.

Developer Documentation

Check out our dedicated docs page for more technical documentation.

Core team

Vulnerability disclosure

We welcome security research on DEV under the terms of our vulnerability disclosure policy.

License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. Please see the LICENSE file in our repository for the full text.

Like many open source projects, we require that contributors provide us with a Contributor License Agreement (CLA). By submitting code to the DEV project, you are granting us a right to use that code under the terms of the CLA.

Our version of the CLA was adapted from the Microsoft Contributor License Agreement, which they generously made available to the public domain under Creative Commons CC0 1.0 Universal.

Any questions, please refer to our license FAQ doc or email [email protected].


Sloan, the sloth mascot
Happy Coding ❤️

dev.to's People

Contributors

benhalpern avatar dependabot-preview[bot] avatar rhymes avatar dependabot[bot] avatar zhao-andy avatar maestromac avatar mstruve avatar lightalloy avatar jessleenyc avatar jacobherrington avatar mariocsee avatar nickytonline avatar atsmith813 avatar citizen428 avatar link2twenty avatar bolariin avatar glennmen avatar eamouzou avatar arku avatar aspittel avatar luchiago avatar vaidehijoshi avatar cyrillefr avatar koheisg avatar pkfrank avatar will-d-m avatar arnellebalane avatar vegafromlyra avatar amorpheuz avatar johncurcio avatar

Watchers

James Cloos avatar

Forkers

eamouzou

dev.to's Issues

Write feature test


name: feature test
about: article show page is rendering three youtube videos

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

As a user,
On the article show page,
I should see three youtube videos related to the tags of the article,
in an aesthetically pleasing format.

** Additional context**

We now have a working mvp in development, so we need to build out the proper tests. This issue is to build out the feature test to confirm the videos are actually rendering on the article show page.

Reader Stats

Describe the solution you'd like

Build a data/stats dashboard on my profile to track/report my reading data like:

  • Number of total visits to the site
  • Number of visits per day
  • Average active time on pages per day
  • Total articles read
  • Total words read
  • Average articles & words per day
  • Number of comments
  • Think of other relevant stats to add as well

Stretch goal for this feature:

  • Can I set a goal or engage in some kind of challenge versus other readers?

Obtain Algolia API key


name: API Key
about: Obtain algolia api key

Is your feature request related to a problem? Please describe.

No.

Additional context

Site will ask for business and epicenter, but these are not relevant. Just fill out to the best of knowledge.

Obtain Github API key


name: API Key
about: Obtain github api key

Is your feature request related to a problem? Please describe.

No.

** Additional context**

Obtain the github client id and secret

Construct Presentation


name: Presentation
about: Planning out how we will present our project

We can meet Sunday to go over how we will present. Some items to consider putting in presentation;

  • Annotations
  • Collaboration
  • Splitting of technical work
  • Code flow
  • Showing finished product in development
  • Explaining ERD
  • How we utilized project board
  • refactor opportunities
  • what we could have done differently

Create ERD


name: Build ERD
about: Diagram to explain updates

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

As a user,
On the article show page,
I should see three youtube videos related to the tags of the article,
in an aesthetically pleasing format.

** Additional context**

For the presentation of our project, I would like to have an ERD explaining all the different parts of the code base we were working in and why we chose to update those aspect. Will be added to README.

Create video objects for front-end manipulation


name: Feature request
about: Displaying related youtube videos on article show page

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

As a user,
On the article show page,
I should see three youtube videos related to the tags of the article,
in an aesthetically pleasing format.

Describe alternatives you've considered

Could possibly use keywords for related videos as well.

** Additional context**

Elom is going to fetch the consumed youtube API from within the article show page. He will use the route get "/:username/videos/youtube" => "youtube#index" to direct the app to the youtube controller, where the api will then be consumed. We will also utilize a partial erb form to render the videos in a aesthetically pleasing format.

Consume Youtube API


name: Feature request
about: Displaying related youtube videos on article show page

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

As a user,
On the article show page,
I should see three youtube videos related to the tags of the article,
in an aesthetically pleasing format.

Describe alternatives you've considered

Could possibly use keywords for related videos as well.

Additional context

User google youtube v3 API

Relevant Content Elsewhere on the Internet

Describe the solution you'd like

On each article, find three potentially related YouTube videos and embed those on the bottom of the page before the comments section.

  • Implement some kind of thumbs-up/thumbs-down to mark them as actually relevant or not relevant
  • Display some of the video stats (like number of views) in the preview
  • Could there be a scrolling carousel to show more than three videos

Pathways and Badges

Describe the solution you'd like

Imagine I’m building a course where someone has to read a sequence of articles.

  • I would gather the links to the articles
  • Maybe I could have some tooling to do nice reordering of the elements (drag-and-drop?)

As the reader, the system marks these articles as complete when I've read them for a minimum amount of time. When I’ve completed everything in the set I get some little badge or a text “achievement” somewhere in my profile.

More Posts Like This

Describe the solution you'd like

Use some fancy machine learning to scan existing posts that I've previously read. As I read a new article, utilize this machine learning to apply to any other articles I read.

  • Link a few of those on the bottom after an article
  • Have some thumbs up / thumbs down to say whether they’re actually relevant
  • Could there be a scrolling carousel to show more than three articles

**5/5/20** Familiarize with code base


name: Familiarize with codebase

After setup completion, get familiar with code base. Mess around in development. No annotation yet. Take notes on structure and where in the code we may need to live based on assigned track.

5/8/20 Create wireframe


name: Wireframe
about: Diagram out the desired finished product in accordance with listed user story

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

As a user,
On the article show page,
I should see three youtube videos related to the tags of the article,
in an aesthetically pleasing format.

Additional context

Will use Figma app to create wireframe

Live Post Preview

Describe the solution you'd like

When you’re writing a post, you're writing markdown in a big text box. There’s a preview button, but it is a separate view than your writing.

Implement a Live Preview pane to the side in the authoring view

  • So you’re writing on the left pane, previewing in the right pane
  • Make the preview collapsible
  • Make sure if you’re far down the authoring window that the preview shows up somehow reasonably aligned (scrolls with the editing window). Or can you have some clickable link from the source to where it renders in the preview?

Comment Priority

Describe the solution you'd like

Right now comments have a “favorite” marker.

  • Default the comments to sort by the number of favorites
  • Allow for them to be sorted chronologically
  • Implement some kind of negative downvote that counteracts an upvote
  • If a comment is given 2 or more downvotes, then it get hidden
  • Readers can see that a comment was hidden, and have a clickable link to expose the hidden comment

5/7/20 Finish annotations


name: Code annotation
about: Putting comments about where/what we will be working on in code base

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

As a user,
On the article show page,
I should see three youtube videos related to the tags of the article,
in an aesthetically pleasing format.

Daily Dev Reminder Email

Describe the solution you'd like

It’s overwhelming to look at the front page. There’s so much content being created every day. How do I possibly keep up? We know that the best way to actually achieve hard things is to do a little bit on a regular basis. For this feature project, let's help readers build a daily habit of reading a single article.

Assume that I’m a registered user. When I go to my Profile page, click the Misc submenu, then I see a checkbox for “Receive your Daily Dev”. If I check it then there’s a text field for the email address where I want to get it. (maybe pre-populate this with my GitHub email if that's how I registered)

When I have that checked, each day I get an email from the app. The app has selected a highly-read article from a tag that I follow that was posted in the last 14 days and hasn’t been sent to me previously.

Later Segment Ideas:

  • If I click the link then the app records that as a being a good-enough marker that I’ve read the article.
  • There’s a streak counter embedded into the top navigation that displays how many days in a row I’ve read my selected article
  • Can I set up a friend group where we all get the same daily selection?
  • Could the friend group display then show who amongst the group has read the article for today? Their streak?

Complete setup


name: Setup
about: Make sure local environment is setup properly for dev.to

Please see setup instructions in the resources column.

5/8/20 Consolidate annotations.

Consolidate best notes into one branch for easy readability and consistency. Push to master and have each teammate pull down.

Artisinal Collections

Describe the solution you'd like

I don't have time and energy to read these articles every day, but I’d like to catch up with the best recent content.

Thankfully, I have you. And you love cultivating content. You login to the app and create a new “collection” with a name like “Best JS of February”. Now when you are reading articles in the app there is a [+] button that, when clicked, gives you the option to add that article to a collection.

The collection has a publicly-sharable URL, so that you can tweet it out, I can click the link, and see a listing page of all the articles in the collection.

Later Segment Ideas:

  • When I click articles in the collection, mark them as read
  • Display which articles I have and haven’t read
  • Display how many times each article in the collection has been read
  • Allow the reader to make articles as “Not Interested” and grey them out
  • Implement some sorting in the listing display like “Published Date”, “Added Date”, “Most Popular”

Machine-Generated Collections

Describe the solution you'd like

I don’t have time and energy to read these articles every day, but I’d like to catch up with the best recent content.

Thankfully, we have machines for that. As a reader I login to the app and create a new “collection” with a name like “Best of JS”. Within the collection I can target some specific tags (maybe using my followed tags as suggestions). Then, each week, the app generates a collection based on posts published during that week in those tags, prioritizing them by the number of reads. That collection is browsable at a unique URL.

Later Segment Ideas:

  • The collection has a publicly-sharable URL, so that you can tweet it out, I can click the link, and see a listing page of all the articles in the collection.
  • When I click articles in the collection, mark them as read
  • Display which articles I have and haven’t read
  • Display how many times each article in the collection has been read
  • Allow the reader to make articles as “Not Interested” and grey them out
  • Implement some sorting in the listing display like “Published Date”, “Added Date”, “Most Popular”

Write request spec


name: request spec
about: consuming api and receiving proper json response

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

As a user,
On the article show page,
I should see three youtube videos related to the tags of the article,
in an aesthetically pleasing format.

Describe alternatives you've considered

Could possibly use keywords for related videos as well.

** Additional context**

We now have a working mvp in development, so we need to build out the proper tests. This issue is to build out the request spec to confirm the json response is what we intended.

Update README


name: Update README
about: relevant project information in README

Brief description of the user story we added and high level overview of how we accomplished that goal. Also make sure to link all of our github profiles to the README.

Update fetch call


name: Update fetch call
about: Make fetch call more dynamic

Is your feature request related to a problem? Please describe.

Yes. We are currently only using tags for the youtube API call, but we may want to consider adding keywords to that search so the code is more dynamic if tags were to ever be updated/removed.

Describe the solution you'd like

When fetching the youtube API, we should be using keywords as well as tags

** Additional context**

Will need to update the youtube service to include keywords in the initializer.

Try to break code


name: Break Code
about: Mess around in dev to see if we can break the code we have written

Since we are finished with the technical aspect and won't be adding any additional code, we should mess around in dev to see if we can break the code we have written, just to make sure it is up to snuff.

Format youtube video display


name: Feature request
about: Displaying related youtube videos on article show page

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

As a user,
On the article show page,
I should see three youtube videos related to the tags of the article,
in an aesthetically pleasing format.

Describe alternatives you've considered

Could possibly use keywords for related videos as well.

** Additional context**

We have been able to consume the youtube API and present the front end with an html object that should be easily manipulated. dan is going to build out the youtube erb partial to display the videos in an aesthetically pleasing format.

Obtain Youtube API key


name: API Key
about: Obtain youtube api key

Is your feature request related to a problem? Please describe.

No.

Explore youtube tag files


name: Feature request
about: Displaying related youtube videos on article show page

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

As a user,
On the article show page,
I should see three youtube videos related to the tags of the article,
in an aesthetically pleasing format.

Describe alternatives you've considered

Could possibly use keywords for related videos as well.

** Additional context**

We have been able to consume the youtube API and present the front end with an html object that should be easily manipulated. For now, Dan is going to explain the tag files to see how the communicate and figure out how he might be able to manipulate the front end. No coding will take place for this issue, only notes.

**5/6/20** Begin annotations

Note within code where our track is going to be applicable and how we might code it out - Will & Elom & Dan if comfortable

Note within code on the file structure and how the applicable parts are communicating - Dan

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.