teleren/devto huggingface dataset:
UX Heuristics (Usability) Evaluation Report Template
Tags: ux, usability, heuristics, usabilityreport
Published: 2022-12-13 13:53:49

Are you a UX designer or researcher looking for an efficient way to evaluate and improve your designs? Look no further! This UX Heuristics Evaluation Report template is the perfect tool for you.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aiy90yrn1qdhmkbrkchc.png)

🔗 https://mirelaprifti.gumroad.com/l/ux-heuristics-report

Based on Nielsen and Norman’s (NNg) [10 usability heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/), this template provides a comprehensive and structured approach to evaluating user interfaces. It’s available in both Google Sheets and Airtable, so you can choose the platform that suits you best.

With the UX Heuristics Evaluation Report template, you can:

- **Evaluate your designs** against the 10 usability heuristics;
- **Identify potential problems** and prioritize them for further investigation;
- **Generate detailed reports** to share with your team or clients;
- Easily **track your progress** and improvements over time;
- Effectively **present the findings** of the evaluation.

Don’t waste any more time with cumbersome and unstructured evaluation methods. Get your UX Heuristics Evaluation Report Template today, and start improving your designs with confidence.

---

## Features

- Pre-defined evaluation criteria based on Nielsen and Norman’s 10 usability heuristics;
- Flexible and customizable template that fits your unique needs;
- Compatible with Google Sheets and Airtable.



## What’s included

1. UX Heuristics Evaluation Report template in NNg format (Google Sheets and Airtable versions);
2. Report Presentation Template (Google Slides and PDF);
3. Updates and support.

Get your UX Heuristics Evaluation Report template today and start improving the usability of your websites and apps!

🔗 https://mirelaprifti.gumroad.com/l/ux-heuristics-report
Understanding Kafka Consumer Offset: A beginner guide
Tags: kafka, kafkaforbeginner
Published: 2022-12-13 14:26:51

---
title: Understanding Kafka Consumer Offset: A beginner guide
published: true
date: 2022-12-13 13:36:15 UTC
tags: kafka, kafkaforbeginner
canonical_url: 
---

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670937929056/DgrmhwoeF.png)

Kafka consumer offset is a critical concept in Apache Kafka, a popular distributed streaming platform. In simple terms, an offset is a unique identifier that denotes a position in a Kafka topic partition. When a consumer group consumes messages from a topic partition, it stores the offset of the last message it has read from that partition. This is known as the consumer group's current offset.

The current offset is important because it allows the consumer group to track its progress in the topic partition. It also enables the consumer group to resume reading from the partition at the last recorded offset in case of failure or rebalancing.

Imagine a Kafka topic partition as a book. The offset is like a bookmark that keeps track of the last page you have read in the book. When you resume reading the book, you can pick it up from the page marked by the bookmark. This is similar to how a consumer group uses the offset to resume consuming messages from a topic partition.

However, it is important to note that the offset is only stored by the consumer group, not by Kafka itself. This means that if the consumer group fails or is deleted, the offset information is also lost. This can result in the consumer group starting from the beginning of the topic partition when it is restarted, potentially leading to duplicate messages being processed.

To prevent this, Kafka provides a feature called offset commit. This allows the consumer group to periodically commit its current offset to persistent storage, such as Apache Zookeeper or Kafka's built-in offset storage. This ensures that the consumer group can resume from the last committed offset in case of failure or rebalancing.

In summary, Kafka consumer offset is a unique identifier that denotes the position of a consumer group in a Kafka topic partition. It allows the consumer group to track its progress and resume consuming messages from the partition in case of failure or rebalancing. By committing the offset to persistent storage, the consumer group can ensure that its progress is not lost.
Design a RESTful API
Tags: api, webdev, javascript, tutorial
Published: 2022-12-13 13:00:09

This blog is all about introduction to RESTful API design, it gives idea about What, Why and How of the same. 

> HTTP is expressive, ubiquitious and powerful.
> API design is complex, a game of trade offs.

## STEPS OF DESIGNING API

- Decide what functionalities to expose, 
- Then how to expose, 
- What to expose and,
- Adjust and improve according to use cases
- Rethink and improve


