teleren/devto huggingface dataset:
User Interface Design: The Key to Creating Engaging and User-Friendly Applications
Tags: design, computerscience
Published: 2023-02-27 10:00:00

User interface design (UI design) is the process of designing the interface of a software application with the goal of making it easy to use, visually appealing, and engaging for the user. By following good UI design principles, developers can create more user-friendly and effective applications.

## **What is User Interface Design?**

User interface design is the process of designing the interface of a software application with the goal of making it easy to use, visually appealing, and engaging for the user. This includes things like:

- Layout and organization of elements on the screen
- Use of colors, typography, and imagery
- Navigation and interaction design
- Responsiveness and accessibility

UI design is a multi-disciplinary field that involves collaboration between designers and developers, as well as research and testing with users. The goal is to create an interface that is intuitive, efficient, and satisfying to use.

## **The Benefits of User Interface Design**

User interface design provides numerous benefits for software development, including:

- **Usability:** By designing an interface that is easy to use, developers can improve the user's experience and increase the chances of success of the application.
- **Visual appeal:** By using colors, typography, and imagery in a visually appealing way, developers can create an interface that is engaging and memorable for the user.
- **Efficiency:** By designing an interface that is efficient and easy to navigate, developers can help the user to accomplish their tasks more quickly and easily.
- **Accessibility:** By designing an interface that is accessible to users with disabilities, developers can improve the user's experience for a larger audience.

## **An Example: A Mobile App for Food Delivery**

An example of user interface design is a mobile app for food delivery. The designer starts by researching the target audience, their needs, and their pain points. They create wireframes and mockups of the app's screens, trying different layouts and interactions. They also define the color palette, typography, and imagery that will be used in the app.

Once the design is ready, it is tested with users to ensure that it is intuitive, efficient, and satisfying to use. Based on the feedback, the designer can make adjustments and improvements. Finally, the design is handed over to the development team to be implemented in the app.

## **Conclusion**

User interface design is the process of designing the interface of a software application with the goal of making it easy to use, visually appealing, and engaging for the user. By following good UI design principles, developers can create more user-friendly and effective applications. So, start exploring the world of UI design and see how it can benefit your software development process.
I am trying to run script from action workflow. How to input value from workflow into script for further computation.
Tags: help, githubactions, shellscript, aws
Published: 2023-02-27 09:57:22

I have to run a script file from github actions workflow. The script file is a simple template takes input from user (while statement) based on the user option selected, further computation is carried out for each case. I am getting no input provided error. How to pass input from workflow to script inside.

name: CI

on:
  # Triggers the workflow on push or pull request events but only for the "main" branch
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

  workflow_dispatch:

jobs:
  build:
       runs-on: ubuntu-latest

      steps:
       - uses: actions/checkout@v3

      - name: Adding Execute permission to the file
        run: |
          
     chmod +x"${GITHUB_WORKSPACE}/.github/deploy_ecs_stack.sh"
 
      - name: Run a script
        run: |
          "${{ format('{0}/.github/deploy_ecs_stack.sh', github.workspace) }}"
#TestCulture 🦅 Episode 26 – #TestAutomation for Product Owner
Tags: agile, devops, testing, beginners
Published: 2023-02-27 09:41:38

A 𝗣𝗿𝗼𝗱𝘂𝗰𝘁 𝗢𝘄𝗻𝗲𝗿 (𝗣𝗢) is the person responsible for the outcome of the project in a Scrum team. His goal is to maximize the value of a product by optimizing its backlog.

In many organizations, the product owner is responsible for several projects and thus works with several teams. The #ProductOwner is not involved in every step of the development process, but must pay attention to different groups and stakeholders.

Today, all teams developing software have to make sure they are able to deliver quality at speed. With Test Automation, it reduces time to market, and testing is no longer a bottleneck.

Given the responsibility of the job, they face many challenges in their daily tasks… 📃

