DEV Community: kobkob2018

How to embed posts from dev.to in your website page

kobkob2018 — Sun, 22 Jan 2023 12:10:35 +0000

I created a small js hack, that can help you embed posts from dev.to and present it in your website, using the dev.to API.

there are few easy steps to implement this script:

creating an object array of the posts you like to embed
creating an html template of an embeded post
creating an html placeholder element, to append posts to
looping through the posts array, and foreach
fatch the data from the api,
arrange it's data in a clone of the template you created,
appending it to the placeholder
add some css

1 - OK, let's begin by creating the array:

  var news_posts = [
    {
          "slag": "open-source-developement-cource-57no",
          "user": "kobkob2018"
      }

      ,{
          "slag": "why-use-a-version-control-system-3o93",
          "user": "szabgab"
      }

      ,{
          "slag": "osdc-course-with-gabor-4hfi",
          "user": "shulyavraham"
      }  
  ];

2 - Now let's create the article templae:

good practice to put it at the bottom of your html.
notice it is inside a hidden div with display:none styling, so you can reuse this div to build other templates as well..

The actuall element we are going to use for the template is the one with the classname "news-post-template"

<div id="apitoui_template" class = "apitoui-template" style="display:none">
  <div class = "news-post-template" >
    <a href = "#" target = "_NEW" class = "news-post-link-to" >
      <div class = "news-post-wrap" >
            <div class="post-left-side">
              <img class = "img-placeholder" src = "" alt = "" />
            </div>
            <div class="post-right-side">
              <h4>
                <span class = "title-plaeceholder" ></span>
              </h4>
              <div class="small-details">
                <small class="news-post-details">
                  <span class = "username-plaeceholder" ></span> ・ <span class = "date-plaeceholder" ></span> ・ <span class = "read-plaeceholder" ></span> minutes read
                </small>
              </div>
              <div class="post-description">
                <span class="description-plaeceholder"></span>
              </div>
              <div class="taglist">
                <small class="news-post-taglist">
                    <span class = "taglist-plaeceholder" ></span>
                </small>
              </div>
            </div>
      </div>
    </a>
  </div>
</div>

Can you see that there is allot of HTML here, but really no content?
notice that there are allot of elements with an xxx-placeholder classes.
later in the script, we will grab the values we fatched from the API and put them there.

3 - the placeholder for where the posts will be:

you just put this on the page, where you want the articles to appear:

<div id="articles_placeholder" class = "dev-to-articles">


</div>

it is an empty element that will be filled with the fatched posts

4 - the script goes here! Fatching the posts from dev.to and put them in place:

  news_posts.forEach(newpost => {
    if(newpost.slag == 'none'){
      return;
    }
    fetch('https://dev.to/api/articles/'+newpost.user+'/'+newpost.slag).then((res) => res.json()).then(article => {
      //console.log(article);
      let articles_placeholder = document.getElementById("articles_placeholder");

      let article_template = document.getElementById("apitoui_template")
            .querySelector(".news-post-template")
            .cloneNode(true);

      article_template.querySelector(".title-plaeceholder").innerHTML = article.title;
      let ar_image = article_template.querySelector(".img-placeholder");
      ar_image.src = article.user.profile_image_90;
      ar_image.title = article.user.name;
      articles_placeholder.append(article_template);
      article_template.querySelector(".username-plaeceholder").innerHTML = article.user.name;
      article_template.querySelector(".date-plaeceholder").innerHTML = article.readable_publish_date;
      article_template.querySelector(".read-plaeceholder").innerHTML = article.reading_time_minutes;
      console.log(article.description);
      article_template.querySelector(".description-plaeceholder").innerHTML = article.description;
      let taglist_placeholder = article_template.querySelector(".taglist-plaeceholder");
      article.tags.forEach(tag => {
        taglist_placeholder.append("#"+tag+" ");
      });
      article_template.querySelectorAll(".news-post-link-to").forEach(link => {
        link.href = article.canonical_url;
      });
    });
  });

So what do we actually see here?

first thing is, that we loop through the object array we created earlier:

  news_posts.forEach(newpost => {
    if(newpost.slag == 'none'){
      return;
    }
    ... //code goes here
  });

now, for each object, we grab the username and the slag info, and use it to fetch the article from the api:

        fetch('https://dev.to/api/articles/'+newpost.user+'/'+newpost.slag)
      .then((res) => res.json())
      .then(article => {
        console.log(article);
        ... //code goes here
    });

after fetching the article data you can console.log it, to see which info you recived and what you can use to fill your template clone

So now, let's create the template clone:

      let article_template = document.getElementById("apitoui_template")
            .querySelector(".news-post-template")
            .cloneNode(true);

now we can append data from the article info into the clone's html elements.

article_template.querySelector(".title-plaeceholder").innerHTML = article.title;

      let ar_image = article_template.querySelector(".img-placeholder");
      ar_image.src = article.user.profile_image_90;
      ar_image.title = article.user.name;

      article_template.querySelector(".username-plaeceholder").innerHTML = article.user.name;
      article_template.querySelector(".date-plaeceholder").innerHTML = article.readable_publish_date;
      article_template.querySelector(".read-plaeceholder").innerHTML = article.reading_time_minutes;
      article_template.querySelector(".description-plaeceholder").innerHTML = article.description;

      let taglist_placeholder = article_template.querySelector(".taglist-plaeceholder");
      article.tags.forEach(tag => {
        taglist_placeholder.append("#"+tag+" ");
      });

Don't forget to assign the href attribute to the article's link (or links):

      article_template.querySelectorAll(".news-post-link-to").forEach(link => {
        link.href = article.canonical_url;
      });

