CommentSold

commentsold

Is Shopping In-Store An Experience Of The Past?

This New Data Type Is 8 Times Faster Than JSON: Improve Your Semi-Structured Data Analysis

Cover for the album by DALL·E 3 In this article, I'll share how I made a project over a weekend to release my album ( ). I'm not a trained musician or composer, but sometimes, tunes pop up in my mind. I jot them down, and then let the computer play them. https://evhaevla.netlify.app/ In 2021, I launched my album titled "Everyone is Happy, Everyone is Laughing." It's a simple album by an unfamiliar "composer" – that's me. I'm not just into music; I'm also a developer, mainly focusing on frontend work recently. I thought, why not combine these two loves? So, I set out to design a website to visually present my album. This article won't dive deep into every technical detail — that would be too lengthy and might not appeal to everyone. Instead, I'll highlight the core concepts and the hurdles I encountered. For those interested, all the code can be found on . GitHub Visual My album is composed for piano, making the decision straightforward. Imagine rectangles descending upon the piano keys. Anyone with a musical inclination has likely encountered numerous videos on YouTube depicting notes in this manner. A rectangle touches a key, illuminating it, indicating the precise moment to strike the note. I’m uncertain of the origin of this visual style, but a quick Google search predominantly yields screenshots of Synthesia. On YouTube, there are creators who manage to produce visually stunning effects. Viewing such videos is a treat, both from aesthetic and musical perspectives. Watch or . this this What will we need to implement? Keys Rectangles Audio Animation Let's tackle each point and put all of these into action. Keys Initially, I assumed that implementing the keys would pose the greatest challenge. However, a quick online search revealed a plethora of examples and guides on how to do just that. Aiming for a design with a touch of elegance, I opted for an created by . example Philip Zastrow All that was left for me to do was replicate the keys several times and establish a grid for the notes to glide across. I employed Vue.js as the frontend framework, and below is the component code. <template>
  <ul style="transform: translate3d(0, 0, 0)">
    <li :id="`key_${OFFSET - 1}`" style="display: none"></li>
    <template v-for="key in keys" :key="key.number">
      <li :class="`${key.color} ${key.name}`" :id="`key_${key.number}`"></li>
    </template>
  </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Key } from '@/components/types'

const OFFSET = 24

const template = [
  {
    color: 'white',
    name: 'c' // Do
  },
  {
    color: 'black',
    name: 'cs' // Do-diez
  },
  {
    color: 'white',
    name: 'd' // Re
  },
  /* ... */
]

const keys = ref<Key[]>([])

for (let i = 0; i < 72; i++) {
  keys.value.push({
    ...template[i % 12],
    number: i + OFFSET
  })
}
</script> I'd like to mention that I appended an attribute to each key, which will be essential when initiating their animations. id Rectangles While this may appear to be the simplest segment, a few challenges are hidden in plain sight. How can the effect of descending notes be accomplished? Is there a need to maintain a structure that can be queried to retrieve the current notes? What’s the best approach to render the outcomes of such queries? Each question presents an obstacle to navigate to achieve the desired effect seamlessly. I won’t linger on each question but will rather cut straight to the chase. Given the myriad challenges associated with the dynamic approach, it’s wise to heed Occam’s Razor and opt for a static solution. Here’s how I addressed it: I rendered all 6215 notes simultaneously on a single expansive canvas. This canvas is housed within a container styled with the property. Achieving the falling notes effect is then simply a matter of animating the of this container. overflow: hidden scrollTop However, a lingering question remains: how do I obtain the coordinates for each note? Fortunately, I have a MIDI file where all these notes are archived, a convenience afforded by being the composer of the album. It boils down to rendering the notes utilizing the data extracted from the MIDI file. Given that the MIDI file is in binary format and I had no intention of parsing it myself, I enlisted the help of the library. midi-file The library is efficient in extracting raw data from MIDI files, but for my needs, that’s not sufficient. I aim to transform this data into a more accessible and application-friendly format to facilitate seamless rendering within the app. midi-file In a MIDI file, it’s not notes in the usual sense that I’m dealing with, but events. There’s a whole array of these events, but I’m primarily focused on two types: 'noteOn', which is triggered when a key is pressed, and 'noteOff', when the key is released. Both 'noteOn' and 'noteOff' events specify the particular note number that was pressed or released, respectively. Time, in the conventional sense, is absent in MIDI. Instead, we have "ticks." The number of ticks per beat is detailed in the MIDI file’s header. Indeed, there's more to consider. A tempo track is also present, containing ‘setTempo’ events that are integral to the process, considering the tempo can change during playback. My initial approach involved adjusting the animation speed of the property of the container to align with the tempo. scrollTop However, I soon realized this wouldn’t yield the expected outcome due to excessive error accumulation. A 'linear' time stretch proved more effective for animating the . scrollTop Even with the animation aspect sorted, the tempo still required incorporation. I addressed this by adjusting the lengths of the notes’ rectangles themselves. While not the optimal solution (manipulating speed would be ideal), this method ensured smoother operation. This solution isn’t perfect, mainly because I associate a tempo event with a note event based on whether they have the same or less time. This means that if another tempo event occurs while a note is still in the playing state, it will simply be disregarded. This could potentially introduce an error, particularly if a note is very long and there's a dramatic tempo change occurring during its playtime. It’s a trade-off. I’ve accepted this minor flaw as I’m focused on rapid development. There are instances where speed takes precedence, and it’s more pragmatic not to get entangled in every detail. So, we're equipped with the following information: The specific key number The precise moment the key is pressed The exact time the key is released The intensity or "speed" at which the key is pressed With these details at hand, I can pinpoint the exact coordinates on the canvas for every note. The key number determines the X-axis, while the commencement of the key press is the Y-axis. The length of the press dictates the rectangle's height. By using a standard div element and setting its position to 'absolute', I successfully achieved the desired effect. Audio I didn't intend to create a synthesizer for the piano, as that would have taken up a lot of time. Instead, I used an existing OGG file that had already been "rendered" and selected Native Instruments' for the sound library. The Grandeur Personally, I believe it's the finest piano VST instrument available. I embedded the resulting OGG file into a standard audio element. My main task then was to synchronize the audio with the animation of my note canvas. scrollTop Animation Before I could tackle synchronization, the animation had to be established first. The canvas animation is fairly straightforward — I animate the from an infinite value down to zero, using linear interpolation. The duration of this animation matches the length of the album. scrollTop When a note descends onto a key, that key illuminates. This means that for each note's descent, I need to "activate" the corresponding key, and once the note completes its course, deactivate it. With a total of 6215 notes, this equates to a whopping 12,430 note activation and deactivation animations. Additionally, I aimed to provide users with the capability to rewind the audio, enabling them to navigate anywhere within the album. To implement such a feature, a robust solution is essential. And when faced with the need for a dependable solution that "just works", my go-to is always the . GreenSock Animation Platform Look at the amount of code it takes to create all the animations for each of the keys. Using to animate components isn't the best practice for Single Page Applications. However, this method is a real time-saver. Recall the I mentioned for each key? This is where they come into play. id id const keysTl = gsap.timeline()
notes.value.forEach((note) => {
  const keySelector = `#note_${note.noteNumber}`

  keysTl
    .set(keySelector, KEY_ACTIVE_STATE, note.positionSeconds)
    .set(keySelector, KEY_INACTIVE_STATE, note.positionSeconds + note.durationSeconds - 0.02)
}) The synchronization code essentially establishes a connection through events between the audio and the GSAP global timeline. audioRef.value?.addEventListener('timeupdate', () => {
  const time = audioRef.value?.currentTime ?? 0
  globalTl.time(time)
})

audioRef.value?.addEventListener('play', () => {
  globalTl.play()
})

audioRef.value?.addEventListener('playing', () => {
  globalTl.play()
})

audioRef.value?.addEventListener('waiting', () => {
  globalTl.pause()
})

audioRef.value?.addEventListener('pause', () => {
  globalTl.pause()
}) Captions Just when I felt like wrapping up, an intriguing idea sprang to mind. What if I added a unique twist to the album? It wasn't originally on my to-do list, but I felt the project wouldn't truly shine without this feature. So, I chose to incorporate it as well. Every time I immerse myself in a track, I find myself reflecting on its deeper meanings. What message was the composer trying to convey? Consider, for instance, in "Nightbook" by Ludovico Einaudi. The piano resonates in the left ear, while the strings echo in the right. a segment It crafts an ambiance of a dialogue unfolding between the two. It feels as if the piano keys are probing: "Do you concur?" The strings affirmatively respond. "Is that the query?" The strings echo their affirmation. The sequence culminates with both instruments converging, symbolizing a realization of unity and harmony. Isn't that a mesmerizing experience? It's imperative to mention that this is purely my personal interpretation. Once, I had the opportunity to attend a Ludovico concert in Milan. After the performance, I approached him and inquired if he had indeed intended to embed the notion of a dialogue in that particular segment. His response was enlightening: "I never pondered it that way, but you certainly possess a vivid imagination." Drawing from that experience, I pondered: what if I integrated subtitles into the sheet music? As specific segments play, commentary could materialize on-screen, providing insights or interpretations into the composer's intent. This feature could offer listeners a deeper understanding or a fresh perspective on "what did the author truly mean?" It was fortunate that I chose GSAP as my animation tool. It allowed me to effortlessly integrate another timeline, specifically tasked with animating the commentary. This addition streamlined the process and made the implementation of my idea much smoother. I had an inclination to introduce the comments via HTML markup. To achieve this, I crafted a component that introduces the animation during the event. onMounted <template>
  <div :class="$style.comment" ref="commentRef">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
/* ... */

