teleren/devto huggingface dataset:
Tic-tac-toe with Python
Tags: python, programming, gamedev, computerscience
Published: 2021-09-23 11:27:27

Hi there, this my first ever post. I'm doing this as part of my study to learn computer science. I started learning python 6 months ago, but gonna be honest here, I didn't take it seriously and procrastinated a lot. I just realized a couple months ago that in one year I'll be going to university, so I really should learn a bit about computer science. So I started learning python a bit more seriously now and I'll be sharing about my first program that I created by myself, which is a tic-tac-toe game.

#### So here's a rundown to my program

So firstly I used a dictionary to assign each of the boxes, with letters going to the left and numbers going down![Dictionary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9l8cqagyn6y9sm65w6p3.png)

I then created an infinite loop using while True where each turns will be played. In that loop I also created a function called [GameCondition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iinvbtp39v0n6dufd8qp.png) to see determine the winners of the game. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iinvbtp39v0n6dufd8qp.png) (Note: I really don't know if this part of the program can be improved, but this is the best that I could think of.) 

This is the part where we will get the inputs from the players ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrlldg5mbi3qqtl0auiz.png) In this part, we first get the input from the user. Because I made the dictionary with uppercase letters, I also used the upper function to make all the inputs uppercased. After that we determine if the player is **X** or **O** by counting the number of turns that have been played. Because we start with X, the one with even numbers will always be X and O will always be y, so I just used a conditional statement to determine if the number of rerun is odd or not. After that we use the [GameCondition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iinvbtp39v0n6dufd8qp.png) function to see if there has been a winner or not. If it returns false, the code will print the board again and continue to loop again. If it returns True, the code will print the final result and breaks from the loop, hence stopping the code. 

(**Note**: I did realize that I need a way to determine if that particular dictionary has been taken by another player or has been played, but I haven't figured out how to solve that problem, so I'll probably improve my code down in the future.)
Best Online Linux Terminals
Tags: linux, terminals, virtual
Published: 2021-09-23 11:26:19

In case you are an enthusiastic Linux client, you should presumably be comfortable with virtual Linux terminals, likewise alluded to as virtual consoles (VC). A Linux working framework accompanies a virtual terminal. It is utilized to run and control different utilities and applications. 

Not simply Linux, virtual terminals are utilized by most Unix-like working frameworks as well, including Linux, Illumos, BSD, and UnixWare. These permit to enter orders utilizing the console and show the yield. 