And now, append it to the page:

      let articles_placeholder = document.getElementById("articles_placeholder");
      articles_placeholder.append(article_template);

5 - Last, but not least, add some CSS to look almost like an embed in dev.to:

(using some sass here...)

.news-post-template a.news-post-link-to:hover{
    text-decoration: none;
}

.news-post-wrap{
    display: flex;
    background: white;
    border: 1px solid gray;
    margin: 25px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 3px 3px 3px grey;
    color: black;
    max-width: 700px;

    .post-left-side{
        margin: 10px;
        margin-right: 20px;
        width: 70px;
        img{
            border-radius: 50%;
            width: 65px;
        }
    }
    h4{
        font-weight: normal;
        font-size: 24px;
        line-height: 18px;
        padding-top: 12px;
    }
    .post-description{
        font-size: 14px;
        line-height: 14px;
        padding: 0px 14px;
    }
    .small-details{
        font-weight: bold;
    }
}

Basically, Thats it.
There are also some other ways to fatch articles. you can get all user articles as an array, etc..

You can see a good example in this article:

How to Fetch Your Posts From dev.to API With JavaScript

Joel Olawanle ・ Jun 19 '20

#javascript #html #beginners

Jekyll and the gh-pages

kobkob2018 — Fri, 20 Jan 2023 09:20:37 +0000

Github has a nice ui for creating a sttic pages website on the fly. it is called gh-pages, and you can deploy it streight to a subdomain, given to you, based on your github username and branch.
you can also giv it your own domain and also snip some pithon code into it.
It is based on an open source project caled jekyll, which is a static pages generator.

Here some info about it

GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

pages.github.com

Here is Jekyll

Jekyll • Simple, blog-aware, static sites | Transform your plain text into static websites and blogs

Transform your plain text into static websites and blogs

jekyllrb.com

And here is a small website I once built with jekyll

shimon-clinic.co.il

Open source developement cource

kobkob2018 — Fri, 20 Jan 2023 09:06:24 +0000

I have participated the first 2 classes of an Open source developement cource, by @szabgab

Gabor SzaboFollow

Helping individuals and teams improve their software development practices. Introducing testing, test automation, CI, CD, pair programming. That neighborhood.

Here you can see the Cource descrioption

all the updates sit here in a github repo

And he also created a practice website which we can update

I recently posted some of the cource info Here, in hashnode, But ever since I realized that in dev.to you can write markdown, and easily tag people you know, I moved here.

I also reallized, that most of the cource participants are write here. so I guest most of our small comunity activities will be from here..

I think it is written in jekyll, but I am not sure yet..

Another participent in this class is @shulyavraham, and we sometimes assist eachother with homework. which is allot!!.

She wrote a wonderfull post, explaining the contents of this cource. you can click here to see her post

OSDC Course with Gabor

ShulyAvraham ・ Jan 9 '23

#ai #softwaredevelopment #tooling #productivity

Here are another perspective about this cource from another participant

Thus The New Journey Begins

Alex M. Schapelle ・ Jan 11 '23

#tooling #softwaredevelopment #slack #github

Here are some of the insights and concepts learned in the first 2 lessons:

repository: is a collention of files and directories, kept in the cloud..
git: a way to keep version controll for changes in a repository. each repository has an owner and right and read permission settings
branch: a division for new version for new developement
commit: any change made and uploaded to the repository, each commit is saved and can be restored
fork: a copy of another owner's repository, to a personal repository
pull request: once you want to make changes in someone elses repo, you need to commit it to your own fork,and then send a pull request to the original repo
github: it is a web ui that helps managing repositories
issue: a list of comments created by users , stating issues that need to be resolved
commit hashkey: when creating an issue, you can link a specific commit, identified by it's hashkey, so other users can know what is is about.
issue-id: same as commit hashkey, you can link an issue while commenting in a commit, so users can know the issue is taken care of in this commit.

Early bird for the CRUDor mvc system enterprise

kobkob2018 — Fri, 20 Jan 2023 08:09:59 +0000

I would like to invite contributors to participate and help the building of this very simple, yet beautyfull system that I currently construct.

// at the bottom of this post I will put some tasks list of where you can help and fill in some codes.

it is written in php and mysql and it is based on simple MVC methodology.

but here, the main focus and most affords are put in to simplify and straight foreword all CRUD functionality.

talking about form creation on the fly, straight attached to a mysql table.

talking about field validation server side before saving, files uploads and saving all at once, and all you have to do is to write very few lines of code. where all the validation, files upload etc.. are taken care of in the background.

this project also gives a very vast permissions handling, called handle_access. it is mapping access for controllers a and each function in it, based on users log-in or logout, user types and rolls given for each function.

I know it sounds complicated to write such access_handling, but thanks to a cascading defaults fallback mechanism it is really simple to do.

you, actually don't have to worry about this at all!! unless you want to add special access to specific functionality. it is done with very few lines of code, inside the controller, inside the handle_access() function.

well.. this was a short description of what this system can do and there is much more to it...

so what do I need from you contributors?

one thing I need help with is commenting functions and describing what they do. this is one thing I keep failing to do. basically I do worry about naming the functions in a way that the name tells the whole story of what the function can do. so it is easy to understand but I really could help some commenting as well.

another thing I like to plan some multy language translation mechanism

I will put more task in the comments bellow in the future

So it is an open source, ofcourse! and i store it in github, an a public repository,so you can easilly clone and start commiting changes.

Click here for the project's the Github repository

this is it!!!

wish us all lots of good luck and good practice.

deep thanks

kobkob