onMounted(() => {
  if (!commentRef.value) return

  props.timeline
    .fromTo(
      commentRef.value,
      {
        autoAlpha: 0
      },
      {
        autoAlpha: 1,
        duration: 0.5
      },
      props.time ? parseTime(props.time) : props.delay ? `+=${props.delay}` : '+=1'
    )
    .to(
      commentRef.value,
      {
        autoAlpha: 0,
        duration: 0.5
      },
      props.time ? parseTime(props.time) + props.duration : `+=${props.duration}`
    )
})
</script> The use of this component would be as follows. <template>
  <div>
    <Comment time="0:01" :duration="5" :timeline="commentsTl">
      <h1>A title for a track</h1>
    </Comment>
    <Comment :delay="1" :duration="13" :timeline="commentsTl">
      I would like to say...
    </Comment> Apotheosis With all the elements in place, the next step was to host the site. I opted for Netlify. Now, I invite you to experience the album and view the final presentation. https://evhaevla.netlify.app I genuinely hope there are other piano-loving developers out there, eager to showcase their albums in such a unique manner. If you're one of them, don't hesitate to fork the project.

Striking a Chord: The Art of Animating Music With Meaning

স্ট্রাইকিং এ কর্ড: দ্য আর্ট অফ অ্যানিমেটিং মিউজিক উইথ মিনিং

Einen Akkord anschlagen: Die Kunst, Musik mit Bedeutung zu beleben

Tocar una fibra sensible: el arte de animar la música con significado

Toucher une corde sensible : l'art d'animer la musique avec du sens

तार छेड़ना: अर्थ के साथ संगीत को सजीव करने की कला

コードを叩く: 意味のある音楽にアニメーションを与える芸術

코드 연주: 음악에 의미를 부여하는 기술

Tocar um acorde: a arte de animar música com significado

Взятие аккорда: искусство оживлять музыку смыслом

Akor Vurmak: Müziği Anlamlı Şekilde Canlandırma Sanatı

Đánh hợp âm: Nghệ thuật tạo nên âm nhạc sống động đầy ý nghĩa

敲响和弦：赋予音乐意义的艺术

Django's problem is a well-known topic for Django developers, and we all know how to use the and query set methods that allow us to avoid it. N+1 .select_related() .prefetch_related() However, over the years, I've noticed that the way we typically write code, the way projects evolve and features are developed, very often leads to situations where these traditional measures simply cannot help us avoid performance issues. Let's create some very simple models to illustrate some cases. Models class Topic(models.Model):
    title = models.CharField(max_length=255)
    user = models.ForeignKey(User, on_delete=models.CASCADE)

    def comments_count(self):
        return self.comments.count()

    def last_comment_date(self):
        return self.comments.last().created_at


class Comment(models.Model):
    topic = models.ForeignKey(Topic, on_delete=models.CASCADE, related_name="comments")
    text = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True) Problem See the and methods? This is exactly the problem I have faced many times while working on optimizing database queries. comments_count last_comment The main problem here is that people initially work with some page or API where only one object is needed and just add a few methods to the model or serializer and go about their day. Indeed, when you only have the following code, everything will work fine. topic = Topic.objects.last()
print(topic.comments_count())
print(topic.last_comment_date()) However, when you want to work with a set of model instances, you run into the problem that simply can't be fixed with or because you're making queries inside model methods. Topic N+1 select_related prefetch_related topics = Topic.objects.filter(user_id=1)
for topic in topics:
    # N+1
    print(topic.comments_count())
    # N+1
    print(topic.last_comment_date()) To fix the problem from here, you need to make an annotated query. N+1 from django.db.models import Count, Max
topics = Topic.objects.filter(user_id=1).annotate(
    comments_count=Count('comments'),
    last_comment_date=Max('comments__created_at')
)
for topic in topics:
    print(topic.comments_count)
    print(topic.last_comment_date) But wait, now we have a new problem: we have to support two different implementations of the same logic, which in some metaphorical sense is a more awkward case of copy-pasted code. We have to do twice as many tests, and there is a higher chance than in a couple of years that someone will make a change in one place and forget to do it in another, and then we have to deal with unexpected errors, debug several different places, and end up wasting a lot of time. Solution What would be the best solution for this? Well, exactly what the story title suggests: . treat your ORM instances as collections Basically, you can simply not write the and methods and always annotate the data, even if you only work with one instance. Just do it in both cases. comments_count last_comment_date Topic from django.db.models import Count, Max

# Work with collection
topics = Topic.objects.filter(user_id=1).annotate(
    comments_count=Count('comments'),
    last_comment_date=Max('comments__created_at')
)
for topic in topics:
    print(topic.comments_count)
    print(topic.last_comment_date)

# Work with single instance

topic = Topic.objects.filter(user_id=1).annotate(
    comments_count=Count('comments'),
    last_comment_date=Max('comments__created_at')
).last()

print(topic.comments_count)
print(topic.last_comment_date) But what about code duplication, you might ask. Yes, you don't need to always write this annotation every time you send a query to the database. There is a good chance that you only need this data in a certain part of your project, so create a service function and place it in the appropriate place and only use it when you need it. def annotate_aggregated_comments_data(queryset):
    return queryset.annotate(
        comment_count=Count('comments'),
        last_comment_created_at=Max('comments__created_at')
    )

topic = annotate_aggregated_comments_data(Topic.objects.all()).last() Doing so will benefit you greatly in the future by reducing potential performance issues and eliminating future refactoring and debugging. However, this may seem a bit excessive and may scare some people. Caveats Don't add such utilities to QuerySet classes, as they are usually for special use cases and usually include queries for other models that you don't need in your QuerySet. A QuerySet should be primarily focused on one specific model with general case implementations for queries. Instead, use some selection functions that will be created for specific domain-related parts of your project. Conclusion This is a very common case where you initially design your solution with a single object in mind, and after a while, you find yourself needing a lot of refactoring because your product needs to work with a large set of data, and the project suffers from long page loads, a large database load, etc. Think about helping yourself in the future, or perhaps your colleagues, and make some effort to avoid it beforehand.

Treat Your ORM Instances as Collections

When you're in the process of blog development, it's really important to include a comment section that enables interaction with your visitors and encourages receiving feedback. This becomes even more crucial if you're a beginner in writing - just like me - as such feedback can significantly contribute to your progress. When creating , I had a goal of launching it as soon as possible. However, considering including a comment feature, the implementation process could be time-consuming. That's when I started looking for a solution that was easy to set up yet provided essential commenting functionalities. It was during this search that I stumbled upon . my blog-centric personal portfolio Giscus What is Giscus? An open-source comments widget that harnesses the power of . giscus integrates seamlessly with GitHub repositories, making it convenient for developers who prefer using GitHub as a platform for managing their code and projects. In addition, it provides features such as thread-based discussions, Markdown support, reactions, and user authentication through GitHub accounts. Feel free to explore and experience it firsthand in the comment section below 👇. GitHub Discussions this post Giscus drew significant inspiration from , which utilize an issue-based comment system instead of discussions. I experimented with utterances initially, but I found it less convenient due to its reliance on an issue tracker for conversational purposes. utterances Opting for GitHub Discussions over issues offered numerous benefits: Enables organized and separated discussions in a dedicated space. Streamline conversations, promoting more transparent communication and reducing confusion compared to issue-based systems. Come with built-in features tailored for collaborative discussions, enabling a richer and more interactive commenting experience for content creators and visitors. As a result, Giscus offers numerous advantages compared to other services: The visitors can react to a post. The visitors can reply and react to a comment. Have a dozen of built-in themes (including ' ', which can be very useful if you have a dark/light theme on your website) and supports custom themes. preferred_color_scheme How does it work? When Giscus loads, it utilizes the GitHub Discussions Search API to find the corresponding Discussion associated with the current page, using various mappings like , , , etc. URL pathname title Giscus bot will automatically create a discussion on the first comment or reaction if a matching discussion cannot be found. For commenting, visitors need to authorize the Giscus app via the GitHub OAuth flow to post on their behalf. Alternatively, they can directly comment on the linked GitHub Discussion. Comment moderation can be managed on GitHub, giving you control over the comments. When to use it? Giscus is an ideal solution for static websites as it utilizes GitHub Discussions as the backend, eliminating the need to manage a separate backend. However, it can also be used for a backend website, making it adaptable for both scenarios. If your project is open-source, Giscus will function exclusively on public repositories. However, you do have the option to create a separate repository solely for discussions. giscus is particularly suitable for tech-related blogs where visitors are likelier to have a GitHub account. Creating a separate repository for discussions is often recommended, as it allows you the flexibility to direct your website to a different repository without the need to relocate your discussions. Setting up your github account By default, GitHub discussions are disabled. To enable them, navigate to your repository's tab and ensure the box is checked under the section. Settings Discussions Features To inform your community about the intended use of Discussions, you can create a welcome page by clicking . Set up discussions Once Discussions are enabled, installing the Giscus application is next. You can either click here to visit the app page or search for " " on the . giscus GitHub Marketplace Since I've already installed it, I have the button; if you didn't install it before, you should see a green button; click on it as the process is straightforward. configure Install Choose the repository in which you wish to utilize GitHub Discussions. In my case, it's nextjs-giscus-blog. I highly recommend granting access only to the repositories that require . Giscus Giscus configuration With our repository ready for use, the next step is configuring Giscus according to our requirements. To accomplish this, visit the and fill out the provided form. official Giscus app : Select the repository to which Giscus will connect, ensuring you provide the username and the repo name like this . Repository ayoubkhial/nextjs-giscus-blog If all criteria are met, you will see the message " " under the repository input. If you see an error message, re-check all the steps above. Success! This repository meets all of the above criteria. : Select the mapping method that connects the embedding page with the embedded Discussion. This mapping can be accomplished through the , , , and more. I will opt for the pathname in our particular setup as it guarantees uniqueness. Page ↔ Discussions Mapping pathname URL title : When GitHub Discussions are enabled, the repository will have default categories created. However, you can create your own categories according to your preferences. Discussion Category : You have the freedom to choose which features to enable. In our setup, I will allow reactions for the main post and prefer to position the comment box above the comments. This will allow visitors to write a comment without scrolling through previous comments. Features Make sure to enable the " " option. This ensures that Giscus widget is loaded only when the visitor scrolls down to the section where the Giscus instance is located on the page, typically near the bottom.Enabling this option can enhance the visitor experience. Load the comments lazily : Select a theme that complements the design of your website. If your website already supports dark/light mode, leaving it as the "preferred color scheme" may be convenient. Theme Based on your preferences, the tag will be automatically populated further down the Giscus configuration page. It will be similar to the following example. (Keep it close; we'll use it later in our Next.js app) script <script src="https://giscus.app/client.js"
    data-repo="ayoubkhial/nextjs-giscus-blog"
    data-repo-id="R_kgDOJlwoBA"
    data-category="Announcements"
    data-category-id="DIC_kwDOJlwoBM4CWpCu"
    data-mapping="pathname"
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="1"
    data-input-position="top"
    data-theme="preferred_color_scheme"
    data-lang="en"
    data-loading="lazy"
    crossorigin="anonymous"
    async>
</script> Alternatively, You can retrieve your repository information, such as and , using the instead. repoId categoryId GitHub GraphQL API Explorer Setup Giscus in your next.js blog Before creating the component, let's add some environment variables that store some of the repository data. If you're using one repository for each environment, you may consider adding the following variables to your file: Comments next.config.js const nextConfig = {
    env: {
        COMMENTS_REPO: 'ayoubkhial/nextjs-giscus-blog',
        COMMENTS_REPO_ID: 'R_kgDOJlwoBA',
        COMMENTS_CATEGORY: 'Announcements',
        COMMENT_CATEGORY_ID: 'DIC_kwDOJlwoBM4CWpCu',
    },
};

module.exports = nextConfig; Update the values with your repository information. Feel free to add any variables you require to be dynamic based on your environments. If you prefer a single repository for all your environments, you can directly utilize the variables in your component without storing them. Now, let's create a component where we wrap the script provided by Giscus. First, create a new file (or , if you're using Typescript) under the folder (or any folder you use to store your shared components). Comments comments.js .jsx .tsx components In fact, there are two methods to inject the into the HTML. Let's begin with the more generic approach. script DOM 'use client';

