teleren/devto huggingface dataset:
Python Projects for Beginners🔥 { must try }
Tags: programming, beginners, tutorial, python
Published: 2022-07-24 13:37:56

## These are some Python Projects you must try if you are a beginner.

1. Number Guessing Game
2. Rock Paper Scissors
3. Hangman Game
4. Binary Search
5. Check Leap Year
6. Desktop Notifier

These projects give you idea of the basic python programming like variables, loops, functions and some packages.

## Access Code for the Projects here 👉 [github.com](https://github.com/vamsi-tupakula/python-mini-projects)
---

## Concepts you can learn with each project :

Number Guessing - random module/package and loops

Rock Paper Scissors - conditional statements in Python and also the random module.

Hangman - getting a random word, sets, adding and removing into sets

Binary Search - Very important Searching Algorithm

Leap Year - Logic behind leap year

Desktop Notifier - plyer module, how to get notification with python.
Glimmer DSL for SWT v4.24.1.0 Improved Hello, Canvas Path!
Tags: ruby, desktop, gui, dsl
Published: 2022-07-24 13:26:39

[Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) v4.24.1.0 has been released with the following changes:

- Upgrade to JRuby 9.3.6.0
- Speed up app scaffolding by dropping packaging from the scaffolding steps as there is no point in packaging an unfinished product
- Refactor/simplify [Hello, Canvas Path!](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#hello-canvas-path)

## Updated Hello, Canvas Path! Sample Screenshot

![screenshot](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-canvas-path.png)

## Updated Hello, Canvas Path! Sample Code

```ruby
# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/development/docs/reference/GLIMMER_SAMPLES.md#hello-canvas-path

require 'glimmer-dsl-swt'

class HelloCanvasPath
  include Glimmer::UI::Application
    
  after_body do
    regenerate
  end
  
  body {
    shell {
      grid_layout {
        margin_width 0
        margin_height 0
        margin_top 5
      }
      
      text 'Hello, Canvas Path!'
      minimum_size 800, 700
      
      @button = button {
        layout_data :center, :center, true, false
        
        text 'Regenerate'
        enabled false
        
        on_widget_selected do
          regenerate
        end
      }
      
      canvas {
        layout_data :fill, :fill, true, true
        background :white
        
        text('line', 15, 200) {
          foreground :red
        }
        @path1 = path {
          antialias :on
          foreground :red
        }
        
        text('quad', 15, 300) {
          foreground :dark_green
        }
        @path2 = path {
          antialias :on
          foreground :dark_green
        }
        
        text('cubic', 15, 400) {
          foreground :blue
        }
        @path3 = path {
          antialias :on
          foreground :blue
        }
      }
      
      on_widget_disposed do
        # safe to kill thread as data is in memory only, so no risk of data loss
        @thread.kill
      end
    }
  }
  
  def regenerate
    @thread = Thread.new do
      @button.enabled = false
      @path1.clear
      @path2.clear
      @path3.clear
      y1 = y2 = y3 = 300
      700.times.each do |x|
        x += 55
        x1 = x - 2
        x2 = x - 1
        x3 = x
        y1 = y3
        y2 = y1
        y3 = [[y3 + (rand*24 - 12), 0].max, 700].min
        @path1.content {
          line(x1, y1 - 100)
        }
        if x % 2 == 0
          @path2.content {
            quad(x1, y1, x2, y2)
          }
        end
        if x % 3 == 0
          @path3.content {
            cubic(x1, y1 + 100, x2, y2 + 100, x3, y3 + 100)
          }
        end
        sleep(0.01)
      end
      @button.enabled = true
    end
  end
end
        
HelloCanvasPath.launch
```

Updated Hello, Canvas Path! Sample Tutorial

{% youtube ThmNcXTldY8 %}

[Glimmer On!](https://github.com/AndyObtiva/glimmer-dsl-swt)
error ts(2345)
Tags: react, vscode, beginners, help
Published: 2022-07-24 13:00:00

argument of type 'htmlelement | null' is not assignable to parameter of type 'element'. type 'null' is not assignable to type 'element'.  ts(2345)


import.js 

```
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

const container = document.getElementById('root')
const root = createRoot(container)
root.render(<App />)
```
How do you know if your ecommerce site is hit by a Google Core Update?
Tags: beginners, seo, ecommere, tutorial
Published: 2022-07-24 13:00:00

## What are Core Updates?

> Several times a year, we make significant, broad changes to our search algorithms and systems. We refer to these as "core updates." They're designed to ensure that overall, we're delivering on our mission to present relevant and authoritative content to searchers. These core updates may also affect Google Discover.

[What site owners should know about Google's core updates @ Google
](https://developers.google.com/search/blog/2019/08/core-updates)

A few times a year Google push out [Core Updates](https://www.searchcandy.uk/seo/seo-glossary/core-updates/) which shake up search results with the aim of improving results for Google users.

If you own or manage an ecommerce website's SEO, you may notice that your site has been impacted by a Google Core Update and wonder what you can do.

## How do you know if your ecommerce website has been hit by a Core Update?

Check your analytics and Search Console to see if you can pinpoint the approximate date your rankings/traffic was hit.

Then see if this matches up with a date in a [list of algorithm/Google Core Updates](https://moz.com/google-algorithm-change) or a recent update announced by Google's [Search Liaison on Twitter](https://twitter.com/searchliaison).

Google also recently released their own [list of Core Updates here](https://developers.google.com/search/updates/ranking).

## What are the symptoms of being hit by a Core Update?

Usually you will see your rankings and traffic to your products and categories go down, and will mostly likely see a fall in sales also.

## What to do about it?

Make sure you are following all ecommerce SEO best practice by checking our [guide to ecommerce SEO](https://www.searchcandy.uk/ecommerce/seo-guide/).

Google also have a [guide to SEO basics](https://developers.google.com/search/docs/beginner/seo-starter-guide) you can read here.

What we would recommend is to:

- Not panic
- Improve the quality of your site
- Make sure your site does not have any technical issues
- Audit the quality of your content
- Audit your site for low quality pages that are unlikely to answer the queries they are trying to rank for

We hope this quick guide was useful.
Python Anti-pattern you should avoid .
Published: 2022-07-24 12:59:19

## Python Antipattern :  Impure(IO) Default Arguments

One of most liked features of python functions is default arguments  . We use them 
every day . But there is gotcha that you need  to take care . 

Function default arguments are evaluated at module load time rather than function invocation time .
Which helps with perfomance benefits when the default arguments are static and deterministic .

So if your function is non-deterministic or has side-effects, you could run into trouble.
As the example shows, the printed time is frozen; it was set once when the code was first evaluated.

```python 

# Antitpattern and  buggy
def current_datetime(dt = datetime.datetime.now()):
    print(dt)

>>> current_datetime()
2021-10-09 16:09:43.009959
>>> current_datetime()
2021-10-09 16:09:43.009959
    
# do this instead 

def current_datetime(dt=None) :
  if dt is None :
    dt = datetime.datetime.now()
  print(dt)

current_datetime()
>> 2022-07-24 16:07:16.435203
current_datetime()
>> 2022-07-24 16:08:16.635203

  
```
Learn React JS by building this one Web app
Tags: react, javascript, webdev, beginners
Published: 2022-07-24 12:23:52

Hello friends, Today in this post we will learn React JS by building a Quiz web app. So here we will try to implement React concepts in building this Quiz web app so by the end of this post you will be confident about React and able to build your own web apps. I have divided each concept into steps to better track where we are in. We will cover more theoretical knowledge in form of questions and answers in our next post. Also, this post will be updated based on your suggestion, please feel to contact/comment with us for suggestions that will help in improving this post.

Please read this post in our website
[Learn React JS by building this one Web app](https://codewithmarish.com/post/learn-react-js-building-web-app)

Also please don’t forget to subscribe to our youtube channel codewithmarish for all web development-related challenges.

[Code With Marish | Youtube](https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA)

Posted with ❤️ from somewhere on the Earth
Host images on Google Drive with Svelte!
Tags: javascript, webdev, svelte, programming
Published: 2022-07-24 12:23:00


![Product image, made with Svelte](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kadyztxf7zt8yk714nk.PNG)

**Do you use free hosting services like imgBB?** Since I explore programing and building weird products the way this kind of service limit the quality and overwhelms you with ads was pretty annoying 🥱

I was surprised that is totally possible to host any kind of media on your own Google Drive but Google doesn't provide a valid link out of the box in Drive!

So last month I decided to build [my own](https://www.imagehostcompany.com/) hosting service.

All the app was made with Svelte and Typescript with any Back-End!

Hope it will help you also when it's time to host a cat image :)

**Edit:** You can see the full breakdown [here](https://medium.com/@duprez.hugo/design-build-an-app-with-svelte-ecd7ed0729da)!
Any advice for the impostor syndrome? 😅
Tags: selfthught, motivation, impostorsyndrome, advice
Published: 2022-07-24 11:26:00

I have couple of years doing web development. And right now im struggling with freelance jobs. Im newbie and im learning a lot every day and growing my profile and my reputation. But every day that thought of "you are not ready yet" its constantly in my head.

I have no CS background but i have a lot of hours of self thought learning. That is other think that is constantly in my head "without a degree you wont get a good job in this".

I have to say that some days i wake up like "Why im doing this if you are seeing that its not working" but after that i thought about all the hours i invested and all the stuffs that i know right now and that ease the day.

I really want to know how you fight against this feeling thanks! 😁.

PS: I surely had a lot of mistakes translating this. I speak Spanish jeje. Thats another "feature" that im working on jeje.
Animated Card (CSS Animation)
Tags: css, beginners, html, programming
Published: 2022-07-24 11:24:00


![Animated Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gk9nudc6sv3idtyy50r.png)
Create an animated card in HTML & CSS

To change the styling of a card based on the element's hover state, focus state, or any of its descendants state, use the pseudo-class selectors `:hover` and `:focus-within`.

Using `overflow:hidden`, hide the extra content of the card and show it on hover.

## HTML Code
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background-image"></div>
    <div class="card">
        <img src="https://images.wallpaperscraft.com/image/single/honda_s2000_honda_car_322685_1280x720.jpg"/>
        <h3>Hover Me</h3>
        <div class="focus-content">
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet quia fugit labore dolores sint reiciendis perspiciatis<br/>
        </div>
    </div>
</body>
</html>
```
## CSS Code
```css
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.background-image {
    position: fixed;
    left: 0;
    right: 0;
    display: block;
    background-image: url(https://images.wallpaperscraft.com/image/single/honda_s2000_honda_car_322685_1280x720.jpg);
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    width: 100%;
    height: 100%;
    background-size: cover;
}
.card {
    width: 300px;
    height: 280px;
    padding: 0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #fff;
    z-index: 1;
  }
  
  .card * {
    transition: 0.3s ease all;
  }
  
  .card img {
    margin: 0;
    width: 300px;
    height: 224px;
    object-fit: cover;
    display: block;
  }
  
  .card h3 {
    margin: 0;
    padding: 12px 12px 48px;
    line-height: 32px;
    font-weight: 500;
    font-size: 20px;
  }
  
  .card .focus-content {
    display: block;
    padding: 8px 12px;
  }
  
  .card p {
    margin: 0;
    line-height: 1.5;
  }
  
  .card:hover img, .card:focus-within img {
    margin-top: -80px;
  }
  
  .card:hover h3, .card:focus-within h3 {
    padding: 8px 12px 0;
  }
```
## Output
![Animated Card Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syjpao2kbeod4twxqppy.png)
[Preview](https://animated-card-bay.vercel.app/)

Blog:- https://beginners-developer.blogspot.com
Binary Representations of Numeric Values
Tags: programming, beginners, computerscience, cpp
Published: 2022-07-24 11:09:53

The following cheat sheet shows the most common representations of integers, unsigned integers and floating point values used by most hardware platforms and programming languages.
![binary represenations of numeric values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59gewcv4hemf9nanb1og.png)Check out [this tool](http://evanw.github.io/float-toy) for visualizing and experimenting with IEEE floating point bit representations.

---
## The Situation in C++
### `std::numeric_limits<Type>`
provides numeric properties for all of C++'s fundamental types (`int`, `float`, `double`, `unsigned int`, etc.). The cheat sheet below shows how the return value of `std::numeric_limits<Type>`**`::member_function()`** relate to the binary representation of numeric values for `Type`.
![C++ std::numeric_limits cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tys74i5vodic8m0bmzzx.png)
#### Using `numeric_limits`
```cpp
#include <limits>
// smallest negative value:
std::cout << std::numeric_limits<double>::lowest();

// float/double: smallest value > 0
// integers: smallest value
std::cout << std::numeric_limits<double>::min();

// largest positive value:
std::cout << std::numeric_limits<double>::max();

// smallest difference btw. 1 and next value:
std::cout << std::numeric_limits<double>::epsilon();
```

### Bitwise Operations in C++
![bitwise operations in C++](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsx96unrj00v27pqzsui.png)
#### Some examples for manipulating the bits of unsigned integers
```cpp
#include <cstdint>
                             // value | memory bits
std::uint8_t a = 6;          //       | 0000 0110
std::uint8_t b = 0b00001011; //       | 0000 1011
std::uint8_t c1 = (a & b);   // 2     | 0000 0010
std::uint8_t c2 = (a | b);   // 15    | 0000 1111
std::uint8_t c3 = (a ^ b);   // 13    | 0000 1101
std::uint8_t c4 = ~a;        // 249   | 1111 1001
std::uint8_t c5 = ~b;        // 244   | 1111 0100       
 
// test if int is even/odd:  // result:
bool a_odd  = a & 1;         // 0 => false
bool a_even = !(a & 1);      // 1 => true
```
```cpp
#include <cstdint>
                             //     | memory bits
std::uint8_t a = 1;          //     | 0000 0001
a <<= 6;  // 64              //     | 0100 0000
a >>= 4;  // 4               //     | 0000 0100

std::uint8_t b1 = (1 << 1);  // 2   | 0000 0010
std::uint8_t b2 = (1 << 2);  // 4   | 0000 0100
std::uint8_t b3 = (1 << 4);  // 16  | 0001 0000
```

### Type Widths / Memory Sizes of Fundamental Types
![memory sizes of fundamental types in C++](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx28nvoyiv69d7vn23zg.png)

---
For more cool cheat sheets see my [collection of C++ cheat sheets](file:///C:/Users/admin/Sites/hcpp_debug/cpp/cheat_sheets.html).
Create Block Diagrams at typing speed
Tags: productivity, showdev, news, webdev
Published: 2022-07-24 10:56:26

Hello all !

Introducing web app : https://blockdiagram.onrender.com/

Create simple block diagrams quickly with plain text. Control basic blocks/arrows positions without any drag and drop. Positioning blocks/arrows ourselves helps us quickly understand/remember diagrams, and this tool does the same easily and quickly.

This has advantage of text to diagram model while still having easy control on the diagram format. Positioning blocks ourselves helps us quickly understand the diagram flow even if its complex, compared to the diagrams which are formatted based on pre-defined rules which sometimes becomes difficult to grasp.

This webApp helps you be more productive while focussing on design.

Useful for :
a) High level simple System/Architecture Diagrams.
b) Also comes handy to create quick diagram to brainstorm system design while collaborating with colleagues.

Links
Create Block Diagrams : https://blockdiagram.onrender.com/
Examples : https://blockdiagram.onrender.com/examples
About : 
https://blockdiagram.onrender.com/about
Feedbacks/Queries : https://forms.gle/3n3cKMppQVTDfeMd7 or just comment below

Boost your productivity !
How To Add a Blank Space for Instagram Highlight
Tags: instagram, webdev, tutorial, writing
Published: 2022-07-24 10:52:00


## Copy and paste the empty space

To remove the name, go to the third party website and copy the empty space, then paste it onto the Instagram page.

To copy the empty space, go to the Invisible Character webpage.

you see the "Copy" button.

Tap on the button to copy the blank space.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3an5q95egypqahca8zip.PNG)

You can also download app from [Playstore](https://play.google.com/store/apps/details?id=com.character.invisible)

for more details visit [this article](https://www.zupyak.com/p/3237277/t/how-to-add-a-blank-space-for-instagram-highlight).
How to run Node in package.json and also install and run nodemon
Published: 2022-07-24 10:31:00

### Node project run
- inside the package.json 

- first way to run

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vgadyxbcwzjdn7idpih.PNG)

- second way to run

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vcikaek8xxu63vw5m3t.PNG)

- third way to run

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


---

### How to install a npm package
- `npm install packageName`


### How to uninstall a npm package
- `npm uninstall packageName`

---

### How to install and run nodemon package
- `npm install nodemon`

- and also set `"start": "nodemon index.js"` in scripts file in package.json

- and final scripts in package.json file looks like this image:
```javascript
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },
```

- full index.js file and package.json file image below there:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7q7xgyxv3h9giiqvsf1.PNG)
Vue Js Router and Nav CSS
Tags: javascript, vue
Published: 2022-07-24 10:15:03

Hello, I started learning Vue JS and so far so good. What I have currently is an HTML dashboard converted to the Vue App and all is working as expected except for the navigation bar. When I navigate and change my component without page reload the dropdows navigations stop working I have to reload the browser for them to work. All my CSS and JS files are included in the index.html and I also tried them in the main.js but same result. What have I not done?
Thanks in advance.
everything you need to know about carbon!
Tags: cpp, programming, news
Published: 2022-07-24 09:55:39

yesterday, on 23rd July carbon-lang launched a [YouTube video](https://www.youtube.com/watch?v=omrY53kbVoA&feature=youtu.be&ab_channel=CppNorth) with cpp north. in this post ill talk about everything you need to know about carbon, the experimental successor of c++

## why do we need carbon in the first place?
c++ is the dominant programming language for software which focus on performance. it also has massive and constantly growing codebases and investments. unfortunately, it is struggling to further improve.  it is hard to improve  it because of years of accumulating technical debt and challenges with its evolution process.

## plus points of carbon

- it's performance level(which is really important) matches that of c++. c++ is still one of the fastest languages today

- existing c++ libraries can easily adopt carbon

- carbon has a gentle learning curve(plus points if you are familiar with c++) and it's syntax is similar to that of c++

carbon can be built on top of c++'s existing ecosystem. this means the already existing investments, codebases and the most important aspect, developers will also be part of the new carbon ecosystem

as the developers of carbon themselves said that "Carbon aims to fill an analogous role for C++"

## goals of carbon-lang
the main aims of carbon are to support performance critical software, code which is easy to understand, write and read, fast and scalable development. [there is a detailed goals document which you can check out too!](https://github.com/carbon-language/carbon-lang/blob/trunk/docs/project/goals.md)

## project status
carbon currently is still an experimental language and it will take a time before we can see it being used in the mainstream market. the developers are trying to better understand weather they can build a language which meets their successor language criteria and also gather a critical mass of interest within the c++ community. they are currently focused on getting more feedback and participation from the c++ community. [here is the document which lists their objectives and goals for the year](https://github.com/carbon-language/carbon-lang/blob/trunk/docs/project/roadmap.md)

here is the carbon-lang repo on github


{% embed https://github.com/carbon-language/carbon-lang %}