teleren/devto huggingface dataset:
flutter container widget example
Tags: flutter, dart, widgets, container
Published: 2023-05-30 05:37:20

```
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: ContainerWidget(),
    );
  }
}

class ContainerWidget extends StatelessWidget {
  const ContainerWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Container Widget'),
      ),
      body: Container(
        margin: EdgeInsets.all(20),
        padding: EdgeInsets.all(20),
        alignment: Alignment.bottomCenter,
        height: 300,
        width: 500,
        // color: Colors.amber,
        decoration: BoxDecoration(
          border: Border.all(
            width: 4,
            color: Colors.black,
          ),
          borderRadius: BorderRadius.circular(10),
          color: Colors.amber,
        ),
        child: Text(
          'This Is Container',
          style: TextStyle(
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}

```
What is Renderer2? How to use it in Angular Project?
Tags: angular
Published: 2023-05-30 05:30:00

`Renderer2` is a utility class that provides methods to manipulate and interact with the DOM (Document Object Model). It is used to perform operations such as creating, modifying, and removing elements, applying styles, and listening to events.

Here's an example of how you can use Renderer2 in Angular:

1. Import the necessary modules and services:

    ```jsx
    import { Component, Renderer2, ElementRef } from '@angular/core';
    ```

2. Inject the Renderer2 and ElementRef into your component's constructor:

    ```jsx
    constructor(private renderer: Renderer2, private el: ElementRef) { }
    ```

3. Use the Renderer2 methods to manipulate the DOM in your component's methods or lifecycle hooks. For example, let's say you have a button in your template and you want to change its background color when it is clicked:

    ```jsx
    @Component({
      selector: 'app-example',
      template: `
        <button (click)="changeColor()">Change Color</button>
      `
    })
    export class ExampleComponent {
      changeColor() {
        const button = this.el.nativeElement.querySelector('button');
        this.renderer.setStyle(button, 'background-color', 'red');
      }
    }
    ```

In the above example changeColor() method, we use `this.el.nativeElement.querySelector('button')` to get a reference to the button element in the DOM. Then, we use this.renderer.setStyle() to set the background color of the button to red.

Note that using Renderer2 is recommended when you need to manipulate the DOM directly in Angular, as it provides a safer way to interact with the DOM compared to directly accessing and modifying the DOM elements using vanilla JavaScript.
Reverse Countdown Timer Using JavaScript
Published: 2023-05-30 04:17:35