import { useEffect } from 'react';

const Comments = ({ repo, repoId, category, categoryId }) => {
    useEffect(() => {
        const script = document.createElement('script');
        const commentsDiv = document.getElementById('post-comments');
        script.async = true;
        script.setAttribute('src', 'https://giscus.app/client.js');
        script.setAttribute('data-repo', repo);
        script.setAttribute('data-repo-id', repoId);
        script.setAttribute('data-category', category);
        script.setAttribute('data-category-id', categoryId);
        script.setAttribute('data-mapping', 'pathname');
        script.setAttribute('data-strict', '0');
        script.setAttribute('data-reactions-enabled', '1');
        script.setAttribute('data-emit-metadata', '0');
        script.setAttribute('data-input-position', 'top');
        script.setAttribute('data-theme', 'preferred_color_scheme');
        script.setAttribute('data-lang', 'en');
        script.setAttribute('data-loading', 'lazy');
        script.setAttribute('crossorigin', 'anonymous');
        try {
            commentsDiv.appendChild(script);
        } catch (error) {
            console.error('Error while rendering giscus widget.', error);
        }
    }, []);

    return (
        <div id="post-comments">
            <h2>Comments</h2>
        </div>
    );
};

export default Comments; Since we use browser features like and , you must mark the component as a component. React Hooks DOM client We can obtain the same outcome by utilizing the , a wrapper for the identical script. This approach appears more streamlined and seamlessly integrates with the React ecosystem. Giscus React component First, you need to install package: @giscus/react # Replace "npm" with your preferred package manager.
npm i @giscus/react Then change the component to use this package instead: Comments 'use client';

import Giscus from '@giscus/react';

const Comments = ({ repo, repoId, category, categoryId }) => {
    return (
        <Giscus
            repo={repo}
            repoId={repoId}
            category={category}
            categoryId={categoryId}
            mapping="pathname"
            reactionsEnabled="1"
            emitMetadata="0"
            inputPosition="top"
            theme="preferred_color_scheme"
            lang="en"
            loading="lazy"
        />
    );
};

export default Comments; The component accepts our environment variables as parameters. Since we're using a client component, we don't have direct access to those variables; therefore, we need to pass them when invoking this component fromthe component, which is a server component. You can access the environment variables in a server component through . Here's an example of what it may look like: Comments BlogPost process.env import Comment from '@/components/comment';
import dynamic from 'next/dynamic';

export default function BlogPost({ params }) {
    const { slug } = params;

    const Article = dynamic(() => import(`../../../content/${slug}.js`), {
        loading: () => <p>Loading...</p>,
    });
    const repo = process.env.COMMENTS_REPO;
    const repoId = process.env.COMMENTS_REPO_ID;
    const category = process.env.COMMENTS_CATEGORY;
    const categoryId = process.env.COMMENTS_CATEGORY_ID;
    return (
        <main>
            <div className="container">
                <article className="blog__content">
                    <Article />
                </article>
                <Comment repo={repo} repoId={repoId} category={category} categoryId={categoryId} />
            </div>
        </main>
    );
} Instead of using files to store the post content in the content folder, it is generally preferred and customary to utilize format for storing your content. I'm using the here for simplicity. jsx MDX jsx During the build time, will inject values into the variables. However, it is important to note that you cannot utilize destructuring to access them due to the nature of . If you opt for the traditionalapproach of storing environment variables in a file, you can utilize destructuring to access them. Next.js Webpack .env . Read more on next.js documentation Based on your system's theme, the final result will be displayed in either dark or light mode. Feel free to experience it live in the comment section of . this article Advanced configuration Content Security Policy If you have a strict , you will encounter a " " error in your browser. To fix that, you must modify it to include within your policy's section. Content Security Policy violation of Content Security Policy giscus.app frame-src const ContentSecurityPolicy = `
    default-src 'self' vercel.live;
    script-src 'self' 'unsafe-eval' 'unsafe-inline' vercel.live vitals.vercel-insights.com;
    style-src 'self' 'unsafe-inline';
    img-src * blob: data:;
    media-src 'none';
    frame-src giscus.app;
    connect-src *;
    font-src 'self';