𝐒𝐭𝐚𝐤𝐞𝐡𝐨𝐥𝐝𝐞𝐫𝐬 𝐦𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭. The responsibility for maximizing product value requires a great deal of cooperation with other teams, customers, and management.
👉🏼 It requires the ability to align multiple stakeholders to make decisions and converge on a single understanding of the product.
💡 It is important to know how to say no and decide between several ideas.

𝐃𝐢𝐬𝐭𝐫𝐢𝐛𝐮𝐭𝐞𝐝 𝐭𝐞𝐚𝐦𝐬. The PO sometimes faces a lack of trust and feedback from the team, poor communication, misalignment, low commitment, and slow progress. Therefore, they need to be able to keep their teams on track. 🤼‍♂️

𝐀𝐝 𝐡𝐨𝐜 𝐫𝐞𝐪𝐮𝐞𝐬𝐭𝐬. Ad hoc requests are unexpected. They may be the result of an obstacle or an unforeseen event, and their completion is rather urgent.
👉🏻 The realization of an ad hoc request may involve another person in the team, which makes the request complicated, as this person may not finish his or her sprint tasks on time…
With test automation, collaboration within the team is facilitated and a fast and regular delivery is made possible. Teamwork can thus be an ally for the most difficult tests, such as exploratory tests.

-----

📚 Sources:

🌐 https://productnerdz.com/product/the-challenges-of-being-a-product-owner/

🌐 https://lucidchart.com/blog/7-biggest-pain-points-for-product-owners

🦅 https://www.agilitest.com/solutions/product-owner 

-----