Consider a coffee cup, you can't hold a cup filled with hot coffee. There we need a handle, this helps you to hold the cup, also it allows you to hang it somewhere. Hence the handle serves for more than one purpose.

Similar to this, API has more than on use cases and functionalities.

## Scenarios where we need API

1. Bolt on strategy - Add API to existing functional system, it is a brute force approach, but not very efficient.

2. Greenfield Strategy - No underlying application, do whatever you want, in way you want, you start from scratch, requires massive investment

3. Facade strategy
Take advantage of existing business systems, replace piece by piece.

## Good modelling of an API

1. Don't worry about the tools (keep and take notes)
2. Have a consistent process (document things nicely)
3. It does not count unless its written down
Documentation is non negotiable


## Steps of designing an API

- Identify participants (takes or receives action)
- Identify Activities 
- Break into steps
- Create API definitions
- Validate API


## HTTP VERBS

1. GET - to retrieve data
2. DELETE - delete data
3. PUT - Update existing record
4. POST - create new records

### API Relationships

- Independent : can exist on its own without any resources
- Dependent : can only exist if other resource exists
- Associative : can be dependent or independent but needs additional information to describe it

## Validate an API

- Step through each API call
- Write code as if an API call exist (Use a microservices)
 (List endpoints, parameters)
- Look for gaps and potential issues

Thanks for reading <3
How to build your first low-code app
Tags: lowcode, nocode, appdevelopment, webinar
Published: 2022-12-13 12:49:16

Gartner predicts by 2024, **more than 65%** of app dev will be driven by low code. And this is just one of many statistics indicating that low- and no-code applications are not only here to stay but to take over.

Don't know where to start? Join us for an interactive **webinar** and Learn how you can use drag and drop interface to build your first web and mobile app.