Welcome to the Codewithrandom blog. In this blog, We learn how to create a **[Reverse Countdown Timer](https://www.codewithrandom.com/2022/12/31/reverse-countdown-javascript-countdown-on-card-using-html-css-javascript-codewithrandom/)**. We use HTML, CSS, and JavaScript for this Reverse Countdown Timer.

I hope you enjoy our blog so let's start with a basic html structure for a Reverse Countdown Timer.

## HTML Code For Reverse Countdown Timer
```
<div class="card">
<div class="number"></div>
</div>
```
There is all the html code for the reverse countdown timer. Now, you can see output without Css and JavaScript. then we write css for styling and give the main functionality of the Reverse Countdown Timer using javascript.

## CSS Code For Reverse Countdown Timer
```
:root {
--background-color: #0e1538;
--text-color: #fff;
--font: sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--background-color);
font-family: var(--font);
}
/* main Card */
.card {
width: 200px;
height: 275px;
position: relative;
user-select: none;
cursor: pointer;
transition: 0.3s ease-in-out;
}
/* Linear Background by using ::before */
.card::before {
content: "";
position: absolute;
top: -4px;
left: -4px;
bottom: -4px;
right: -4px;
transform: skew(2deg, 4deg);
background: linear-gradient(315deg, #00ccff, #0e1538, #d400d4);
}
/* countdown number */
.card > .number {
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
font-size: 8em;
display: grid;
place-items: center;
background-color: var(--background-color);
color: var(--text-color);
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 0 200px rgba(225, 225, 225, 0.3);
transform: rotate(720deg);
}
```
We have completed our CSS Section For Reverse Countdown. Here is our updated output HTML + CSS.

## JavaScript Code For Reverse Countdown Timer
```
var number = document.querySelector(".number");
var count = 20;
// Countdown Interval which runs on every 1s
var countdownInterval = setInterval(() => {
// if count is less than or equal to 1 then clear the Interval
count <= 1 && clearInterval(countdownInterval);
number.textContent = count <= 10 ? `0${--count}` : `${--count}`;
}, 1000);
```
We have completed our Reverse Countdown Timer Project. Here is our updated output with Html, Css, and JavaScript. Hope you like the Reverse Countdown Timer. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create a **[Reverse Countdown Timer](https://www.codewithrandom.com/2022/12/31/reverse-countdown-javascript-countdown-on-card-using-html-css-javascript-codewithrandom/)** Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by - Code With Random/Anki
What do you think of Software Architecture? Is it relevant for junior devs?
Tags: discuss, programming, webdev
Published: 2023-05-30 05:02:27

Hey there, so I transitioned from dev to a software architect position (about a year ago) and since then I've been noticing that whenever I code nowadays, I don't struggle as much as I used to. It became fairly easy for me to find suitable solutions for problems while coding (my stackoverflow skills improved too lol). 

But the point of this discussion is that, recently, some people I know (junior devs basically) have been asking me for tips for advancing in their careers. I've recommended they to pay some time studying basic software architecture, also system analysis and QA. Like, I find myself talking more about the whole process before and after the coding itself happens. I feel like they will be able to bring more value as a professional to their team. Now I am wondering, is it a good tip? Is software architecture (and the other stuff I mentioned) something that could be useful in a practical way for junior devs (even for new people starting)?
How to drag and move multiple polygons simultaneously on Google Map
Tags: google, tutorial, tip, map
Published: 2023-05-30 04:58:39

Google map doesn't support multiple dragging on drawn objects, so in this article I'll show you a simple way to make multiple dragging on Google Map.

Moving an object on Google Map as well as we constantly update its path. To dragging and moving multiple objects on map, we just need to update path of these objects.
Assume I have a drawn polygon on Google Map, I want to move the polygon more 10 meters from current position, from west to east. And this is how to calculate a new path for the polygon, when we know moved distance, and moving direction.

```js
const movedDistance = 10; // 10 meters
const heading = 90; // from west to east, heading is 90 degrees

const currentPath = polygonInstance.getPath.getArray();
const newPath = currentPath.map(path => {
 return maps.geometry.spherical.computeOffset(path, movedDistance, heading);
});

// update new paths
polygonInstance.setPath(newPath);
```
The implement code above is quite OK, but there is a problem, how do we know moved distance and heading value when we drag and move a polygon on map? It's quite simple, we just need a start point(**startLatLng**) and end point(**endLatLng**), pass these values to these two methods **computeHeading** and **computeDistanceBetween**. We can obtain **startLatLng** and **endLatLng** through **dragstart** and **drag** event of polygon.

```js
const movedDistance = maps.geometry.spherical.computeDistanceBetween(startLatLng, endLatLng);
const heading = maps.geometry.spherical.computeHeading(startLatLng, endLatLng);
```

Here is my implemented code, let see in this [fiddle link](https://jsfiddle.net/f0xrtqL5/21/).
🚀🎉 Meet Bose Framework: Your Swiss Army Knife for Web Scraping as a Ninja Developer! 🤖🔥
Tags: webscraping, python, webdev, javascript
Published: 2023-05-30 04:56:37

Hi Friends, I have launched Bose Framework which is the Swiss Army Knife for creating Bose Selenium-based Bots. Meet Bose Framework at https://dev.to/chetanam/introducing-bose-framework-the-swiss-army-knife-for-bot-developers-10k9. 

> I am an IITian with a perfectionist attitude to work, open to projects. See my projects at [https://dev.to/chetanan/chetan-jains-portfolio-cl6](https://dev.to/chetanan/chetan-jains-portfolio-cl6)
Setup Next.js
Tags: beginners, nextjs, setup, react
Published: 2023-05-30 04:47:29

I've learned how to setup Next.js. I put together it for myself in this blog.
(2023/05/29)

・You can move from `Docs` to `Installation` on official site of Next.js.

▼ Official site of Next.js
 
https://nextjs.org/docs/getting-started/installation

・Following Automatic Installaiton, execute the command on your terminal.
```zsh
# npm
npx create-next-app@latest
```
・Put your project name following the instruction.
```zsh
✔ What is your project named? … [Project name]
```
・Answer the several questions with Yes or No.
```zsh
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
```

### ※There exists no file of ".next" yet.

・Move to the file that you just made with your terminal and open an editor.

```zsh
# Move to new project file 
cd [project name]
# Open an editor
code . 
```

・Once executing DEV mode, `.next` directory and the local path will be made.

```zsh
# DEV mode
npm run dev
```
How to Install Magento 2 on Mac
Tags: magento, magento2, magento2tutorial
Published: 2023-05-30 04:46:37

Greetings! If you're interested in installing the latest version of Magento 2 on your MAC OSX system, you've come to the right place. This guide will take you through the process step-by-step, ensuring a quick and successful setup.

Before we begin, let's discuss the necessary tools. We'll be utilizing either Apache or Nginx as our web server, MySQL or MariaDB as our database, and PHP 7.x sourced from the Magento repository or Github. If you haven't installed these components yet, don't worry—I'll explain how to do that as well.

Now, let's jump into the installation process. We'll start by downloading the latest Magento 2 version onto your MAC OSX system. After obtaining the files, we'll proceed with configuring the web server, setting up the database, and installing PHP. Though it might appear complex, rest assured it's more straightforward than it seems.

It's worth noting that I'll be demonstrating the installation on the latest version of Ubuntu with Apache2 and MariaDB. However, if you're using a different operating system or web server, don't worry—the process is quite similar across the board.

Alongside the installation steps, I'll share helpful tips and tricks to help you avoid common pitfalls and optimize your Magento 2 installation.

If you're ready to get started, let's delve into the process of **_How to Install Magento 2 on Mac_** OSX system. By the end of this guide, you'll have a fully functional Magento 2 installation, ready to power your online store.

For more information , please visit this :- **_[https://webguru.dev/how-to-install-magento-2-on-mac-a-complete-guide-using-apache-nginx-mysql-mariadb-and-php-7-x/](https://webguru.dev/how-to-install-magento-2-on-mac-a-complete-guide-using-apache-nginx-mysql-mariadb-and-php-7-x/)_**
Create modal with Reactstrap
Tags: react, webdev, beginners, modal
Published: 2023-05-30 04:44:32


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sy3lk8pqhdtmh9pvkfc.png)Modals are a great way to display input forms or display any alert/notification/message to the users.
Today, we will use the react-bootstrap library to display a sign-in form and try to add different controls to open/close the modal on user actions.
Let's start by creating a new react app by typing in the following command:
```javascript
npx create-react-app modal_app
```
After the react app is created, we will install reactstrap and bootstrap in our project using the following command:

```
npm install reactstrap bootstrap
```

Now we will write the code to open the modal in App.js file which will look like this:
```
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    Button, Modal, ModalFooter,
    ModalHeader, ModalBody
} from "reactstrap"
  
function App() {
  
    // Modal open state
    const [modal, setModal] = React.useState(false);
  
    // Toggle for Modal
    const toggle = () => setModal(!modal);
  
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap Modal Component</h4>
           <Button color="danger" onClick={toggle}>
        Click Me
      </Button>
            <Modal isOpen={modal}
                toggle={toggle}
                modalTransition={{ timeout: 2000 }}>
                <ModalBody>
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
                </ModalBody>
          <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>{' '}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
            </Modal>
        </div >
    );
}
  
export default App;
```

We have added two buttons 'Do Something' and 'Cancel' in the footer of the modal for more user interactivity.

Modals look nice and gives a good look  to our user interfaces. Hope you can use this modal in your future projects.

Happy coding...
Tip: Add Typography as Components to your Tailwind Config
Tags: tailwindcss, webdev, javascript, react
Published: 2023-05-30 04:41:50

Tailwind allows you to create custom "components" in its config via [plugins](https://tailwindcss.com/docs/plugins#adding-components).

Here's a hack to define your typography as tailwind components, **using Tailwind utilities**:

```ts
// tailwind.config.ts

import plugin from 'tailwindcss/plugin';

export default {
  // ...the rest of your config

  plugins: [
    plugin(({ addComponents }) => {
      addComponents({
        ".typography-h1": {
          "@apply text-[2rem] lg:text-[2.5rem]": "",
        },

        ".typography-h2": {
          "@apply text-[1.5rem] lg:text-[2rem]": "",
        },

        // ...rest of your typography
      });
    }),
  ],
};
```

Now you can use these components to style your markup, and you'll also receive autocomplete:


![Autocomplete in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqevvw4h9znpgboiu84v.png)
How to Install a Language Pack in Magento 2
Tags: webdev, magento, magento2tutorials
Published: 2023-05-30 03:51:54

Magento 2 is a broadly utilized internet business stage that works with the fuse of different dialects. 

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

By introducing a language pack in Magento 2, you can decipher the stage's UI and front-end content into different dialects. This empowers clients to explore and communicate with your store easily in their favored language.

Introducing a language pack in Magento 2 is a straightforward cycle that can be performed through the stage's backend. 

Notwithstanding, it's vital to note that different language packs might fluctuate in quality and culmination, so it's pivotal to choose a dependable source and thoroughly test the language pack after establishment. To take care of you, here's an exhaustive aide on  **_how to install a language pack in Magento 2_**.

For more info, visit **_https://webguru.dev/how-to-install-a-language-pack-in-magento-2/_**
Learn Django by Building a Collaborative Filtering
Tags: python, django, webdev, javascript
Published: 2023-05-30 03:41:10

Learn Django with this one project! Build a Recommendation Engine in Django. Build a collaborative filtering with Python, Celery, Django, Worker Processes, Batch Predictions, SurpriseML, Keras, and more! Build a recommendation engine using Django & a Machine Learning technique called Collaborative Filtering.

Users will rate movies and the system will automatically recommend new ones. These recommendations will be done in batches (ie not in real time) to unlock a more scalable system for training and helping thousands and thousands of users.

For this course, we'll use a real dataset called MovieLens; this dataset is downloaded in CSV and is used on all kinds of machine learning tutorials. What's special about this course is you'll load this dataset into a SQL database through a Django model. This alone might be worth watching the course as SQL databases are far more powerful than CSV files.

To do the batch inference we implement the incredibly powerful background worker process called Celery. If you haven't used Celery before, this will be an eye opening experience and when you couple it with Django you have a truly powerful worker process that can run tasks in the background, run tasks on a schedule, or a combination of both. Tasks in Celery are simply Python functions with a special decorator.

For rating movies, we'll be using HTMX. HTMX is a way to dynamically update content *without* reloading the page at all. I am sure you know the experience whenever you click "like" or "subscribe" , that's what HTMX gives us without the overhead of using 1 line of JavaScript. This course shows us a practical implementation of using HTMX not just for rating movies, but also sorting them, loading them, and doing much more.

The recommendation engine in Django is really a collection of 3 parts:

   Web Process: Setup up Django to collect user's interest and provide recommendations once available.
   Machine Learning Pipeline: Extract data from Django, transform it, and train a Collaborative Filtering model.
   Worker Process: This is the glue. We'll use Celery to schedule/run the trained model predictions and update data for Django-related user recommendations.

**What you'll learn:**

   Learn

-  how to integrate Django & Celery
-    Learn how to use HTMX with Django for Dynamic Loading (no JavaScript Needed)
-    Training a Machine Learning Model with SurpriseML and an example in Keras
-    Build a rating system in Django with dynamic rating buttons. These ratings can be used on any Django Model
-    Learn how to run periodic background task and/or schedule functions to run exactly when needed
-    How to perform batch inference effectively using Django for *any* large workloads and/or ML packages
-    How to load large datasets into a SQL database through Django Models
-    Where to find great datasets online
-    How to implement an "infinite" review page that will always give a new item after rating.
-    So much more!

{% embed https://www.youtube.com/watch?v=8-ULxTMbm3k %}
I Substantially Reworked ParseJS
Tags: parsejs, watercooler, javascript, news
Published: 2023-05-30 02:29:42

Apparently [ParseJS](https://github.com/CalinZBaenen/ParseJS) was not built so great and did not work as I intended, or had recalled.
I went back and redid it; in the process, I removed eleven lines ov code and improved the clarity (for myself, at least) quite a bit.

Also, the behavior ov the `parse_string` function has changed slightly; instead ov returning an empty array if there are no tokens, it continues how it would if there were tokens, meaning that if `includeUnknownChars`, formerly `iukwc` (for "**i**nclude **u**known **k**ey**w**ord **c**haracters"), is `true`, `parse_string` will return an array with all the characters ov `str` split.
Add Google Analytics Tracking Code to All Pages Automatically
Tags: seo, webdev, tutorial
Published: 2023-05-30 01:33:53

If you have many HTML pages in a directory, adding Google Analytics tracking code to all of them can be a bit frustrating.

In this short tutorial, I show you how to do it with a bash script that automatically does the job.

First, copy the code from your Google Analytics console, and paste it to a file named `google-analytics`.

Then, write the following code to a file, say [`add-gtag.sh`](http://add-gtag.sh) and give it the execution permission:

```bash
chmod u+x ./add-gtag.sh
```

```bash
#!/bin/bash

# From: dotenx.com

# description: 
# Add Google Analytics to all HTML files in a directory. Google Analytics code should be in a file called google-analytics in the same directory as this script.

# usage:
# ./add-gtag.sh directory

# Tested on Mac-zsh


directory="$1"

if [ -d "$directory" ]; then
  for file in "$directory"/*.html; do
    if [[ -f "$file" ]]; then
      sed -i.bak '/<head>/r google-analytics' $file
    fi
  done
else
  echo "Directory not found."
fi

rm $directory/*.bak
```

Now, all you need to do is to execute the script like this:

```bash
./add-gtag.sh <your directory>
```

You can find this code here on [GitHub](https://gist.github.com/mkamrani/a159516f73db0e8adf10e5d88ec2a370) too.