A thread [on Twitter.](https://twitter.com/agilitest/status/1603420243061186560?s=20)
Inject 360º metadata to video using python
Tags: python, tutorial
Published: 2023-02-27 09:40:12

## Notes

Only work on equirectangular[^projection] video.

```bash
git clone https://github.com/google/spatial-media spatial-media
cd spatial-media
python spatialmedia --inject <input file> <output file>
```


[^projection]: https://en.wikipedia.org/wiki/360_video_projection
Delete Files Older Than A Specific Date(s) in SharePoint Online
Tags: sharepoint, powerautomate, sharepointonline
Published: 2023-02-27 09:34:55

A very simple way to <u>delete files (not folders) across multiple levels of folders, for files older than a specific date</u> in SharePoint online is to use a **Power Automate flow**. 

Here is what is required for the flow:

1. **Get files (properties only)**
   - **Include Nested Items**: Yes (This is required if you need to delete files across multiple levels of subfolders)
   - **Filter Query:** Set to your respective date value. 
(Example below is where created file date is earlier or equals to 31st December 2022)

2. **Condition **in **Apply to each**. 
   - Check if **IsFolder **is equals to **false**. This is because **Get files** will also returns folder names. 

3. If _yes_, **Delete file**
   - **File Identifier:** Identifier (from the _Get files (properties only)_ action)

4. If _no_, do nothing


![Power Automate Flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nniz92qp40nc55sh3st.png)
Checklist and Guide for Angular
Published: 2023-02-27 09:28:06

## GUIDE

1. Add new component only if the need for it arises
   * New view with repeated UI components 
   * Break view into components when it is bulky
2. Consider the new functionality for reuse
3. Only add component to shared when it is reused in multiple places
4. Component should have only interaction logic.
5. Move the business logic to different file and inject that when needed. 
6. Preferably mimic the entities in question.
7. Store the data in cookies/ local storage only if it is non sensitive and view is refreshed 
8. Prefer pulling of data once the view loads
9. Write tests for the functions added in component.ts and services first.

## CHECKLIST
1. Component has only interaction logic and business logic is in service.
2. Constructor is clean and does not have any asynchronous code.
3. Each function name is suggesting the purpose. 
4. All state of the parameters is considered in the function body
5. Null / Undefined is handled
6. Promises are handled with correct catch
7. Observables are used for stream of data
8. Observables are unsubscribed on component ngOnDestroy
9. Try catch is used for async and await pattern
10. Model is used for the data fetched from API
11. All params and return have type
12. Code is clean and coveys the logic in simple way.
Spring boot
Tags: springboot, api, java, microservices
Published: 2023-02-27 09:06:03

---
title: Spring boot
published: true
description: Introduction to spring boot
tags: #springboot #API #java #microservices
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-27 09:04 +0000
---


Spring Boot is an open-source Java-based framework that provides a platform to develop and run Spring-based applications easily. Microservices are a popular architecture pattern that involves developing an application as a suite of small, independently deployable services. Combining Spring Boot with microservices can result in a powerful combination that can help you develop scalable and robust applications.

Here are some benefits of using Spring Boot for microservices development:

Easy to use: Spring Boot provides a set of default configurations that can be used to quickly create and deploy microservices.

Lightweight: Spring Boot is lightweight and can be used to create standalone microservices that do not require any external application server.

Integration: Spring Boot provides seamless integration with other popular frameworks and technologies like Spring Cloud, Netflix OSS, and Docker.

Scalability: Microservices developed using Spring Boot can be easily scaled horizontally by adding more instances of the microservice.

Testing: Spring Boot provides an easy-to-use testing framework that can help developers test their microservices quickly and efficiently.


If you are interested in learning more about developing microservices using Spring Boot, there are numerous resources available online, including tutorials, blogs, and courses. Some of the popular online resources include Spring Boot documentation, Spring Boot guides, and Spring Boot tutorials on YouTube.
Encountering the "Bad Request" Error When Testing WCF Services
Tags: wcf
Published: 2023-02-27 09:04:53

While testing an existing Windows Communication Foundation (WCF) service, I encountered the "Bad Request" error message. This service used a complex message contract. I was using SOAPUI for testing purposes and provided the request XML. SOAPUI could verify the request without any issues. However, when I executed the request, it failed with the "Bad Request" error message.

After a lot of research, including reviewing Stack Overflow posts, I was unable to find a straightforward solution to the problem. However, I came across a suggestion that enabling WCF's built-in tracing mechanism might help identify the issue. Upon enabling tracing, the error message **"The 'maximum bytes per Read operation' quota (4096) has been exceeded while reading XML data. Long element start tags (consisting of the element name, attribute names, and attribute values) may trigger this quota. This quota may be increased by changing the MaxBytesPerRead property on the XmlDictionaryReaderQuotas object used when creating the XML reader. Line 1, position 4308."** was logged in the trace logs.
The error message clearly stated what was wrong and what needed to be changed in the configuration file for the WCF service. The templates referenced in the SOAP envelope of the request were very long and exceeded the defined limit in the configuration.

In the WCF configuration file, the attribute "MaxBytesPerRead" had a default value of "4096". Upon increasing this value, the "Bad Request" message disappeared, and the request was executed successfully.

This experience taught me the importance of thorough testing and troubleshooting when encountering errors, particularly with complex services. [Enabling WCF's built-in tracing mechanism](https://learn.microsoft.com/en-us/dotnet/framework/wcf/diagnostics/tracing/configuring-tracing) can be an effective way to identify and resolve issues, as it logs detailed information about service execution. Additionally, it highlights the importance of reviewing and modifying configuration files as needed to ensure the service can handle complex requests appropriately.
PROXY PATTERN
Published: 2023-02-27 09:01:58

What is a proxy.
A proxy is a stand-in for someone else, similar to JavaScript,  instead of interacting with the target object directly, we'll interact with the Proxy object.

A proxy takes two arguments, the first is the object its representing whereas the second is the handler where all behaviors of how to interact with the target object are defined.

Additionally, there are two methods get() which is invoked when trying to access a property and set() which is invoked when trying to modify a property.

As the get() method takes two arguments, set() takes three, where the third is the value that you want to set

```
const person = {
    name: "Anonymous",
    age: 21
}

const handler = {
    get: (obj, prop) => {
        console.log(`hello`, obj[prop])
    },
    set: (obj, prop, value) => {
             console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
        obj[prop] = value
            
        }
       
    }
}

const personProxy = new Proxy(person, handler)
personProxy.name
personProxy.age = 23

```

Not only proxies helping us to directly interact with our target object, it can also help us in validation in order to avoid changing the target object with wrong values.
for instance on set method we can have something like this:

```
set: (obj, prop, value) => {
        
        if(value < 20){
            console.log("Small value")
        }
        else{
             console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
        obj[prop] = value
            
        }
       
    }
```
And user age won't accept any value less than 20

As you have seen above we are accessing or changing values using obj[props], However, there is Reflect built in method which makes it easier for us to manipulate the target object when working with proxies.

```
set: (obj, prop, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    Reflect.set(obj, prop, value);
  }
```
Proxies are a powerful way to add control over the behavior of an object.
List of Best school management system providers in India
Tags: software, education, systems, bestsoftware
Published: 2023-02-27 08:55:48




School management systems (SMS) in India are digital platforms that allow schools to manage their administrative and academic operations efficiently. SMS platforms are designed to streamline the administrative tasks of schools, such as student registration, attendance management, exam management, grading, scheduling, and communication with parents. They also allow teachers to manage their classroom activities, such as lesson planning and homework assignments, and enable parents to stay informed about their children's academic progress.

There are several school management system providers in India, offering a range of features and functionalities to meet the specific needs of schools. Some popular SMS providers in India include:
Fedena: This is a comprehensive open-source school management system that includes features such as student management, employee management, library management, and more.
MyClassboard: This platform offers features such as admission management, student information management, and exam management, among others.
SchoolPad: This SMS provider offers features such as attendance management, timetable management, and grading management, as well as a mobile app for parents to stay updated about their child's progress.
EduSys: This platform offers features such as student admission management, fee management, and employee management, among others.
SkoolApp: This SMS provider offers features such as student attendance management, timetable management, and communication management, as well as a mobile app for parents and students.
Warals: This [SMS](https://warals.com/) provider offers admission, fee management, attendance management  as well as a mobile app for parents and students.
Each [school management system ](https://warals.com/warals-school-management-system)has its own unique features, so it's important to do thorough research to determine which platform is the best fit for your school's needs.
9 beautiful corner border examples
Tags: codepen, design, webdev, css
Published: 2023-02-27 08:49:32

<p>Easy way to add corner border to any div using ::before and ::after.
Or we can use sibling div or more than one div (position absolute and margin(width of border)).</p>

<p>Gradient: <a href="https://codepen.io/Zaku/pen/vzBKWe" target="_blank">https://codepen.io/Zaku/pen/vzBKWe</a></p>

{% codepen https://codepen.io/Smit29/pen/LYJbepJ %}
Upload file to Google cloud storage without middleman server
Tags: node, javascript, tutorial
Published: 2023-02-27 08:44:51


In my previous [blog](https://devkamal.com/blog/upload-files-to-google-cloud-storage-from-nodejs) I discussed about how to upload files from Node.js server to Google Cloud Storage. So, in that case users have to upload the data to the Node.js server and then we are uploading the data to the Google Cloud Storage server.

So, think for a second, if a user wants to upload a very large file and then if we want to upload that large content to the Google Cloud Storage then we have to handle the large amount of data in our server.

So what we can do, we can give some kind of authorization to the user to upload that particular file directly from their device. Without passing the data to our server. So for that we can create an endpoint to our server and then provide a [Signed Url](https://cloud.google.com/storage/docs/access-control/signed-urls) to the user. In that way, a user can use this signed url for a limited amount of time to upload his content to the Google Cloud Platform.

In my case I will use a Node.js server for that. We just have to create an `index.js` file like this one.


```javascript
const http = require('http')
const { Storage } = require('@google-cloud/storage')

const storage = new Storage({
  keyFilename: `./key-file-from-service-account.json`,
})

const bucketName = 'my-test-bucket'

const server = http.createServer(async (req, res) => {
  // Handle GET requests
  if (req.method === 'GET') {
    res.writeHead(200, { 'Content-Type': 'text/plain' })

    const fileName = `uploadedFileName.jpeg`

    // These options will allow temporary uploading of the file with outgoing
    // Content-Type: image/jpeg header.
    const options = {
      version: 'v4',
      action: 'write',
      expires: Date.now() + 15 * 60 * 1000, // 15 minutes
      contentType: 'image/jpeg',
    }

    // Get a v4 signed URL for uploading file
    const [url] = await storage
      .bucket(bucketName)
      .file(fileName)
      .getSignedUrl(options)

    res.end(url)
  }
})

const port = 3000
server.listen(port, () => {
  console.log(`Server running on port ${port}`)
})

```

Here above we are initializing the bucket with `@google-cloud/storage` package. 

Then inside the GET request we are calling the `getSignedUrl()` to get the signed url with some predefined config above. That's it now with the URL user can upload the content from any device they want.

Here I am not doing any kind of authorization for our users. But in real life scenarios we must validate the user with some kind of authentication to make sure not everyone gets the Signed url.
Best Practices for Debugging JavaScript Code: A Guide for Developers
Tags: javascript, beginners, webdev, codenewbie
Published: 2023-02-27 08:37:54

Debugging is an essential skill for any JavaScript developer. As much as we strive to write error-free code, bugs and issues are inevitable. Knowing how to effectively debug your JavaScript code can save you hours of frustration and help you deliver a better user experience. In this blog post, we'll cover some best practices for debugging JavaScript code.

**_Use the Console_**
The console is a powerful tool that can help you quickly identify errors and debug your code. Most modern web browsers have a built-in console that you can access by pressing F12 or Ctrl + Shift + J (Windows) or Cmd + Opt + J (Mac). In the console, you can log values, debug errors, and execute JavaScript code.

**_Read Error Messages Carefully_**
When an error occurs in your JavaScript code, the console will display an error message that provides information about the type of error and where it occurred. Read the error message carefully to understand what went wrong. The error message can point you in the right direction and help you fix the issue quickly.

**_Use Breakpoints_**
Breakpoints allow you to pause the execution of your code at a specific line and inspect the state of your code. You can add a breakpoint by clicking on the line number in the source code editor or by using the debugger; statement in your code. Once you've added a breakpoint, the code will pause when it reaches that line, and you can inspect variables and step through the code line by line.

**_Check the Values of Variables_**
When debugging your code, it's essential to check the values of variables to understand their current state. You can do this by logging the variables to the console or using the debugger to inspect the variables. Understanding the current state of variables can help you identify issues and fix bugs quickly.

**_Use a Linter_**
A linter is a tool that analyzes your code and points out potential issues or errors. Using a linter can help you catch errors early on and write more consistent code. There are many JavaScript linters available, such as ESLint and JSHint, that you can integrate into your development workflow.
[ESLint](https://eslint.org/)
[JSHint](https://jshint.com/)
[SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)
[Prettier-Code Formatter](https://prettier.io/)

**_Write Unit Tests_**
Unit tests are automated tests that verify the behavior of your code. Writing unit tests can help you catch bugs before they make it to production and ensure that your code works as expected. You can use testing frameworks like Jest or Mocha to write and run unit tests for your JavaScript code.

In conclusion, debugging is an essential skill for any JavaScript developer, and these best practices can help you debug your code effectively. By using the console, reading error messages carefully, using breakpoints, checking the values of variables, using a linter, and writing unit tests, you can identify issues and fix bugs quickly, delivering a better user experience.

Have a nice day