{% embed https://www.dronahq.com/ %}


We'll go over the best practices for developing DronaHQ apps that are responsive, simple to integrate, enterprise-grade, and tailored to your business requirements.

Date: December 15th 
Time: 10 AM PST | 12 PM CT
or
Date: December 16th
Time: 4:30 PM IST

More details: https://www.dronahq.com/building-your-first-dronahq-app/
4 CSS Properties You May Not Know About (But Should!)
Tags: webdev, css, beginners, programming
Published: 2022-12-13 13:03:56

As a front-end developer, it's important to have a solid understanding of CSS. In this blog post, I want to share some lesser-known CSS properties that can be useful in certain situations.



## 1. Sticky
One property that is often overlooked is position: sticky. This allows an element to remain fixed in the viewport when the user scrolls past it. For example, you could use this to keep a navigation menu at the top of the page as the user scrolls down. Here's an example of how to use it:

```css
nav {
  position: sticky;
  top: 0;
}
```

## 2. Pointer-Events
Another useful property is pointer-events, which allows you to control whether an element can be clicked or interacted with. This can be useful if you want to create an element that acts as a placeholder, or if you want to create a custom cursor. Here's an example of how to use it:

```css
.placeholder {
  pointer-events: none;
}
```

## 3. Filter
You can also use the filter property to apply visual effects to an element. This can be useful for creating interesting hover effects, or for adjusting the brightness or contrast of an image. Here's an example of how to use it:


```css
img:hover {
  filter: brightness(50%);
}
```

## 4. Object-Fit
Finally, the object-fit property allows you to control how an image fits inside its container. This can be useful if you want to prevent the image from being stretched or distorted. Here's an example of how to use it:


```css
img {
  object-fit: cover;
}
```
These are just a few of the lesser-known CSS properties that can be useful in certain situations. As always, it's important to test your code and make sure it works as expected across different devices and browsers. Happy coding!
Amazon Inspector
Published: 2022-12-13 13:00:58

As i promised to all my viewers i will continue to upload cloud and education videos on my youtube channel.
last time i hosted a webinar and explained what actually cloud is, main platforms of cloud, cloud providers, cloud models, cloud pricing and importance of cloud and Amazon Web Services (AWS), to non-technical people who participated from different community.

Today again i hosted a virtual webinar and in this webinar people from technical background joined me who already using some cloud services. i explain to them an important aws service AMAZON INSPECTOR which is used to audit and check vulnerability in our aws environment.
I did a complete hands-on it and in near future will bring such more of interesting labs.

Here is the link of complete video on my youtube channel.
https://lnkd.in/dQ_NGMdY

My linkedin.
https://www.linkedin.com/in/awais684/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxab5jv85isep7btulhf.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0rypr4o4vea8q671txv.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibrjogvlo8s565mr0r5h.png)


#aws #awscommunity #awscloud #awscommunitybuilders
Super Protocol Testnet
Tags: python, webdev, testing
Published: 2022-12-13 12:57:01

There are several Web3 cloud computing projects I know about. Data security is an obvious concern with all such platforms. The problem can be solved with confidential computing (protecting data in use), but it's a relatively new tech and not the easiest to implement.
I know Super Protocol works in this direction. Maybe someone else, but not many teams, for sure. SP, by the way, launched a public testnet with several Python solutions. If you're interested in Web3 or clouds, you should probably try it out https://superprotocol.typeform.com/testnet
Why Learning Vanilla 🍦JavaScript Is So Important
Tags: javascript, beginners, webdev, codenewbie
Published: 2022-12-13 12:56:22

Vanilla JavaScript, also known as plain or pure JavaScript, is the term used to refer to JavaScript that is not extended or modified by any additional libraries or frameworks. In the world of web development, there are many popular libraries and frameworks that provide additional features and capabilities to JavaScript, such as jQuery, React, and Angular. However, despite the popularity of these libraries and frameworks, it is still important to understand and be proficient in vanilla JavaScript.

One of the main reasons why vanilla JavaScript is important is that it is the fundamental building block of the web. All web browsers include a JavaScript engine that can execute JavaScript code, and this is what allows web applications and websites to be interactive and dynamic. In order to create web applications and websites that work well and are efficient, it is essential to have a solid understanding of the core features and capabilities of JavaScript.

Another reason why vanilla JavaScript is important is that it is widely supported and compatible with all modern web browsers. Unlike many libraries and frameworks, which may have specific requirements or dependencies, vanilla JavaScript is guaranteed to work in any web browser that supports JavaScript. This means that you can use vanilla JavaScript to create web applications and websites that can be accessed by a wide range of users, regardless of the browsers and devices they are using.

In addition, vanilla JavaScript is often more lightweight and performant than many libraries and frameworks. Because it does not include any additional features or abstractions, vanilla JavaScript is typically smaller and faster than many libraries and frameworks. This can be especially important for applications that need to be fast and responsive, or that need to work on devices with limited resources.

Overall, while there are many powerful libraries and frameworks available for JavaScript, it is still important to have a strong foundation in vanilla JavaScript. Understanding the core features and capabilities of the language can help you create better web applications and websites, and it can also make it easier to learn and use other libraries and frameworks. By mastering vanilla JavaScript, you can become a more versatile and effective web developer.
Coding Bits: Applying programming knowledge X Algorithms and data structures for web dev
Tags: webdev, javascript, programming, beginners
Published: 2022-12-13 12:44:58

## Applying Programming Knowledge


Another most frequently asked question that I always get is how do I actually apply the knowledge. So basically when I'm trying to learn a new language, a new concept in a language, how do I actually apply that knowledge? The simple answer to this question is essentially you need to practice as much as possible.

### So the first step you should take is to start small. 

Don't try to learn all of the together. Start small, take bite-sized lessons, learn them and try to play around with whatever you're learning. 

So for example, if you are learning JavaScript arrays - build a project, build a small project which deals with lists, list of students, list of planes our list of schools, employees, anything, and just play around with the with the array functions like map, filter, and reduce.

And see what you get after using those method, how do you use them? What is the output, what are the pros and cons of each function? How does, how does each array method actually modify the array and how you can use it in your application?

Learn Web Development - [FREE Training](https://www.sleeplessyogi.com/posts/learn-web-development)

## Algorithms and Data Structures for web developers

Should a web developer study algorithms and data structures?

Well, if you ask me, I believe every web developer or for that matter every program, or should have at least a basic understanding of algorithms and data structures. 

This is because when you study algorithms on data structures and when you do some competitive programming and stuff like that, you, that basically develops logical thinking in you.

You start to develop that knack of breaking down bigger problems into smaller problems and then solving each small problem problem. It just becomes easier to solve small problems and combine the solutions to come up with a solution for your problem that you started with - the big problem.

And if you're a web developer and if you're developing an application. And if your app has data - then more often than not, you are going to use some data structures. And when you, when you are using data structures, you need basic knowledge of algorithms to actually use those data structure in a more optimized way.

Check out these [7 HTML Tips and Tricks](https://www.sleeplessyogi.com/posts/html-tips-and-tricks)


<br />

[Follow me on Twitter](https://twitter.com/sleeplessyogi) for more secrets and helpful tips for programmers.
Dedičnosť v PHP
Tags: slovak, php
Published: 2022-12-13 12:41:25

Dedičnosť v PHP je mechanizmus, ktorý umožňuje jednému objektu (potomkovi) zdediať vlastnosti a metódy iného objektu (rodiča). Týmto spôsobom môžeme vytvoriť hierarchické štruktúry objektov, kde potomok môže zdediť vlastnosti a metódy rodiča a pridať k nim svoje vlastné.

Napríklad, ak máme triedu **`Rodič`**, ktorá obsahuje metódu **`pozdrav()`**, môžeme vytvoriť triedu **`Potomok`**, ktorá dedí vlastnosti a metódy **`Rodič`** a pridá k nim vlastné. V tejto triede **`Potomok`** môžeme napríklad prepísať metódu **`pozdrav()`** tak, aby vypisovala iný pozdrav ako **`Rodič`**.

Dedičnosť v PHP sa implementuje pomocou klúčového slova **`extends`** pri definovaní triedy potomka. Napríklad:

```php
class Rodič {
  public function pozdrav() {
    echo "Ahoj";
  }
}

class Potomok extends Rodič {
  public function pozdrav() {
    echo "Zdravím";
  }
}
```

V tejto implementácii trieda **`Potomok`** dedí vlastnosti a metódy triedy **`Rodič`** a pridáva k nim svoje vlastné. Trieda **`Potomok`** môže tiež používať metódu **`pozdrav()`** rodiča, ak ju potrebuje. Napríklad:

```php
$potomok = new Potomok();
$potomok->pozdrav(); // vypíše "Zdravím"

$rodič = new Rodič();
$rodič->pozdrav(); // vypíše "Ahoj"
```

V tomto príklade vidíme, ako dedičnosť umožňuje potomkovi zdediť vlastnosti a metódy rodiča a pridať k nim svoje vlastné. Týmto spôsobom môžeme vytvárať zložité a flexibilné objektové hierarchie v PHP.
#TestCulture 🦅 Episode 20 - Differences between Agile and Scrum
Tags: discuss, beginners, devops, agile
Published: 2022-12-13 12:25:43

It is necessary to remember that no one should make a choice between Agile and Scrum, because Scrum is an agile way of approaching a project. But what are the differences? What should we remember?

Agile methods are a set of processes that encourage collaborative work and autonomy. These methods are opposed to the classical approach called ‘V-cycle’.

The objective of Agile is to make a project evolve in stages, to adjust the deadlines according to the project; and to include the customer in the work loop.

The Scrum method is based on the Agile manifesto and it is implemented for dev teams. This method has its own language, codes and tools.

Historically, Scrum appeared before Agile. Scrum comes from Japanese researchers who had highlighted the preference for collective work, where everyone pushes at the same time in the same direction (like in a rugby scrum) to develop innovative and complex products.

The difference between Agile and Scrum is that Agile is a set of principles and values, while Scrum is a framework and methodology for building products.

Scrum is one of the implementations of agile methods. This agile process allows to focus on delivering the highest business value.
A daily sprint meeting is held to review and comment on the future progress of the project. The next sprint can be planned when the team has completed the current activity. ⌚

In the agile method, the priority is to satisfy the customer with a continuous delivery of valuable software. The method reacts quickly to changes, and leadership plays a key role…

❓ Do you think that the V-cycle has a chance to last with the generalization of agile methods, and why?

-----
📚 𝕊𝕠𝕦𝕣𝕔𝕖𝕤:
🦅 https://agilitest.com/blog/foundations-agile-method 
📰 https://northeastern.edu/graduate/blog/agile-vs-scrum/#
🌐 https://resources.scrumalliance.org/Article/differences-agile-scrum-differ-waterfall



Thread [on Twitter.](https://twitter.com/agilitest/status/1560280414752612352?s=20&t=3E1PgtLuQVeh572L0kKcog)
Advent of Code 2022 - Day 13
Published: 2022-12-13 12:23:45

---
title: Advent of Code 2022 - Day 13
published: true
description: I'm trying to solve all the Advent of Code puzzles in this video series.
tags:
cover_image: https://i.ytimg.com/vi/uPH010O1fHs/maxresdefault.jpg
---

{% youtube uPH010O1fHs %}

I'm trying to solve all the Advent of Code puzzles in this video series.
How to Deploy Your React App with Routes on GitHub Pages for Free
Tags: javascript, react, webdev, opensource
Published: 2022-12-20 18:05:33

---
title: How to Deploy Your React App with Routes on GitHub Pages for Free
published: true
date: 2022-12-13 12:18:04 UTC
tags: javascript,react,webdevelopment,opensource
canonical_url: https://javascript.plainenglish.io/how-to-deploy-your-react-app-with-routes-on-github-pages-for-free-f86375c42780
---

[![](https://cdn-images-1.medium.com/max/1325/1*3-lUAKBkIYYNzRhYRBSrPw.png)](https://javascript.plainenglish.io/how-to-deploy-your-react-app-with-routes-on-github-pages-for-free-f86375c42780?source=rss-17217f29618a------2)

Free static site hosting with GitHub Pages

[Continue reading on JavaScript in Plain English »](https://javascript.plainenglish.io/how-to-deploy-your-react-app-with-routes-on-github-pages-for-free-f86375c42780?source=rss-17217f29618a------2)
Core Concept of Ember.js
Published: 2022-12-13 12:09:12

There are a few fundamental ideas we should comprehend before using Ember.js. So let's get started with it.

EmberJS is an open-source JavaScript framework used for creating web applications. By providing a comprehensive setup that includes data management, it enables the development of JavaScript client-side apps.  Ember JS was originally known as the Sprout Core MVC framework. It is designed with server-side rendering and two-way binding. 

But it's crucial to keep in mind what makes the web unique. Because something uses HTML, CSS, and JavaScript technologies, many people mistakenly believe that it is a web application. These are merely implementation specifics, though.

Concepts:

1.Templates
Template, written in Handlebars templating language provide a powerful user interface to users. It creates the front-end application, which is similar to regular HTML. Each template is supported by a model, and the template automatically updates itself as the model changes.

In addition to plain HTML, templates can include:

- Expressions, such as {firstName} that take information from the template's model and convert it to HTML.

- Outlets, these are placeholders for other templates. As users travel through the app, the router can plug in different templates. The outlet helper allows you to insert outlets into your template.

- Components, these are custom HTML elements that can be used to simplify repetitive templates or to create reusable controls.

2.Router
The router converts a URL into a collection of nested templates, each supported by a model. Ember automatically updates the URL in the address bar of the browser as the templates or models being displayed to the user change. 
At any point, the user can click on that particular URL and at anytime the user clicks on that link, the user sees the same content as original user.

3.Model

A model is an object that stores permanent state. Templates are in charge of displaying the model to the user by converting it into HTML. Many applications load models using an HTTP JSON API, while Ember is agnostic to the backend used.

4.Components

The component controls the user interface behavior which includes two parts–
• a template which is written in JavaScript
• a source file which is written in JavaScript that provides behavior of the components.

5.Route
A route is a piece of information that instructs the template which model to display.

6.Controllers
Objects that store application state are referred to as controllers. In addition to a model, a template may also include a controller, and it is capable of retrieving properties from either one. 

Here's a basic flowchart to explain the working of concepts of EmberJS:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tmlym7xw3fj78jmqew7.jpg)
These the fundamental ideas are made to scale up in complexity, preventing from having to go back and rework significant portions of  project in order to accommodate additional functionality.