![Linux Terminals](https://i0.wp.com/itsfoss.com/wp-content/uploads/2018/07/JS-UIX-online-linux-terminal.jpg?resize=743%2C567&ssl=1)

### What is an Online Terminal for Linux? 

Anyway, what's the contrast between a VC and an online Linux terminal? Very little, then again, actually a distant worker has a Linux terminal online and it is available through a web association, however with specific impediments. Utilizing a Linux online terminal could be another experience for you. 

Presently, for what reason do we utilize an online Linux terminal? In case you're an understudy or a novice in programming advancement who needs to concentrate on Linux orders, it's hard to set up virtual machines on any neighborhood gadget to rehearse. 

To defeat this, you can utilize an online Linux terminal to test shell scripts and orders, or connection to a far off Linux worker through SSH. There are huge loads of Linux terminals and slam compilers accessible online. 

It doesn't make any difference assuming you need to learn Linux orders or essentially execute your shell scripts, a terminal Linux online can take care of you. This is especially helpful when utilizing Windows. 

While Windows Subsystem for Linux is accessible to introduce Linux inside Windows, online Linux terminals are more valuable for a quick test. In this article, we will examine 10 of the best online Linux terminals. 

You can utilize them to rapidly get everything rolling with Linux orders without going through the issues of introducing and setting up virtual machines or Linux distros.

#### Top [Online Linux Terminals](https://www.techgeekbuzz.com/best-online-linux-terminals/)

1. JsLinux
2. Webminal
3. Codeanywhere
4. Tutorialspoint
5. Copy.sh
6. JS/UIX
7. Linux Containers
8. CB.VU
9. Virtual x86
10. JDOODLE

## Conclusion

It's an ideal opportunity to peruse, examination, and play with some code since you think about the best online Linux terminals and slam editors. Access the online virtual Linux terminal that obliges every one of your prerequisites and begin programming in Linux. Glad learning!
🔥 Next JS Tailwind Template Free using TypeScript, ESLint, Prettier and Husky
Tags: react, webdev, showdev, javascript
Published: 2021-09-23 11:05:01

---
title: 🔥 Next JS Tailwind Template Free using TypeScript, ESLint, Prettier and Husky
published: true
description: Next JS Tailwind Starter Template built on top of React, Next JS, TypeScript and Tailwind CSS. Made for developer with ESLint, Prettier, Husky.
tags: react, webdev, showdev, javascript
cover_image: https://github.com/ixartz/Next-js-Boilerplate/raw/master/public/assets/images/nextjs-starter-banner.png?raw=true
---

Next JS Tailwind Starter code free and open source with developer experience first with React, TypeScript, Tailwind CSS, ESLint, Prettier, Husky.

The GitHub repo have already reached 500+ stars 🌟.

Built for production with high-quality:

- 🔥 Next JS 11
- 🎨 Integrate with Tailwind CSS 2 (w/ JIT mode)
- 🎉 TypeScript
- ⚛️ React
- ✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
- 🛠 Code Formatter with Prettier
- 🦊 Husky for Git Hooks
- 🚫 Lint-staged for running linters on Git staged files
- 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript
- 🤖 SEO-friendly
- ⚙️ Bundler Analyzer
- 🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
- 🌈 One minimalist theme

You can find a [NextJS Tailwind Template live demo](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/)

{% github https://github.com/ixartz/Next-js-Boilerplate %}

## Build your SaaS faster

Building your SaaS product faster with [Next JS SaaS Boilerplate](https://nextlessjs.com). Save you 5 months of development and design time.

[![Next JS SaaS Boilerplate](https://nextlessjs.com/assets/images/hero-image.png)](https://nextlessjs.com)

## Other Next JS Templates and Themes

Checkout our [Next JS Theme gallery](https://creativedesignsguru.com/category/nextjs/)

| [Green Nextjs Landing Page Template](https://creativedesignsguru.com/landing-green-modern-nextjs-theme/) | [Blue Saas Nextjs Theme](https://creativedesignsguru.com/landing-purple-modern-react-theme/) |
| --- | --- |
| [![Green Nextjs Landing Page Template](https://creativedesignsguru.com/assets/images/themes/landing-green-modern-nextjs-theme-xs.png)](https://creativedesignsguru.com/landing-green-modern-nextjs-theme/) | [![Blue Landing Page Nextjs Theme](https://creativedesignsguru.com/assets/images/themes/landing-blue-modern-nextjs-theme-xs.png)](https://creativedesignsguru.com/landing-blue-modern-react-theme/) |
How I can reset private instance variables if an exception is not thrown in a classe's public methods?
Tags: help, php
Published: 2021-09-23 11:02:48

What I want to achieve is to have a mechanism that sets and resets a guard value so I can avoid an object to be saved if not all the requirements are met.

So how In the question bellow I have a private variable that tells me if I should proceed into the object save or not.

{% stackoverflow 69298613 %}

But I want to implement a way that allows me to reset it in case that everything is done as it should.

Can you help me with that?
Custom Ionic Animation On Page Transition
Tags: ionic, angular, animation, directive
Published: 2021-09-22 21:04:43

Hello,
We want to make animation for ion-content and prevent the ion-header to be animated

![ionic animation directive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9rrtesxdrlso35v136r.gif)


####let do it fast :D

Create a Directive Module
```cli
ionic generate module directive
```
```cli
ionic generate directive page-animation --module directive
```

This is `PageAnimationDirective` :
```typescript
import { Directive, ElementRef } from '@angular/core';
import { createAnimation  } from '@ionic/core';
import { AnimationController } from '@ionic/angular';

@Directive({
  selector: '[appPageAnimation]'
})
export class PageAnimationDirective {

  constructor(private animationCtrl: AnimationController, private el: ElementRef) {
    this.dropIn();
  }

  private dropIn() {
    const animation = createAnimation()
              .addElement(this.el.nativeElement)
              .duration(500)
              .iterations(1)
              .fromTo('transform', 'translateY(-10%)', 'translateY(0%)');
    animation.play();
  }
}
```
Export PageAnimationDirective from DirectiveModule:

```typescript
@NgModule({
  declarations: [PageAnimationDirective],
  imports: [
    CommonModule
  ],
  exports: [PageAnimationDirective]
})
export class DirectiveModule { }
```

Import DirectiveModule to Component.Module.ts of each component you want to be animated like this:

```typescript
@NgModule({
  imports: [FormsModule, DirectiveModule],
  declarations: [FolderPage]
})
```
From you component.html add appPageAnimation directive to ion-content:
```html
<ion-content [fullscreen]="true" appPageAnimation>
```
To Prevent ion-header, tabs, etc.. to be animated on page transition, make animate flag to false from app.module:

```typescript
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    IonicModule.forRoot({ animated: false  }),
    ...
}
```
Enjoy It :D
We made an evolved News Feed Eradicator...now in Beta!
Tags: showdev, news, extension
Published: 2021-09-23 10:57:29

Hi Dev Community!

Throughout the summer, @paul_designs, @avi_dave, and I were creating Grey Software's first public product: Focused Browsing. We would love for you to try it out!

![Focused Browsing Promo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rkgbnradlyt6oe3zv7a.png)

[Product Page](https://grey.software/focused-browsing)
[Get It on Chrome](https://chrome.google.com/webstore/detail/ocbkghddheomencfpdiblibbjhjcojna)
[Get It on Firefox](https://addons.mozilla.org/en-US/firefox/addon/focused-browsing/)

Like 200,000 other people, we used News Feed Eradicator (NFE) to control the detrimental effects of consuming feeds. 

We loved the extension, but we had a few problems with it.

- It was tedious to toggle between focused and unfocused modes. You had to open the extension's settings page, and click on the website that you want to enable/disable. 
- The codebase had gained bloat and complexity over the years. Things like using 2 Redux stores made it difficult to reason about the program flow and we knew that adding new functionality like keyboard shortcuts and blocking promoted posts would be tricky. 

Our extension recently went into Beta and we're eager to hear everyone's feedback and find any edge cases we haven't covered. Thank You!
Why nowadays do I consider Page-Objects an anti-pattern in web test automation?
Tags: testing, webdev, frontend, cypress
Published: 2021-09-23 10:56:58

## Add testability on day one, and get rid of unnecessary complexities

First, let me give you my perspective on the Page-Objects testing automation pattern in a few words.

> An abstraction layer of the application under test's pages where we define the elements we want to interact with and the methods to interact with them.
> ~ Walmyr F.

Now to the point.

In the past, it was common to build the state in the application under test (AUT) via its graphical user interface (GUI). So, it made sense to use Page-Objects, to reduce code duplications and, as a bonus, having readable tests.

However, web technologies have evolved, and we can take advantage of all they offer.

Modern frontend applications are built tightly decoupled from backend systems, and they're componentized.

This means that we can build the state of the AUT in many different programmatic ways, resulting in tests that require a specific state, not having to rely on lots of GUI elements other than the ones' target of the test.

Some mechanisms for state creation are:

- Calling an API via a network request
- Using the browser's API to interact with the `window` object, `localStorage`, `sessionStorage`, etc.
- Mocking requests with static files
- Testing components in isolation
- Setting `cookies`

All that results in simpler tests without unnecessary abstractions (Page-Objects) that might not be useful if we build apps with testability in mind.

The web has evolved. Finally, testing has too!

Yup, that's [**Cypress.io**](https://www.cypress.io)'s slogan, and if I were you, I would give it a try, as it allows you to write readable and simple tests.

By the way, I've a few [**Cypress courses on Udemy**](https://udemy.com/user/walmyr). Check them out!

Thanks for reading. 😉
Webinar Recap: Realtime data on the Jamstack with Ably & Strapi
Tags: jamstack, strapi
Published: 2021-09-23 10:49:06

Our fourth webinar in this series was hosted by Daniel Phiri, Devrel at Strapi, and joined by Srushtika Neelakantam, Developer Relations, and Partner Engineer at Ably.

In this one hour interactive webinar, Daniel and Srushtika debunk the myth of static only Jamstack sites and shows us how to leverage a tool like Ably to enable real-time data on the Jamstack

If you missed the webinar — or you'd like to relive it — check out the full recording below.

By the numbers: 
📝 +140 registrants 
👥 +45 attendees 
🔊 +100 messages
💬 +5 Questions

<iframe width="560" height="315" src="https://www.youtube.com/embed/CGW3ui3BuXo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


Stay tuned for more exciting [webinars](https://www.youtube.com/playlist?list=PL7Q0DQYATmvhlK_sjVYjcKuAJ4kLDEqKz)! Join our [Newsletter](https://strapi.io/email-updates) & and follow us on [Twitch](https://www.twitch.tv/strapijs)
JavaScript Classes
Tags: class, javascript, beginners
Published: 2021-09-23 10:45:56

A bit about class in js.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xq4lwz7uyv0eyfuor4rh.png)

###Class Methods


    class Animal {
      constructor(name, legs) { ... }
      speech() { ... }
      numberOfLegs() { ... }
    }
    const dog = new Animal();
    const cat = new Animal();
    const spider = new Animal();
The code above defines a class ClassName. The curly braces { } delimit the class body.
The class becomes useful when you create an instance of the class (dog, cat, spider). An instance is an object containing data and behavior described by the class.

ALWAYS add a method named __constructor()__. It is executed automatically when a new object is created and is used to initialize object properties. 
_Animal_’s _constructor_ has two parameters __name__ and __legs__, which is used to set the initial value of the fields _this.name_, _this.legs_.

__new Animal()__ creates instances of the Animal class.

                        SO...

    "CLASS is used to describe one or more objects. 
    It serves as a template for creating, or 
    instantiating, specific objects within a program. 
    While each object is created from a single class, 
    one class can be used to instantiate multiple 
    objects."
Vocabulary Building Day 17
Published: 2021-09-23 10:29:51

1. **inexorable**(adjective): impossible to stop or prevent
![alt text](https://64.media.tumblr.com/604985982cd673c991de2a575075945f/tumblr_inline_pecpzhOCgz1qbolbn_500.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=inexorable+meaning&oq=inexorable&aqs=chrome.0.0i433i512j69i57j0i512l8.9114j0j7&sourceid=chrome&ie=UTF-8)

2. **eschew**(verb): avoid and stay away from deliberately
![alt text](https://assets.wordgenius.com/wordgenius/Word+of+The+Day+Images/Eschew.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=eschew&oq=eschew&aqs=chrome..69i57j0i433i512l2j0i131i433i512j0i512l6.4178j0j9&sourceid=chrome&ie=UTF-8)

3. **culpability**(noun): responsibility for a fault or wrong; blame.
![alt text](https://assets.change.org/photos/6/xd/sy/JHxDsySaXsPSVjJ-800x450-noPad.jpg?1529726909)
[Checkout Pronunciation](https://www.google.com/search?q=culpability&oq=culpability&aqs=chrome..69i57j0i433i512j0i512l8.5412j1j9&sourceid=chrome&ie=UTF-8)

4. **querulous**(adjective): complaining in a rather petulant or whining manner.
![alt text](https://merriam-webster.com/assets/mw/images/article/art-global-footer-recirc/querulous-2426-d7fab13aa7fb6f18ab3648ef7c2071bb@1x.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=querulous+meaning&oq=querulous&aqs=chrome.0.0i433i512j69i57j0i512l8.26085j1j9&sourceid=chrome&ie=UTF-8)
5. **rustic**(adjective): relating to the countryside; rural.
![alt text](https://cdn.decoist.com/wp-content/uploads/2014/01/www.clbarchitects.png)
[Checkout Pronunciation](https://www.google.com/search?q=rustic&oq=rustic&aqs=chrome.0.69i59j0i20i263i433i512l2j46i175i199i512j0i433i512l2j0i512l4.4567j0j9&sourceid=chrome&ie=UTF-8)
Halftone text effect using HTML & CSS
Tags: html, css, codepen
Published: 2021-09-23 10:16:02

Long story short, got fascinated with [Halftone](https://en.wikipedia.org/wiki/Halftone) and took a crack at it...

Drop a ❤️

{% codepen https://codepen.io/ajmalhassankn/pen/KKqBbRN %}
Cumulocity IoT demo for Smart Device Makers
Tags: iot, video, smart, device
Published: 2021-11-04 13:45:47

---
title: Cumulocity IoT demo for Smart Device Makers
published: true
date: 2021-09-23 09:39:33 UTC
tags: #iot, #video, #smart, #device
canonical_url: https://tech.forums.softwareag.com/t/cumulocity-iot-demo-for-smart-device-makers/244504
---
 
YouTube: {% youtube 1SBxZzexbgc %} 

A demo on how a smart device manufacturer can make use of IoT.  
A smart device manufacturer could be in the market for several years, but now he wants to serve his customers, with additional services?

Managing or monitoring devices, providing real-time insights into what is happening with the device, and a lot more.  
An IoT Platform can be a big enabler here and help you support fast progress. Use a platform for the mandatory features and build solutions that suit the needs of your customers.

[Read full topic](https://tech.forums.softwareag.com/t/cumulocity-iot-demo-for-smart-device-makers/244504)
Rate my first CSS drawing
Tags: showdev, css, html, codepen
Published: 2021-09-23 09:38:16

I have been hacking with CSS for a long period but I never made any CSS drawing or CSS art. I think it's time for another CSS hacker to join the club!

I took one of my favorite anime character and I tried to do something in one day to see my level before spending more time.

I came up with this 

<sup>It will not work on Safari, scroll down to the embed tweet to see a screenshot</sup>

{% codepen https://codepen.io/t_afif/pen/MWoXXRd %}

Not that perfect but quite good for a `6h` work. I would have done better if I considered an easier illustration but I took a complex one as a reference 😳 👇

![Livai ackerman](https://i.pinimg.com/originals/15/3a/be/153abee445a48e98bc10d8a29d6b7a16.jpg)

Few notes:

* It's responsive.
* I used a lot of `clip-path`. A good technique for responsive but a pain to handle. 
* I tried to keep a reduced HTML code
* I used an SVG filter to smooth up a few edges (related post: https://dev.to/afif/css-shapes-with-rounded-corners-56h). I am not proud of this one but I wanted a fast solution to end my drawing before midnight. Next time it will be a CSS-only solution.

I tweeted about it yesterday in case you want to retweet it or draw the attention of a CSS artist 🧐

{% twitter 1440835309801918464 %}


Let me know what do you think 👇👇

✔️ This is amazing, we want more like this!
❌ Don't do this anymore 🤮 we want more tutorials and funny collections but no more drawing please!



<sub><sub><sub><sub>**PS**: If you will choose the ❌, I will haunt your dreams for the rest of your life 👹</sub></sub></sub></sub>
Setting up new project
Tags: express, knex, objection
Published: 2021-09-23 09:36:43

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovaem45ea3lmxe4josic.png)
 
What do you know about solid, kiss and bunch of other things?
Fug them.
When you are writing any kind of code. Just write and see the result. You do not like it? Go change it. 

*Do not forget one thing, Rome is not built in one day or night :wink:*

Let`s assume we all have nodejs installed. Create folder named like boilerplate and open that folder in your code editor.

> initiate - `npm init -y`

I like MVC, like a lot. So create bunch of folders such as controllers, models, services, middlewares, database(migrations, seeds), utils

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrw1jcl75r2m5mexeza2.png)

##### Install necessary packages
* `npm install knex -g`
* `npm install objection knex mysql --save`
* `npm install express dotenv --save`

Go grab the code from [here](https://github.com/ilyosdev/boilerplate)
and continue.

First of all check the codebase, if you like it you are more than welcome to use it. If no, what the hell are you doing here then? Go leave my blog. Kidding 😁.

Let me show you some things here:
* `npx knex migrate:make posts` - this will create migration file
* `npx knex migrate:latest` - this will create tables in your db
* `npx knex migrate:rollback` - if you forgot something to add in your latest migration and you change it, try this then you are good to migrate again, without this your terminal spits right in your face.
* `npx knex seed:make posts` - this creates file which you can populate with good old friend faker then you can insert it with `npx knex seed:run`.