`;

const securityHeaders = [
    {
        key: 'Content-Security-Policy',
        value: ContentSecurityPolicy.replace(/\n/g, ''),
    },
    // Other security headers
    // ...
];

const nextConfig = {
    env: {
        COMMENTS_REPO: 'ayoubkhial/nextjs-giscus-blog',
        COMMENTS_REPO_ID: 'R_kgDOJlwoBA',
        COMMENTS_CATEGORY: 'Announcements',
        COMMENTS_CATEGORY_ID: 'DIC_kwDOJlwoBM4CWpCu',
    },
    headers() {
        return [
            {
                source: '/(.*)',
                headers: securityHeaders,
            },
        ];
    },
};

module.exports = nextConfig; Alternatively, you can add it as a fallback within the section. default-src Giscus configuration file You can configure two more options for your . For that, create a file under the root directory. giscus.app giscus.json {
    // Change the default comment ordering by configuring giscus.app
    // default: oldest
    "defaultCommentOrder": "newest",

    // restrict from which websites people can load your comments (a security layer)
    "origins": ["https://www.ayoubkhial.com"],
    // or use a regular expression instead
    "originsRegex": ["https?://([a-z0-9]+[.])ayoubkhial[.]com"]
} Read more about Giscus advanced features on the . Advanced Usage page Conclusion Giscus provides a neat and reliable solution for managing your blog comments, eliminating the need to maintain your commenting system. It's a perfect fit, particularly for tech blogs 💎. You can find the complete code source in ; feel free to give it a star ⭐️. this repository Also published . here

How to Add Reactivity to Your Next.js Blog Using Giscus

What you will be building, see the and . demo Sepolia Testnet git repo Introduction If you're looking to create an innovative platform that motivates users to share their knowledge and skills, this tutorial on developing an Answer-to-Earn platform using React, Solidity, and could be just what you need. CometChat This tutorial combines blockchain technology, real-time communication, and user-generated content to create an interactive platform that rewards users for their contributions and encourages engagement and cooperation. Whether you're a seasoned developer or a beginner, this step-by-step guide will help you bring your vision to life and transform the way people share information. So why not begin building your own Answer-to-Earn platform today and revolutionize learning and information sharing? By the way, to learn how to build a Web3 app from scratch. I also offer a wide range of services, be it private tutorship, hourly consultancy, other development services, or web3 educational material production, you can . Subscribe to my YouTube channel book my services here Now, let’s jump into this tutorial. Prerequisites You will need the following tools installed to build along with me: Nodejs (Important) Ethers js Hardhat Yarn Metamask React Tailwind CSS CometChat SDK Installing Dependencies Clone the starter kit and open it in VS Code using the command below: git clone https://github.com/Daltonic/tailwind_ethers_starter_kit <PROJECT_NAME>
cd <PROJECT_NAME> https://gist.github.com/covelitein/b35b44e4cff299fc668073ce703537e3?embedable=true Now, run on the terminal to have all the dependencies for this project installed. **yarn install** Configuring CometChat SDK Follow the steps below to configure the ; at the end, you must save these keys as an environment variable. CometChat SDK Head to Dashboard and create an account. STEP 1: CometChat Log in to the dashboard, only after registering. STEP 2: CometChat From the dashboard, add a new app called STEP 3: A2E Select the app you just created from the list. STEP 4: From the Quick Start copy the , , and , to your file. See the image and code snippet. STEP 5: APP_ID REGION AUTH_KEY .env Replace the placeholder keys with their appropriate values. REACT_COMET_CHAT REACT_APP_COMETCHAT_APP_ID=****************
REACT_APP_COMETCHAT_AUTH_KEY=******************************
REACT_APP_COMETCHAT_REGION=** The file should be created at the root of your project. .env Configuring the Hardhat script At the root of this project, open the file and replace its content with the following settings. hardhat.config.js https://gist.github.com/covelitein/f9b3d2c8012061d786980e0dda2fdc1e?embedable=true The above script instructs hardhat on these three important rules. : This block contains the configurations for your choice of networks. On deployment, hardhat will require you to specify a network for shipping your smart contracts. Networks : This describes the version of the compiler to be used by hardhat for compiling your smart contract codes into and . Solidity bytecodes abi : This simply informs hardhat of the location of your smart contracts and also a place to dump the output of the compiler which is the ABI. Paths Configuring the Deployment Script Navigate to the scripts folder and then to your file and paste the code below into it. If you can't find a script folder, make one, create a file, and paste the following code into it. deploy.js deploy.js https://gist.github.com/covelitein/5b4cdd0b11fe2759184ac9da79ce9b94?embedable=true When run as a Hardhat deployment command, the above script will deploy your specified smart contract to the network of your choice. Check out this video to learn how to properly set up a web3 project with ReactJs. https://www.youtube.com/watch?v=-q_6CyGNEDw&embedable=true The Smart Contract File Now that we've completed the initial configurations, let's create the smart contract for this build. Create a new folder called in your project's directory. **contracts** **src** Create a new file called within this contracts folder; this file will contain all of the logic that governs the smart contract. **A**``**nswer2Earn.sol** Copy, paste, and save the following codes into the file. See the complete code below. **A**``**nswer2Earn.sol** https://gist.github.com/covelitein/c347e96adefe2783b2038e37ab377789?embedable=true I have a book to help your master the web3 language (Solidity), . grab your copy here Now, let's go over some of the details of what's going on in the smart contract above. We have the following items: Structs This contains necessary information about every question asked on the platform. QuestionStruct: This carries information about every comment on our platform. CommentStruct: State Variables This keeps track of the deployer of the contract. Owner: This holds the platform’s percentage fee on every payment made on the platform. platformCharge: This stores the number of questions that have not been deleted from the platform. totalQuestion: Mappings This checks if a question exists or has not been deleted from the platform. questionExists: This holds the total comments of a particular question. commentsOf: This is used to initialize the state of the smart contract variables and other essential operations. In this example, we assigned the deployer of the smart contract as the owner. Constructor Events and Modifiers This logs out the information of every action carried out on the platform. Action: This prevents every other user except the owner from accessing some functions in the platform. ownerOnly: Question Functions This function takes a bounty question from a user and makes it available for others to compete for the best answer. addQuestion: This function is used to edit the question supplied by the owner of the question. updateQuestion: This function is used to delete the question supplied by the owner of the question. deleteQuestion: This function is responsible for displaying all questions in the platform. The question must already be existing and is not deleted. showQuestions: This function returns a single question by its unique Id. showQuestion: This function returns true/false if a user owns a question. isQuestionOwner: Comment Functions This function allows users to supply an answer to a particular question in hopes of winning the prize on the question. addComment: This function is used to edit an answer provided that the caller is the owner of the answer/comment. updateComment: This function is used to delete a comment provided that the caller is the owner of the answer/comment. deleteComment: This function returns all comments/answers to a particular question. getComments: This returns a single comment for a particular question on the platform. getComment: This function returns true/false if a user owns a comment. isCommentOwner: Funds functions This function is used by a question owner to pay the respondent of the most preferred answer. payBestComment: This function is used for requesting a refund by a question owner provided that answers have not been submitted yet. refund: This function is used internally to make payments to the address provided. payTo: This function is used to change the platform’s fee. changeFee: With all the above functions understood, copy them into a file named in the contracts folder within the src directory. **Answer2Earn.sol** Next, run the commands below to deploy the smart contract into the network. yarn hardhat node # Terminal #1
yarn hardhat run scripts/deploy.js --network localhost # Terminal #2 If you need further help configuring Hardhat or deploying your Fullstack DApp, watch this video. https://www.youtube.com/watch?v=hsec2erdLOI&embedable=true Developing the Frontend Now that we have our smart contract on the network and all of our artifacts (bytecodes and ABI) generated, let's get the front end ready with React. Components In the src directory, create a new folder called to house all of the React components for this project. **components** Header Component The Header component includes the platform logo, a search bar, and a button with the connected account address. See the code below. https://gist.github.com/covelitein/e7fe00c91f275424df806bbd1b4661b4?embedable=true QuestionTitle Component This component includes a header, a button for asking questions, and information on all other questions. Here is the code: https://gist.github.com/covelitein/97b905592fa9edc1d8edf986c85d897f?embedable=true AddQuestion Component This is a modal that lets users create questions on the platform. To successfully submit a question, users will need to provide a title, bounty prize, tag, and question description. Here are the relevant codes: https://gist.github.com/Daltonic/f93f9ac7294a229eb14bcc7024e07ea5?embedable=true QuestionSingle Component This component includes question details such as the question owner and prize. https://gist.github.com/covelitein/0b223744609cb90e32c9fc59540bfda5?embedable=true QuestionComments Component This code shows the user's comments or answers to the question owner. https://gist.github.com/Daltonic/2815c9b66b439fc56954bc7a3838c505?embedable=true AddComment Component This component allows users to answer a specific question through an interface. See the code below: https://gist.github.com/covelitein/6e858cb22841b059ef003b05e53f2db3?embedable=true UpdateQuestion Component This component allows the question owner to make edits to their question. It is a modal component that applies adjustments. Here's the code: https://gist.github.com/covelitein/c470f2588a96ee800f4fd38464702a30?embedable=true UpdateComment Component This code allows a user to edit comments when answering a question, but ownership will still be checked. https://gist.github.com/covelitein/525aaeaf2cf564feae03d920f21c36d1?embedable=true DeleteQuestion Component This component asks for confirmation from the question owner before deleting a question, and it is designed as a modal component. Please refer to the code below. https://gist.github.com/covelitein/7aa8bbaebfa377dfff88a22fdf3f64c7?embedable=true DeleteComment Component This component asks comment owners for confirmation before deleting comments and is modal. The accompanying code is shown below. https://gist.github.com/covelitein/3b654455e73fbf73027bdbeee34cecfd?embedable=true ChatModal Component This modal component makes use of cometChat SDK for handling chats between users.
See the code below: https://gist.github.com/covelitein/1d336826a63f90b253dea3bb576f0bf7 AuthChat Component This component handles user authentication (signup and login) before allowing them to chat. See the code below: https://gist.github.com/covelitein/7bad7ce629c722f551f58afdc518d343?embedable=true ChatCommand Component This component lets question owners create a group chat for answerers to join and earn rewards. Code: https://gist.github.com/Daltonic/642a7ff5eca6fa3231a5f695019270e9?embedable=true Views Create the folder inside the directory and sequentially add the following pages within it. views src HomePage This component creates a visually appealing interface by merging the and components. Please refer to the code below for details. QuestionTitle QuestionSingle https://gist.github.com/covelitein/5dea54179a566f82904e62b0103a82dd?embedable=true Question Page This page has many components for commenting, paying out, and chatting. See the code below. https://gist.github.com/covelitein/e20e420452fd514157dda1a6040e9f36?embedable=true The App.jsx file We'll look at the file, which bundles our and .\ App.jsx components pages https://gist.github.com/covelitein/8b50f02f8457d36547fe9532ef99263d?embedable=true Other Essential Services The services listed below are critical to the smooth operation of our application. The application relies on critical services, including the “ ” which uses the library to manage the application's state. To set up the Store Service, create a " " folder within the "src" folder and create an " " file within it, then paste and save the provided code. The Store Service Store Service react-hooks-global-state store index.jsx https://gist.github.com/Daltonic/9312a0d5c790e591256179447915807f?embedable=true Create a folder called " " inside the " " folder. Within the " " folder, create a file named " " and save the provided code inside the file. The Blockchain Service services src services blockchain.jsx https://gist.github.com/covelitein/9f2079c646eae64d4311173323ebcb99?embedable=true The Chat Service Create a file named " " within the " " folder and copy the provided code into the file before saving it. chat.jsx services https://gist.github.com/covelitein/bc018a004e49de458f8be4b85fb3fb09?embedable=true Now update the index entry file with the following codes. The Index.jsx file https://gist.github.com/covelitein/cd1db63952c2dde8a133ea9cd1e7ca44?embedable=true To start the server on your browser, run these commands on two terminals, assuming you have already installed Metamask. # Terminal one:
yarn hardhat node

# Terminal Two
yarn hardhat run scripts/deploy.js
yarn start Running the above commands as instructed will open your project on your browser. And there you have it for how to build a blockchain voting system with React, Solidity, and . CometChat If you're confused about web3 development and want visual materials, here's one of my videos that will teach you how to create an NFT Minting website. https://www.youtube.com/watch?v=QN3wb_mXBjY&embedable=true Conclusion In conclusion, the decentralized web and blockchain technology are here to stay, and creating practical applications is a great way to advance your career in web3 development. The tutorial showed how to create an answer-to-earn system using smart contracts to facilitate payments, along with the CometChat SDK for group discussions. If you are ready to dive deeper into web3 development, . Or to speed up your web3 learning process. watch my free videos on my YouTube channel book your private web3 classes with me That being said, I'll see you next time, and have a wonderful day! About the Author Gospel Darlington is a full-stack blockchain developer with years of experience in the software development industry. 6+ By combining Software Development, writing, and teaching, he demonstrates how to build decentralized applications on EVM-compatible blockchain networks. His stacks include , , , , , , , , and more. JavaScript React Vue Angular Node React Native NextJs Solidity For more information about him, kindly visit and follow his page on , , , or his . Twitter Github LinkedIn website

How to Build an Answer-to-Earn Platform with React, Solidity and CometChat

In today’s world, every business is looking for ways to take advantage of new technologies and stay competitive. Data extraction also knows as data scraping or web scraping enables to access big data in an automated method. The main applications of web scraping include price intelligence, lead generation, and market research. Mainly, web scraping is practiced by businesses that create their marketing and development strategies based on the vast amount of web data. So, once we understand what is web-scraping and why it is useful, let’s see how we can navigate through multiple pages of a site and scrape numerous data by using Selenium in Python. Before starting, go through the following instructions on the installations of required packages: 1) Python: We are going to use Python 3.0 2) Selenium package: To install Selenium package run the following command pip install selenium 3) Chrome driver: Install the latest version of chrome driver from . Note that for all this you need Google Chrome to be installed on your PC. here The first thing that we need to do before scraping is to understand the structure of the webpage. Our goal is to scrape - a car forum. People post their reviews on different cars in the forum and make car buying decisions. Edmunds.com The topic that we are going to scrape will be entry-level luxury car brands. We’ll scrape user id and comments and export them into a CSV file for further analysis. Let’s start by importing the important packages #Importing packages selenium webdriver pandas pd from import import as Now we’ll create a new instance of Google Chrome to open the required URL. driver = webdriver.Chrome( ) 'Path in your computer where you have installed chromedriver' Then we’ll access Google Chrome and open the . website driver.get( ) 'https://forums.edmunds.com/discussion/2864/general/x/entry-level-luxury-performance-sedans/p702' It’s time to inspect 3 items (user id and comment) and understand how to extract them. User id: Inspecting the user id, we can see the highlighted text represents the XML code for . @id The XML path (XPath) for the user id is coming below. Note, that the XML path contains a comment id, which uniquely denotes each comment on the website. //*[@id=”Comment_5561090"]/div/div[2]/div[1]/span[1]/a[2] Look at the picture above and see that XPath contains the user id ‘dino001’. So, how do we extract the values inside a XPath? Selenium has a function called “find_elements_by_xpath”. We’ll pass the XPath into this function and get a selenium element. Then, we can extract the text inside our XPath using the ‘text’ function. In our case, the text is basically the user id (‘dino001’). userid_element = driver.find_elements_by_xpath( )[ ]
userid = userid_element.text '//*[@id="Comment_5561090"]/div/div[2]/div[1]/span[1]/a[2]' 0 Comments: Now, let’s understand how to extract the comments of each user. Below you may find the XPath for the user comment //*[@id="Comment_5561090"]/div/div[3]/div/div[1] Once we have the comment id in our XPath we can extract the comment from the above XPath as we did in the case of the user id. user_message = driver.find_elements_by_xpath( )[ ]
comment = user_message.text '//*[@id="Comment_5561090"]/div/div[3]/div/div[1]' 0 Thus, we already know how to scrape unique elements from a web page. Now let’s explore how to extract these items for 5000 users. As mentioned above, we’ll use the comment ids, which are unique for each comment. If we see the XPath for the entire comment block, we see that it has a comment id associated with it. //*[@id="Comment_5561090"] The following code snippet will help us extract all the comment ids on our web page. We’ll again use the function ‘find_elements_by_xpath’ on the above XPath and extract the ids from the ‘id’ attribute. ids = driver.find_elements_by_xpath( )     comment_ids = [] i ids:
comment_ids.append(i.get_attribute( )) "//*[contains(@id,'Comment_')]" for in 'id' The above code will provide us with a list of all the comment IDs from the web page. And now it is time to bring all this together in one code to extract 5000 comments. We can extract user ids and comments for each user on the web page by looping through all the comment ids we found in the previous code. Below is the code snippet to extract all comments: driver = webdriver.Chrome( )
driver.get( )
comments = pd.DataFrame(columns = [ , ]) 
ids = driver.find_elements_by_xpath( )
comment_ids = [] i ids:
    comment_ids.append(i.get_attribute( )) x comment_ids:
    #Extract user ids each user on a page
    userid_element = driver.find_elements_by_xpath( + x + )[ ]
    userid = userid_element.text
    #Extract Message each user on a page
    user_message = driver.find_elements_by_xpath( + x + )[ ]
    comment = user_message.text
    #Adding userid and comment each user a dataframe    
    comments.loc[len(comments)] = [userid,comment] 'C:/Users/bandi/Desktop/Text Analytics/TA Session/chromedriver_win32/chromedriver' 'https://forums.edmunds.com/discussion/2864/general/x/entry-level-luxury-performance-sedans/p702' 'user_id' 'comments' "//*[contains(@id,'Comment_')]" for in 'id' for in from '//*[@id="' '"]/div/div[2]/div[1]/span[1]/a[2]' 0 for '//*[@id="' '"]/div/div[3]/div/div[1]' 0 for in If you check our URL has page numbers, starting from 702. So, we can go to previous pages by simply changing the page numbers in the URL to extract more comments until we get the desired number of comments. That's how you scrape a website using Selenium in Python and obtain large amounts of data. After this, you can carry out multiple unstructured data analytics and find interesting trends, sentiments, etc. using this data.

Scraping A Website with Python and Selenium: A How-To Guide

Aggregates are the heart of your system. They hold domain logic and are responsible for emitting events that will eventually make your data consistent across multiples data projections and bounded contexts. Because aggregates are so important, it is crucial to keep them small and easy to understand, but how to this when the domain gets bigger and bigger? In this article, I will show you a way to reduce complexity from your aggregates and make them scale better. Write-side domain overview Before getting started, let review how commands are executed and turned into events. After receiving the command sent by the user, the command handler invokes the repository to load the aggregate state in memory. Then, the command is executed on the aggregate which emits either domain events or failures. Finally, those events or failures are persisted using the repository. e.g. [👤 Coder]
  -> [✉️ Comment issue command]
  -> [📫 Comment issue handler]
  -> [🍇 Issue aggregate]
  -> [⚡️ Issue commented event] First attempt In the first place, I will show you briefly how the write-side domain was implemented in a real-world project a worked on. Then, we will discuss the scaling issues of this solution and how it can be improved to keep your aggregates clean. Here is how it looks: : { {
    IssueId = issueId;
    Message = message;
  } Guid IssueId { ; } Message { ; }
} public class CommentIssue ICommand ( ) public CommentIssue Guid issueId, message string public get public string get : < >
{ IRepository<Issue> _repository; => _repository = repository; { issue = _repository.Find(command.IssueId); issue.Comment(command.message); _repository.Save(issue);
  }
} public class CommentIssueHandler ICommandHandler CommentIssue private readonly ( ) public CommentIssueHandler IRepository<Issue> repository ( ) public void Handle CommentIssue command // 1. Loads the aggregate in memory. var // 2. Invokes the aggregate method. // 3. Saves the aggregate. : < , >
{ ISet<IssueComment> _comments = HashSet<IssueComment>(); { } IEnumerable<IssueComment> Comments => _comments; { ( .IsNullOrWhiteSpace(message)) ; Emit( IssueCommented( IssueComment(message)));
  } { (@ )
    { IssueCommented e: Apply(e); ;
    }
  } =>
    _comments.Add( IssueComment(@ .CommentId, @ .Message));
} public class Issue AggregateRoot Issue Guid private readonly new ( ) : ( ) public Issue Guid id base id public ( ) public void Comment message string if string return // `Emit()` internally invokes `Apply()` to avoid code duplication. new new // All other command related methods go here e.g. // `public void Edit() { }` // `public void Close() { }` // `public void Unsubscribe() { }` ( ) protected override void Apply IDomainEvent @ event // This could be done using reflexion, but be aware of performance issues. switch event case break ( ) private void Apply IssueCommented @ event new event event : { {
    CommentId = comment.Id;
    Message = comment.Message;
  } Guid CommentId { ; } Message { ; }
} public class IssueCommented IDomainEvent ( ) public IssueCommented Comment comment public get public string get As you can see, using this technique, the aggregate grows for every command we add. Because of this, it is easy to imagine how fast this newly created aggregate will turn into a hard to maintain mess as our domain grows. Also, all command handlers will do the exact same things i.e.: Loads the aggregate in memory. Invokes the aggregate method. Saves the aggregate. Let see how we can fix this! Refactored solution The trick is to let the commands and events execute/apply themselves! : < >
{ {
    IssueId = issueId;
    Message = message;
  } Guid IssueId { ; } Message { ; } IEnumerable<IDomainEvent<Issue>> ExecuteOn(Issue aggregate)
  { ( .IsNullOrWhiteSpace(Message)) ; ;
  }
} public class CommentIssue ICommand Issue ( ) public CommentIssue Guid issueId, message string public get public string get // Commands now know how to execute themselves. public if string yield break return new ( )) yield IssueCommented new IssueComment(IssueId, Message : < >
{ {
    CommentId = comment.Id;
    Message = comment.Message;
  } Guid CommentId { ; } Message { ; } =>
    aggregate.Comments.Add( IssueComment(CommentId, Message));
} public class IssueCommented IDomainEvent Issue ( ) public IssueCommented IssueComment comment public get public string get // Events now know how to apply themselves. ( ) public void ApplyTo Issue aggregate new By doing this, we are able to implement a new method in the aggregate base class which will execute a command and apply the returned events. Execute() Also, it makes it possible to generalize the method and move it up to the aggregate base class. Apply() < , > : < , >, < > : < , >
{ List<IDomainEvent<TSelf>> _uncommitedEvents = List<IDomainEvent<TSelf>>(); => @ .ApplyTo((TSelf) ); { events = command.ExecuteOn((TSelf) );
    _uncommitedEvents.AddRange(events); ( @ events) Apply(@ );
  }
} public abstract class AggregateRoot TSelf TId Entity TSelf TId IAggregateRoot TId where TSelf AggregateRoot TSelf TId private readonly new // ... ( ) public void Apply IDomainEvent<TSelf> @ event event this ( ) public void Execute ICommand<TSelf> command var this foreach var event in event Now that we added the method we can invoke it right away from the command handler. Execute() Also, you can see below, our command handler is now named instead of . Why is that? This is because we simplified enough that all command handlers will be exactly the same so we can use the same command handle for all commands. IssueCommandsHandler CommentIssueHandler : < , >
{ IRepository<Issue, Guid> _repository; => _repository = repository; { issue = _repository.Find(command.IssueId); issue.Execute(command);
    _repository.Save(issue);
  }
} public class IssueCommandsHandler ICommandHandler CommentIssue Issue private readonly ( ) public IssueCommandsHandler IRepository<Issue, Guid> repository ( ) public void Handle CommentIssue command var // The command can now be executed direcly on the aggregate. Our objective was to clean up our aggregate and as you can see below there is nothing left in it so I think we made it! : < , >
{ { } ISet<IssueComment> Comments { ; } = HashSet<IssueComment>(); } public class Issue AggregateRoot Issue Guid ( ) : ( ) public Issue Guid id base id public get new // Only common validations/business rules go here! Note that I exposed through the interface for simplicity purposes. In a real-world project, consider adding a custom collection class such as to hold custom business rules. Comments.Add() ISet IssueComments The source code can be found . here Resources by Nick Chamberlain Implementing an Event Sourced Aggregate by Nick Chamberlain Command Handlers Previously published at https://dev.to/maximegel/cqrs-scalable-aggregates-731

Scalable Aggregates: Reducing Complexity in Command Handlers

Welcome back! , we looked at a very "low-level" way to interact with a relational database by sending it raw SQL strings and retrieving the results. We created a very simple Express application that we can use as an example and deployed it on Heroku with a Postgres database. In the first part of this series In this part, we're going to examine a few libraries which build on top of that foundation, adding layers of abstraction that let you read and manipulate database data in a more "JavaScript-like" way. So far, we've seen how to send raw SQL to the database; statements like: SELECT * FROM users If we wanted to get comments by a specific user, say the user whose id is 1, we might use something like this: SELECT * FROM comments WHERE user_id = 1 There's nothing wrong with interacting with your database in this way, but it can feel a bit cumbersome, and it requires you to keep "shifting gears" mentally. You think about your JavaScript code in one way, but when you need to think about the data in your database, you have to start thinking in SQL. The purpose of the rest of the database libraries we're going to consider is to let you treat the data in your database more like the JavaScript objects and code in your application. "Under the hood" it's all SQL, but you won't need to care much about that unless you want to. Knex — Abstracting Away SQL The first library we'll talk about is . The documentation page describes Knex as a "query builder", and its purpose is to provide a layer of abstraction on top of raw SQL. Knex Installing Knex Knex requires pg (or MySQL if you're using a MySQL database). We already have pg installed, so we just add knex like this: npm install knex git add package.json package-lock.json git commit -m "Install the knex library" Using Knex The NPM page for knex describes it as a "query builder." Knex abstracts SQL to a certain extent, but not very far. We still need to understand the underlying SQL, but we can write it in a more JavaScript-like syntax, rather than having to slice and dice SQL strings. More importantly, we can use composition to chain knex terms in a way that is much more comfortable for JavaScript programmers. So, when we used pg, we had this statement: const result = await db.query('SELECT * FROM users'); When we use knex, we can write this: const result = await db.select().from('users'); That might not look like much of a difference, but because of the way we can compose knex function calls, we can also do things like this: const result = await db.select().from('users').limit(5).offset(8); Here, we're getting 5 user records, starting at position 8 in the total set of all possible user records that match our query. You can see the full set of options available in the . knex documentation Let's change our Express app to use knex to display some records from our database. First, in index.js replace these two lines: { Pool } = ( ); conn = Pool({ : process.env.DATABASE_URL }); const require 'pg' const new connectionString ...with this: db = ( )({ : , : process.env.DATABASE_URL 
}); const require 'knex' client 'pg' connection Then, change the implementation of to this: listUsers { { result = db.select().from( ).limit( ).offset( ); results = { : (result) ? result : };

    res.render( , results );
  } (err) { .error(err); 

    res.send( + err); 
  }

} async ( ) function listUsers req, res try const await 'users' 5 5 const 'users' null 'pages/index' catch console "Error " Our views/pages/index.ejs file can stay exactly the same as before. Commit, push, and deploy: git add index.js git commit -m "Use knex to display user data" git push heroku master When you refresh your browser, you should see user records 6 to 10 on the page. You can see the code with these changes here. Object Relational Mapping (ORM) Knex gives us a way of interacting with our database, which is much more like JavaScript, but we are still required to think in a database-centric way when we need to manipulate data. The next three libraries we're going to talk about are all built on top of knex (which is built on top of pg or MySQL), and are examples of "object relational mapping" or ORM libraries. As the name implies, the purpose of an ORM library is to translate between data in a relational database and JavaScript objects in your application. What that means is, instead of thinking about records in the table when you write your JavaScript code, you can think about user objects. users Objection The first library we'll look at is , which is built on top of knex: objection npm install objection git add package.json package-lock.json git commit -m "Install the objection library" To highlight some of the utility of ORM libraries, we're going to alter our application to display users and their comments. Objection is built on top of knex, so in our index.js file, we have to leave the knex block in place, and add a bit more code (I'm putting everything in the index.js file, to keep things simple. In a real application you would break the code into separate files): const { Model } = require('objection'); Model.knex(db); This gives us a Model class from which we can inherit to define two classes User and Comment. We'll define Comment first: { get tableName() { ; 
  } 
} class Comment extends Model static return 'comments' Our class needs to extend , and must implement a function to tell Objection which database table contains the underlying records. Model tableName The class is similar, but we're going to add some behavior to our class; a function, which we can use in our view template. We're also going to tell Objection that have (i.e. a user owns zero or more comments). In ORM-speak, this is usually described as a "has many relationship" - i.e. a user has many comments. Here's what the code for this looks like: User fullName Users Comments { get tableName() { ; 
  } 

  fullName() { ; 
  } get relationMappings() { { : { : Model.HasManyRelation, : Comment, : { : , : } 
      } 
    }; 
  } 
} class User extends Model static return 'users' return ` ` ${ .first_name} this ${ .last_name} this static return comments relation modelClass join from 'users.id' to 'comments.user_id' We define a relationMappings object inside our User class, with a single key of comments and a value telling Objection that this is a HasManyRelation on the Comment class, where the value of the id column of the users table matches the value of the user_id column of the comments table. Now that we've defined our classes, let's use them in our code. Here's the new implementation of listUsers: { { users = User.query().limit( ); (i users) { user = users[i]; 
       user.comments = User.relatedQuery( ).for(user.id); 
     } results = { : users }; 

     res.render( , results ); 
   } (err) { .error(err); 

     res.send( + err); 
   } 
 } async ( ) function listUsers req, res try const await 5 for in const await 'comments' const 'users' 'pages/index' catch console "Error " Here, we fetch 5 users, then for each of those users, we fetch their comments and assign those to the comments property of our user object. In views/pages/index.ejs we can display our users and their comments like this: Users { %> - { %> < > h1 </ > h1 < > ul < (( ) => % users.map user < > li < %> %= user.id < () %> %= user.fullName </ > li < > ul < (( ) => % user.comments.map comment < > li < %> %= comment.body </ > li < }); %> % </ > ul < }); %> % </ > ul You can see the code with these changes As usual, commit, and push to deploy: here . git add index.js views/pages/index.ejs git commit -m "Show users and comments using Objection" git push heroku master Now, when you reload the page, you should see users and comments. The “N+1 Selects” Problem This code highlights a common problem that people run into when using ORM libraries, known as the "N+1 selects" problem. This is the block of code we used to fetch users and their comments: users = User.query().limit( ); (i users) { user = users[i]; 
  user.comments = User.relatedQuery( ).for(user.id); 
} const await 5 for in const await 'comments' This works, but is very inefficient. First, we fetch 5 users, then for each of those 5 users, we fetch their comments . So, we've made 1 call for the users, then another 5 calls to get the comments. That's 5 calls plus the first 1, i.e. 5+1 or N+1 where N == 5. Hence the "N+1 selects" problem. by making another call to the database Unless your database queries are very complex, the time it takes to make a round-trip call to the database is a lot longer than the time it takes the database to calculate and transmit the results of your queries. So, to keep our applications fast, we need to minimize the number of calls to the database, as much as we can. The code above is the exact opposite of this. For this trivial example, you won't notice any difference, but for real-world applications, the performance hit can be very serious, and cause lots of problems. Fortunately, every ORM library has features that make it easy to avoid this problem (provided you know it's there). Here's how Objection does it; in index.js, replace the code block above with this: const users = await User.query().limit(5).withGraphFetched('comments'); This one line does the same as the code block above, but in a much more database-efficient way. Objection will use the relationship information we provided to figure out how to fetch the user data and the comments data in a single query, and unpack and stitch together the results into the same object structure we built before using our for loop. You can see the code with these changes here. Bookshelf The next ORM library we'll look at is . Bookshelf A lot of the differences between ORM libraries depend on what use-case the library is optimized for. In the case of Bookshelf, it's clearly designed to make it as easy as possible to render paginated lists of data, which is a very common use case in web applications. Let's replace Objection with Bookshelf in our application: npm uninstall objection npm install bookshelf git add package.jsonpackage-lock.json git commit -m "Replace Objection with Bookshelf" In index.js, replace these lines: { Model } = ( ); 
Model.knex(db); const require 'objection' ...with this: bookshelf = ( )(db); const require 'bookshelf' Replace our class definitions with these: Comment = bookshelf.model( , { : }); User = bookshelf.model( , { : , 

  comments() { .hasMany( ); 
  } 
}); const 'Comment' tableName 'comments' const 'User' tableName 'users' // by default, bookshelf infers that the foreign key is 'user_id' return this 'Comment' Our function now looks like this: listUsers { { models = User() 
     .fetchPage({ : , : , : [ ]  
      }); 

    users = []; 

    models.map( { user = m.attributes; comments = m.related( ); 

      user.comments = comments.map( c.attributes); 
      users.push(user); 
    }); results = { : users }; 

    res.render( , results ); 
  } (err) { .error(err); 

    res.send( + err); 
  } 
} async ( ) function listUsers req, res try const await new pageSize 5 page 1 withRelated 'comments' => m const const 'comments' => c const 'users' 'pages/index' catch console "Error " As you can see, the definition of the classes is a bit more concise, but Bookshelf needs a more verbose definition of how to unpack our data to build the users/comments structure. Notice also how the concept of pages of data is built directly into the library's API. The code in views/pages/index.ejs is almost identical (I've removed the fullName function from the User class): Users { %> - { %> < > h1 </ > h1 < > ul < (( ) => % users.map user < > li < %> %= user.id < %> %= user.first_name < %> %= user.last_name </ > li < > ul < (( ) => % user.comments.map comment < > li < %> %= comment.body </ > li < }); %> % </ > ul < }); %> % </ ul You can see the code with these changes . And of course, once again commit and deploy. here git add index.js views/pages/index.ejs git commit -m "Show users and comments using Bookshelf" git push heroku master Sequelize The last library we're going to look at is . Sequelize Sequelize is quite opinionated in the way it expects your data to be structured. If you follow its conventions, you can write less code and allow Sequelize to do a lot of the work for you. In particular, Sequelize has a lot of features to help create tables for you, and by default, it will create them following its own structure and naming conventions. The database we've been using isn't structured in exactly the way Sequelize expects, so we need to add a bit of extra configuration to allow Sequelize to work with it. Installing Sequelize To remove bookshelf and install sequelize, run these commands: npm uninstall bookshelf npm install sequelize git add package.json package-lock.json git commit -m "Replace Bookshelf with Sequelize" Using Sequelize In index.js, replace these lines: db = ( )({ : , : process.env.DATABASE_URL 
}); bookshelf = ( )(db) const require 'knex' client 'pg' connection const require 'bookshelf' ...with these: { Sequelize, DataTypes } = ( ); sequelize = Sequelize(process.env.DATABASE_URL); const require 'sequelize' const new Then, replace the class definitions for User and Comment with this code: User = sequelize.define( , { : { : DataTypes.STRING }, : { : DataTypes.STRING }, : { : DataTypes.STRING } 
  }, 
  { : , : }
); Comment = sequelize.define( , { : { : DataTypes.STRING } 
  }, { : , : }
); 

User.hasMany(Comment, { : }); const 'User' first_name type last_name type email type tableName 'users' timestamps false const 'Comment' body type tableName 'comments' timestamps false foreignKey 'user_id' Note that we passed two objects to . The first object defined our object's properties, and the second contained some metadata. sequelize.define In this case, we told Sequelize that the database table that underpins the User class is called 'users' (by default, Sequelize would infer that the table was called 'Users'), and the tells Sequelize that our table does not have timestamp columns, called createdAt and updatedAt. timestamps: false Sequelize makes it very easy to write code that will create tables for you, and when it does so, it adds these timestamp columns and sets their values accordingly when you write to the database. The is excellent, and has more about this. sequelize documentation The that we pass to hasMany is another of the places where we have to tell Sequelize we're not following its conventions. It expects (and would create for us) a column called UserId to link comments to users. foreignKey: 'user_id' Inside our function, we can replace all of this code: listUsers models = User() 
  .fetchPage({ : , : , : [ ] 
  }); 

users = []; 

models.map( { user = m.attributes; comments = m.related( ); 

  user.comments = comments.map( c.attributes);  
  users.push(user); 
}); const await new pageSize 5 page 1 withRelated 'comments' => m const const 'comments' => c ...with this single line: users = User.findAll({ : Comment }); const await include We also have to make one tiny change in views/pages/index.ejs. Replace this line: <% user.comments.map((comment) => { %> ...with this (the difference is user.Comments instead of user.comments): <% user.Comments.map((comment) => { %> You can see the code with these changes here. git add index.js views/pages/index.ejs git commit -m "Show users and comments using Sequelize" git push heroku master So Which Option Is Best? So there you have it — 5 ways you can query a relational database from your JavaScript application. We started with raw SQL via the pg/mysql library, then looked at the knex query builder, before moving on to three ORM libraries; objection, bookshelf, and sequelize. So, which is the right choice for your application? As always, it depends. There's nothing you can do with an ORM library that you can't do using a query builder or even raw SQL. Since everything works using SQL "under the hood". That's not surprising. Also, even if you decide to use an ORM, most libraries still give you a way to send raw SQL to your database. So what level of abstraction you use depends on the problem you're trying to solve, and what kind of code you want to focus your attention on. If you're making heavy use of the features of your database, maybe with complex views or stored procedures, you might find it easier to use knex or raw SQL. But, for most web applications it's quite likely that an ORM library will make your life easier by abstracting away the table structure and allowing you to think about your application data as JavaScript objects. If you've decided on ORM, the choice of ORM library to use isn't always clear-cut. The landscape of JavaScript libraries is very dynamic. New libraries are created quite often, and older ones fall out of favor. Here are a few things to think about when making your choice: which Scan through the documentation of the library, and see if it's clear and comprehensive. Then, decide if the way the API is put together makes sense to you. Different libraries use different approaches, and you might find one of them a better fit than others for your requirements and preferences. This is especially true if you are writing code to work with an existing database, or creating your database as you develop your application. Have a look at the community around the library. Is it something a lot of people are actively using? If so, there will probably be plenty of help and advice available if you need it. Some libraries also have extensive plugin ecosystems around them, and it may be that particular plugins make your life much easier. A related issue is the age of the library. If it's been around for a while, it's more likely that common problems have been found and fixed. If it's a relatively new library, you might have to figure more things out for yourself (which might be a good thing if you're someone who loves to play with new, shiny toys and solve puzzles). Performance is more likely to depend on how you use the library than on the library itself. But, if you absolutely, positively must squeeze the last few microseconds of latency out of your application, then working closer to the database using SQL or knex will be a little faster. Be warned that this is usually quite a marginal benefit, and the cost in the maintainability of your code is very likely to be higher than the gain in benchmark performance. Happy querying!

[Tutorial] Top 5 Ways to Query Your Relational Database in JavaScript [Part 2]

You will need Go, and SQLite installed on your machine. Basic knowledge of Go and JavaScript will be helpful. The internet is a breeding ground for all kinds of social activities because it expands the possibilities of communication. In order to keep web applications social and enjoyable, it is important for them to have one or more interfaces for the users to interact through. One such interface is the comment section. The comment section is where users can discuss a subject (post, video, picture) that they have access to. In the past, for a user to see a comment from another user, the user would have to refresh the browser window. However, with realtime comments now we can automatically pull in comments live. This article will cover how we can build realtime commenting using Pusher. By the end of this article, we will have built an application that looks like this: Requirements To follow along with this article, you will need the following: Go (version >= 0.10.x) installed on your computer. Heres how you can . install Go SQLite (v3.x) installed on your machine. . Installation guide Basic knowledge of the Go programming language. Basic knowledge of JavaScript (ES6). Basic knowledge of Vue.js. Getting a Pusher Channels application The first step will be to get a Pusher Channels application. We will need the application credentials for our realtime features to work. Go to the Pusher website and create an account. After creating an account, you should create a new application. Follow the application creation wizard and then you should be given your application credentials, we will use this later in the article. Now that we have our application, let’s move on to the next step. Setting up the codebase Let’s start by navigating into the directory located in the . Then we’ll create a new directory for our app there. src $GOPATH $ cd $GOPATH/src$ mkdir go-realtime-comments$ cd go-realtime-comments Create a file in this directory. comments.go Before we write code, we need to import a few Go packages that will help run our projects. We will install the and the . Run the following commands to pull in the packages: Echo framework SQLite packages $ go get github.com/labstack/echo$ go get github.com/labstack/echo/middleware$ go get github.com/mattn/go-sqlite3 ⚠️ If you use Windows and you encounter the error ‘cc.exe: sorry, unimplemented: 64-bit mode not compiled in ‘, then you need a Windows gcc port, such as https://sourceforge.net/projects/mingw-w64/ . Also see this GitHub issue . With your favorite editor, open the file and paste in the following lines of code: comments.go package main import (// "database/sql" "github.com/labstack/echo"  
"github.com/labstack/echo/middleware"

// \_ "github.com/mattn/go-sqlite3" ) Configuring the database and routes Every Go application must have a function. This is where the execution of the application will start from, so let’s create our function: main main In the file, add the following below the imports: comments.go func main() { // Echo instance  
e := echo.New()

// Middleware  
e.Use(middleware.Logger())  
e.Use(middleware.Recover())

// Define the HTTP routes  
e.GET("/comments", func(c echo.Context) error {  
    return c.JSON(200, "GET Comments")  
})

e.POST("/comment", func(c echo.Context) error {  
    return c.JSON(200, "POST a new Comment")  
})

// Start server  
e.Logger.Fatal(e.Start(":9000")) } In the main function, we have defined some basic route handler functions, these functions basically return hard-coded text to the browser on request. The last line will start Go’s standard HTTP server using Echo’s start method and listen for requests port 9000. We can test that the application works at this stage by running it and making some requests using . Postman Here is how you can run the application: $ go run ./comments.go We can send HTTP requests using Postman. Here’s a sample GET request using Postman: POST request with Postman: We will create a function that will initialize a database and for that, we need the SQL and SQLite3 drivers. We already added them to the statement so uncomment them. We will also create a function that will migrate the database using a database schema defined inside the function. import Open the file and paste the following code before the function: comments.go main func initDB(filepath string) *sql.DB {db, err := sql.Open("sqlite3", filepath)if err != nil {panic(err)} if db == nil {panic("db nil")}return db} func migrate(db *sql.DB) {sql := `CREATE TABLE IF NOT EXISTS comments(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,name VARCHAR NOT NULL,email VARCHAR NOT NULL,comment VARCHAR NOT NULL);`_, err := db.Exec(sql)if err != nil {panic(err)}} Next, add the following code to the top of the function: main // [...] // Initialize the databasedb := initDB("storage.db")migrate(db) // [...] We can now check that these functions are being called and the database is created during execution by running the application: $ go run comments.go ⚠️ If you were already running the Go application you would need to kill the process using ctrl+c on your keyboard and then restart it to see changes. When the application is run for the first time, a file will be created in the working directory if it did not previously exist. storage.db Setting up the handlers We have tested that our application listens on the specified port 9000 and handles the HTTP requests as we configured it to. However, the current handler functions simply return hard-coded text to the browser so let’s create new handler functions to handle responses to the routes. Create a new folder in the root directory named : handlers $ mkdir handlers$ cd handlers Next, create a file and paste the following: handlers.go package handlers import ("database/sql""go-realtime-comments/models""net/http""github.com/labstack/echo") Now we need to go back to the file and import the handlers package: comments.go import ("go-realtime-comments/handlers" // \[...\] ) In the same file, replace the route definitions from earlier with the ones below: // [...] // Define the HTTP routese.File("/", "public/index.html")e.GET("/comments", handlers.GetComments(db))e.POST("/comment", handlers.PushComment(db)) // [...] Next, paste the following code in the file below the import statement: handlers.go type H map[string]interface{} // GetComments handles the HTTP request that hits the /comments endpointfunc GetComments(db *sql.DB) echo.HandlerFunc {return func(c echo.Context) error {return c.JSON(http.StatusOK, models.GetComments(db))}} func PushComment(db *sql.DB) echo.HandlerFunc {return func(c echo.Context) error {var comment models.Comment c.Bind(&comment)

    id, err := models.PushComment(db, comment.Name, comment.Email, comment.Comment)  
    if err == nil {  
        return c.JSON(http.StatusCreated, H{  
            "created": id,  
        })  
    }

    return err  
} } The function fetches and returns comments from the database while the saves comments to the database and returns a response. GetComments PushComment Setting up the models To create the model package, we need to create a new folder in the root directory of our application: $ mkdir models$ cd models Next, create a file and paste the following code: models.go package models import ("database/sql" \_ "github.com/mattn/go-sqlite3" ) Let’s create a Comment , which is a struct with four fields: type - the ID of the comment. ID - the username of the user who made the comment. Name - the email of the user who made the comment. Email - the comment. Comment In Go, we can add metadata to variables by putting them within backticks. We can use this to define what each field should look like when converted to . This will also help the function know how to map data when registering a new comment. JSON c.Bind JSON Let’s define the structs for and . In the file paste in the following below the imports: Comment CommentCollection models.go type Comment struct {ID      int    `json:"id"`Name    string `json:"name"`Email   string `json:"email"`Comment string `json:"comment"`} type CommentCollection struct {Comments []Comment `json:"items"`} Next, paste in the following code after the structs: func GetComments(db *sql.DB) CommentCollection {sql := "SELECT * FROM comments"rows, err := db.Query(sql) if err != nil {  
    panic(err)  
}

defer rows.Close()

result := CommentCollection{}

for rows.Next() {  
    comment := Comment{}

    err2 := rows.Scan(&comment.ID, &comment.Name, &comment.Email, &comment.Comment)  
    if err2 != nil {  
        panic(err2)  
    }

    result.Comments = append(result.Comments, comment)  
}

return result } The function is responsible for retrieving all the available comments from the database and returning them as an instance of the that we defined. GetComments CommentCollection Next, paste in the following code below the one above: func PushComment(db *sql.DB, name string, email string, comment string) (int64, error) {sql := "INSERT INTO comments(name, email, comment) VALUES(?, ?, ?)"stmt, err := db.Prepare(sql)if err != nil {panic(err)} defer stmt.Close()

result, err2 := stmt.Exec(name, email, comment)  
if err2 != nil {  
    panic(err2)  
}

return result.LastInsertId() } The function adds a new comment to the database. PushComments Building the frontend Next, create a folder in our application’s root directory and create an file inside it. public index.html Open the file and paste in this code: index.html <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href=" " integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"><title>Realtime comments</title><script src=" "></script><script src=" "></script><style> (min-width: 48em) {html {font-size: 18px;}}body {font-family: Georgia, "Times New Roman", Times, serif;color: #555;}h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 400;color: #333;}.blog-masthead {margin-bottom: 3rem;background-color: #428bca;box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);}.nav-link {position: relative;padding: 1rem;font-weight: 500;color: #cdddeb;}.nav-link:hover, .nav-link:focus {color: #fff;background-color: transparent;}.nav-link.active {color: #fff;}.nav-link.active::after {position: absolute;bottom: 0;left: 50%;width: 0;height: 0;margin-left: -.3rem;vertical-align: middle;content: "";border-right: .3rem solid transparent;border-bottom: .3rem solid;border-left: .3rem solid transparent;} (min-width: 40em) {.blog-title {font-size: 3.5rem;}}.sidebar-module {padding: 1rem;}.sidebar-module-inset {padding: 1rem;background-color: #f5f5f5;border-radius: .25rem;}.sidebar-module-inset p:last-child,.sidebar-module-inset ul:last-child,.sidebar-module-inset ol:last-child {margin-bottom: 0;}.blog-post {margin-bottom: 4rem;}.blog-post-title {margin-bottom: .25rem;font-size: 2.5rem;text-align: center;}.blog-post-meta {margin-bottom: 1.25rem;color: #999;text-align: center;}.blog-footer {padding: 2.5rem 0;color: #999;text-align: center;background-color: #f9f9f9;border-top: .05rem solid #e5e5e5;}.blog-footer p:last-child {margin-bottom: 0;}input{width: 45% !important;display: inline-block !important;}textarea {width: 90%;height: 150px;padding: 12px 20px;box-sizing: border-box;border: 2px solid #ccc;border-radius: 4px;background-color: #f8f8f8;resize: none;}textarea:focus, input:focus{outline: none !important;}#comment-section{background: rgb(178, 191, 214);padding: 0.5em 2em; width: 90%;margin: 10px 0;border-radius: 15px;}#comment-section > div > p {color: black;display:inline;}img{border-radius: 50%;float: left;}</style></head><body><div id="app"><header><div class="blog-masthead"><div class="container"><nav class="nav"><a class="nav-link active" href="#">Home</a></nav></div></div></header> https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css https://unpkg.com/axios/dist/axios.min.js https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js @media @media <main role="main" class="container"> <div class="row"> <div class="col-sm-12 blog-main"> <div class="blog-post"><h2 class="blog-post-title">Realtime Comments With Pusher</h2><p class="blog-post-meta">January 1, 2018 by <a href="#">Jordan</a></p><p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported</p><div class="comment-section"><form class="form-signin"><h5 class="comment">Comment</h5><input type="username" ref="username" class="form-control" placeholder="John Doe" required autofocus><input type="email" ref="email" class="form-control" placeholder=" " required><textarea ref="comment"></textarea><button class="btn btn-lg btn-primary" .prevent="sendComment" type="submit">Comment</button></form><br><div id="comment-section" v-for="comment in comments"><div><img src=" " width="65px" height="65px"><p>  {{comment.name}}  < {{comment.email}} ></p><hr></div><p style="color:black">{{comment.comment}}</p></div></div></div></div> Johndoe@gmail.com @click http://merritos.com/img/team/maleTeam.jpg </div> </main> <footer class="blog-footer"><p><a href="#">Back to top</a></p></footer> </div></body></html> Now in the same file, paste the following code before the closing tag of the HTML: body <script>var app = new Vue({el: '#app',data: {comments : []},created: function() {axios.get('/comments').then(response => {this.comments = response.data.items ? response.data.items : []})},methods: {sendComment: function(index) {let comment = {name: this.$refs.username.value,email: this.$refs.email.value,comment: this.$refs.comment.value} axios.post('/comment', comment).then(response => {this.$refs.username.value = '',this.$refs.email.value = '',this.$refs.comment.value = ''})}}})</script> Above we have the Vue.js code for our application and this is a summary of what it does: We instantiate a comments array that will hold all the available comments. In the method, we use to pull in all the comments available from the API and store it in the array. created() Axios comments In the method, we send a request to the API to create a new . sendComment comment We can build our application at this stage and visit , we should see this: http://localhost:9000 $ go run comments.go Our application should display like this: Making comments display in realtime The next thing we need to do is make sure the comments are displayed in realtime. To do this, we need to trigger an event every time a new comment is added. We will do this in the backend using the . Pusher Go library To pull in the Pusher Go library run the following command: $ go get github.com/pusher/pusher-http-go Next, let’s import the library. In our file do the following in the imports statement: models.go package models import (// [...] pusher "github.com/pusher/pusher-http-go" ) In the same file, before the definition, paste in the following code: type // [...] var client = pusher.Client{AppId:   "PUSHER_APP_ID",Key:     "PUSHER_APP_KEY",Secret:  "PUSHER_APP_SECRET",Cluster: "PUSHER_APP_CLUSTER",Secure:  true,} // [...] Here, we have initialized the Pusher client using the credentials from our earlier created app. ⚠️ Replace _PUSHER_APP_*_ keys with your Pusher app credentials. Next, let’s trigger an event every time a comment is saved to the database. Replace the function with the following code: PushComment func PushComment(db *sql.DB, name string, email string, comment string) (int64, error) {sql := "INSERT INTO comments(name, email, comment) VALUES(?, ?, ?)"stmt, err := db.Prepare(sql)if err != nil {panic(err)} defer stmt.Close()

result, err2 := stmt.Exec(name, email, comment)  
if err2 != nil {  
    panic(err2)  
}

newComment := Comment{  
    Name:    name,  
    Email:   email,  
    Comment: comment,  
}

client.Trigger("comment-channel", "new-comment", newComment)

return result.LastInsertId() } In this newer version of the function, we create a object that holds information for the last comment that was saved to the database. Whenever a new comment is created, we will send it to the Pusher channel to be triggered on the event . newComment comment-channel new-comment To receive comments we have to register the in our frontend code. Add this line of code inside the head tag of our HTML in the index.html file: Displaying data in realtime on the client Pusher JavaScript Client <script src="https://js.pusher.com/4.1/pusher.min.js"></script> Next, we will register a Pusher instance in the life cycle hook: created() created: function() {const pusher = new Pusher('PUSHER_APP_KEY', {cluster: 'PUSHER_APP_CLUSTER',encrypted: true}); const channel = pusher.subscribe('comment-channel');

channel.bind('new-comment', data => {  
    this.comments.push(data)  
});

// \[...\] } ⚠️ Replace the _PUSHER_APP_*_ keys with the credentials for your Pusher application In the code above, we are creating a Pusher instance and then subscribing to a channel. In that channel, we are listening for the event. new-comment Now we can run our application: $ go run comments.go We can point a web browser to this address and we should see the application in action: http://localhost:9000 Conclusion In this article, we looked at how to build a realtime comment system using Go, Vue.js, and Pusher Channels. The source code to the application is available on GitHub. This post first appeared on the . Pusher blog

Stories, News & Mentions about COMMENTSOLD

Commentsold’s Stories on HackerNoon