teleren/devto huggingface dataset:
DOM Manipulation with Plain Old Javascript
Tags: beginners, webdev, javascript, codenewbie
Published: 2020-11-14 17:34:43

---
title: DOM Manipulation with Plain Old Javascript
description: In this intro to the basics of DOM manipulation, I'll show you how to select elements and change classes and styles using plain old Javascript.
published: true
date: 2020-11-06 13:45:00 UTC
tags: beginners,webdev,Javascript,CodeNewbie
canonical_url: https://raddevon.com/articles/dom-manipulation-with-plain-old-javascript/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/kxar28omghsx4kmdanto.jpg
---
One of the most useful things you’ll be doing with Javascript is manipulating the DOM. The DOM is the document object model. It’s a model of your HTML document in Javascript that allows you to make changes to your web page as users are using your page.

DOM manipulation is what makes it possible to build web sites that work like applications. When you’re using a web site that changes in response to your inputs (clicks, keypresses, etc.) without having to reload a new page each time, that’s happening through DOM manipulation.

Front-end frameworks exist to help you build web apps that rely heavily on DOM manipulation, but they’re not necessary if you just need to do some small changes in response to a couple of different user interactions. If that describes what you’re building, do your users a favor and skip the framework. Manipulate the DOM yourself in plain old Javascript.

I’ve created a short video series to get you started. In this first video, I’ll teach you to select the element you want to interact with by querying the DOM, how to change CSS classes on an element, and how to style an element.

{% youtube suWO7Y27_R8 %}

Check out [this article back on my site](https://raddevon.com/articles/dom-manipulation-with-plain-old-javascript/) to grab my Javascript By Example cheatsheet. Stop Googling every concept you need to recall in order to learn faster. This cheatsheet works as a quick reference for the basics of Javascript!
PHP 8 attributes, what's new?
Tags: webdev, php
Published: 2020-11-06 13:28:32

PHP 8 is a promising release. Among all new features and breaking changes, there's a special feature called attributes that deserves, IMHO, at least one post.

## Disclaimer

I want to focus on the usefulness of attributes. I will give examples and stuff, but this won't be exhaustive.

## Where does it come from?

Attributes are available in various languages such as Java, C#, C++, or Rust.

In PHP, it exists too but in an unstructured form as a pseudo-language, and PHP developers use it very often.

If you are familiar with Symfony, you probably already use something called [Annotations](https://symfony.com/index.php/blog/new-in-symfony-5-1-route-annotations-priority), which is an additional layer that parses doc-comments to build mappings and configurations.

Annotations are excellent, but [the final RFC](https://wiki.php.net/rfc/shorter_attribute_syntax_change) likes to go further by including the feature in the language itself and extend its use to more elements.

Don't be afraid:

> Symfony 5.2 will include support for PHP 8 attributes to define routes and required dependencies. If you already use annotations, the transition will be seamless.

[Source](https://symfony.com/blog/new-in-symfony-5-2-php-8-attributes)

## What are attributes?

They are **structured** metadata. To write a class attribute, for example, you will do something like that:

```php
#[Attribute] 
class MyClass {
}
```

The idea is to associate mappings and configurations in code directly and to be able to fetch them elsewhere in the code easily.

## Metadata for what?

We write metadata to fetch them elsewhere in the code, for example, to check properties of elements. The Reflection classes are perfect candidates for that:

{% link https://dev.to/jmau111/reflection-in-php-2dj3 %}

You will be able to use the new `getAttributes()` method from the ReflectionClass to validate things:

```php
$reflected = new ReflectionClass(MyClass::class);
foreach ($reflected->getAttributes() as $attr) {
    print_r($attr->newInstance());
} 
```

PHP 8 evaluates attributes at runtime, which is cool for validating things (the later, the better).

Besides, all Reflection classes will have the `getAttributes()` method.

## Attributes everywhere/somewhere

By default, you will be able to use element's attributes everywhere for any element, but you will also be able to change that:

```php
#[Attribute(Attribute::TARGET_METHOD)]
class MyClass {
}
```

The above code specifies you can only use the attribute in a method. Usage in any other element will trigger an error in this case.

## Wrap up

I hope you liked this short introduction to PHP 8 attributes. Hopefully, developers will use this robust syntax extensively. 

It's pretty cool to have this new syntax that can be parsed by both the PHP engine and developers through the Reflection API.

I'm sure IDE's are already implementing php 8 attributes to provide crazy useful autocompletion and other fancy tools.
How to learn to become a good software developer
Published: 2020-11-06 13:21:23

Two reasons provoked this article — my previous article and a recent Twitter post asking, “How do you learn new technologies?”.
In the next paragraphs, I will try to explain how I see learning should happen. Please have in mind that what I suggest is not for total beginners currently learning basics as “if statements” and variables.

## Young developer with great ideas
And not that great ones. When you are inexperienced, everything is new to you. Everything is exciting, and you want to try everything. It is a lot easier to jump on the hype train for something new.

Always learning new things is excellent, but it isn’t that good for a novice developer in the long run.

[READ THE FULL ARTICLE](https://ddimitrov.dev/2020/10/18/how-to-learn-to-become-a-good-software-developer/)
How to create a custom element (tag) in HTML5?
Tags: html
Published: 2020-11-06 13:12:28

Until HTML5 , reusing a piece of html code was not straightforward. Thanks to HTML5 , web components came into picture. Now you can create your own custom components and include them in your HTML code using custom tags. And you can reuse them anywhere else in your application by declaring the custom tags just like you declare your standard HTML tags.

You do this by extending HTMLElement class in Javascript.

Here is a quick demo on it:

https://fullstackdeveloper.guru/2020/11/06/how-to-create-a-custom-element-html-tag-in-html/
Daily Developer Jokes - Friday, Nov 6, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-11-06 13:00:22

---
title: "Daily Developer Jokes - Friday, Nov 6, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Nov%206%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12589ca2833.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why was the function sad after a successful first call?

___A:___ It didn’t get a callback.
 -->
CSS Pseudo-Elements for Beginners.
Tags: css, beginners, tutorial, webdev
Published: 2020-11-06 12:56:05

In this post lets learn about CSS pseudo-elements.

Before reading this article, read my previous one, which discusses about [Simple CSS selectors](https://dev.to/gautham495/simple-css-selectors-for-beginners-2i44).


The Pseudo elements in CSS help us do some functionality which can not be done with regular CSS properties.

For example, if we want to give an effect when we hover over a button we can use,

<code>button:hover { } </code>

And specify the CSS properties we need to apply.

List of CSS pseudo elements we are going to learn here.

- :before.
- :after.

Below are pseudo classes.

- :active.
- :hover.
- :focus.

The CSS combinator selectors and pseudo classes will be discussed in other articles and links will be given below.



#### <u>:before and :after</u>

The before signifies, a place before the element and after specifies a place after the element.  

A content can be inserted before and after with help of these pseudo elements.

Before applying Pseudo elements,

![chrome-capture (12)](https://dev-to-uploads.s3.amazonaws.com/i/e8oheowse3ux38n5t9qc.jpg)



After applying :before and :after pseudo elements.

![chrome-capture (13)](https://dev-to-uploads.s3.amazonaws.com/i/uuzxji74kat0wvk0ugsm.jpg)



 The CSS code for it,

```
.pseudo::before{
    
content:'something before';
font-weight: 600;
font-size: 20px;

}
.pseudo::after{

content:'something after';
font-weight: 600;
font-size: 20px;

}
```

And thats how you can easily use pseudo before and after elements in your CSS workflow/
 
### Thank you for reading!

If you like this article, Unicorn this one! Heart/Like this one and save it for reading it later.



### <u>My Other Articles: </u>



- [Universal CSS properties everyone must know](https://dev.to/gautham495/universal-css-properties-everyone-must-use-4kie)

- [Create-react-app](https://dev.to/gautham495/creating-a-new-react-app-with-create-react-app-4e9m)

- [Git for beginners](https://dev.to/gautham495/basic-git-knowledge-for-beginners-m4p)

- [Change headers in react with react-helmet](https://dev.to/gautham495/changing-headers-in-react-with-react-helmet-d0d)

- [Know How to apply box-shadow on all four sides.](https://dev.to/gautham495/know-how-to-apply-box-shadow-on-all-four-sides-43pn)

- [Simple CSS Selectors](https://dev.to/gautham495/simple-css-selectors-for-beginners-2i44)
How rejection can make your life better?
Published: 2020-11-06 15:12:08

---
title: How rejection can make your life better?
published: true
date: 2020-11-06 12:54:12 UTC
tags: 
canonical_url: https://phongduong.dev/blog/how-rejection-can-make-your-life-better/
---

You may experience the feeling of being rejected when you apply for a job. I know how it feels. It is really frustrated. But the rejection is not always bad. As long as you keep trying, you can archive what you want.

Rejection is two sides of the same coin. It sometimes gets you frustrated and feeling giving up. It also gives you a chance to improve what doesn't work.

Whenever you are rejected, don't be afraid to ask for feedback. People are generous to give feedback. You could know what you are good at and not.

After every rejection, you will have a chance to improve something.

Constructive feedback is welcome.

But how about destructive feedback? Sometimes you will get destructive feedback. It's hard to deal with but it's also a skill. You can learn and master it over time.

There are a lot of opportunities around you. Every opportunity contains a lesson. If you try all possible opportunities, you not only learn more but also could find at least one opportunity that changes your life.

The more you are rejected, the more lesson you will learn, the better you are.

So if you are struggling to find a job and being rejected, just ask HR what you did well and not. You can improve it and do well in the next interview.

And don't forget to thank them.
Samba DC Kendi Domaininden Login Olma
Tags: linux, samba, winbind
Published: 2020-11-06 12:52:06

Centos 8 üzerinde derlenmiş bir sambayı kendi domain kullanıcıları ile login edebilmek için aşağıdaki işlemleri yapmak gerekmekte. Centos 8 üzerinde samba derlemek için [Centos 8 Samba DC Derleme](https://dev.to/aciklab/centos-8-samba-derleme-2a66)'den yararlanılabilir.

* **smb.conf** düzenlenir. Aşağıdaki gibi gözükmelidir. 
```
# Global parameters
[global]
	dns forwarder = 8.8.8.8
	netbios name = SAMBADC02
	realm = EXAMPLE.LAB
	server role = active directory domain controller
	workgroup = EXAMPLE
	idmap_ldb:use rfc2307 = yes

### Buradan sonrasi eklenir ##########
	winbind refresh tickets = yes
	vfs objects = acl_xattr
	map acl inherit = Yes
	store dos attributes = Yes
	dedicated keytab file = /etc/krb5.keytab
	kerberos method = secrets and keytab
	winbind use default domain = yes
	winbind enum users = yes
	winbind enum groups = yes
	template shell = /bin/bash
	template homedir = /home/%U
	idmap config * : backend = tdb
	idmap config * : range = 3000-7999
##### Eklenecek kısım SON ##############

[sysvol]
	path = /var/lib/samba/sysvol
	read only = No

[netlogon]
	path = /var/lib/samba/sysvol/example.lab/scripts
	read only = No
```

* samba servisi yeniden başlatılır.
```
systemctl restart samba4
```
* İlk defa giriş yapılan kullanıcının ev dizninin oluşması için ilgili paket yüklenir ve ayarlanır.
```
authselect select winbind with-mkhomedir --force
yum install -y oddjob oddjob-mkhomedir
systemctl start oddjobd.service
systemctl enable oddjobd.service
```
Hacktoberfest
Tags: hacktoberfest
Published: 2020-11-06 12:49:04

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->
I came to know about Hacktoberfest in mid September and I was so excited that I thought I would start it on the first of October itself. But then when Hacktoberfest started, I was so packed with my academics that I could not find any time for Hacktoberfest. And then thankfully my college declared holidays for 4 days. In these four days I completed my Hacktoberfest. I searched for websites which needed help. Then I found a repository of an ed-tech startup which had some issues. I took them, solved them and made pull requests and finally made it... It was an amazing experience to work for some open source projects. I came to know about many projects going around. Hacktoberfest has motivated me to contribute more to open source whenever I find time.
Gotcha with Generated Files and Clients
Tags: grpc, node, protoc
Published: 2020-11-06 12:28:54

When using `[grpc-tools](https://www.npmjs.com/package/grpc-tools)` to create generated Node.js files, you have three options the `--grpc_out` flag:

> - grpc_js: Generates code with require('@grpc/grpc-js') instead of require('grpc')
> - generate_package_definition: Generates code that does not require any gRPC library, and instead generates PackageDefinition objects that can be passed to the loadPackageDefinition function provided by both the grpc and @grpc/grpc-js libraries.
> - no option: Generates code with require('grpc')

Using the `grpc_js` or no option actually triggers `protoc` to create a generic client in the `*_grpc_pb.js` file:
```
exports.RouteGuideClient = grpc.makeGenericClientConstructor(RouteGuideService);
```

What I found was that you need to use the same **_instance_** of gRPC (not just the same version) for them to work together.  This will not be a problem if you are declaring you protos, generated files, and clients all in the same project.  However, I have mine spread in different npm packages, so I did not use this functionality.
Project management tips
Tags: question, discuss
Published: 2020-11-06 12:12:03

Hi! I'm currently writing my bachelor thesis and I'm confronted with a lot of unforeseen problems and requirement changes which could be less stressful with good project management. What are your tips to become better at project management and maybe you know good resources? Also how do you organize your thoughts when you have 50 different thoughts on the project 'at the same time'? Happy Friday. 😊
Introducing django-cancan: authorization library for Django
Tags: python, django, showdev
Published: 2020-11-06 11:48:10

I'd like to share with you my Django authorization library (https://github.com/pgorecki/django-cancan) I wrote some time ago and which I'm happily using for couple of my projects now.

My main motivation was to create a rule-based permission system which can be used **both for checking per-object access rights and for generating access-based querysets**. As a result, you do not need to write your own querysets for retrieving accessible objects, `django-cancan` will handle it automatically. For example, cancan can generate a queryset of articles which can be modified by the current user, based on a the user's role or permissions.

Here is an actual usage example from one my latest projects, with chat functionality: the exchange of messages between customers and consultants. 

The data model is pretty simple:
```python
class Thread(models.Model):
    customer = models.ForeignKey(User, ...)
    consultant = models.ForeignKey(User, ...)

class Message(models.Model):
    thread = models.ForeignKey(Thread, ...)
    content = models.TextField()
```

First, you define a function that grants *actions* based on user role.

```python
def define_access_rules(user, rules):
    # user == request.user
    if not user.is_authenticated:
        return

    rules.allow("create", Thread)
    rules.allow("create", Message)
    rules.allow("view", Thread, customer=user)
    rules.allow("view", Message, thread__customer=user)
    rules.allow("view", Message, thread__consultant=user)

    if user.is_staff:
        rules.allow("view", Thread, consultant=user)
        rules.allow("view", Message)

    if user.is_superuser:
        rules.allow("view", Thread)
        rules.allow("view", Message)
```

In this example, client (logged-in user) is allowed to create conversation threads, view all threads he started, including all messages within those threads. On top of that, consultant (is_staff=True) can list threads he is assigned to, and superusers have unlimited access to both models.

Note that `rules.allow` use the same syntax as `Model.objects.filter`.

Then the access control is implemented by overriding the `get_queryset` method to return a list of Threads accessible by `request.user` and by adding `has_permission` method to check if user can perform a view action.

```python
class ThreadList(ListView):
    model = Thread

    def get_queryset(self):
        ability = request.ability
        return ability.queryset_for("view", Thread)

class ThreadDetail(PermissionRequiredMixin, DetailView):
    model = Thread

    def test_func(self):
        ability = request.ability
        thread = self.get_object()
        return ability.can("view", thread)
```

Check out [project README](https://github.com/pgorecki/django-cancan/blob/master/README.md) for more examples, including template-level checks, DRF integrations, etc.

I hope you will enjoy [django-cancan](https://github.com/pgorecki/django-cancan) as much as I do :)
Recover lost data with QuickBooks Auto Data Recovery Software
Tags: quickbooksdatarecovery, recoverquickbooksdata
Published: 2020-11-06 11:29:36

Here I'll suggest you to use this well designed Quickbooks Recovery tool which can easily recover and repair all damaged QWB/QBB files. This can recover data from QWW of all country edition such as QuickBooks UK, USA, Australia, Canada, New Zealand, Germany, and South Africa. This software provide preview option, with which you can see the preview of all recoverable quickbooks files before actual recovery. It provide a preview option to generate the preview of company files and data. The automatic update wizard of the software checks for all the latest updates of the software, whether they are major or minor. An enhanced easy to use user friendly interface also provided by this software for intense recovery. Use it free demo version first to analyze it features and functions.

Visit this demo version to get more information:- https://www.filesrecoverytools.com/blog/how-to-repair-corrupt-quickbooks-company-files/
Tetris
Tags: python, showdev, gamedev
Published: 2020-11-06 11:28:50

So I have made a Tetris game from python and a module named pygame(it may be quite familiar to some). It has a beautiful background image and Circles by Post Malone will play in the background as an audio asset. Like its having more than 400 lines of code.

I have listed some of the prerequisites and I instructions to play so that you could have a great time with it you can download the game from 
<a href="https://github.com/achaljhawar/tetris">GitHub</a> or from <a href="https://achaljhawar.itch.io/tetris">itch.io</a>.

If you like it you could share it with others and don't forget to drop a star on the repository it helps or you could donate me itch.io.

## Perquisites 

You'll need <a href="https://www.pygame.org/download.shtml">pygame</a> and <a href="https://www.python.org/downloads/"> python</a> installed on your computer.

```
pygame@1.9.5 or above
python@3.9.6 or above
```
## How to play

```bash
# Clone this repository
$ git clone https://github.com/achaljhawar/Tetris

# Go into the folder
$ cd Tetris

# Run the python file
$ python tetris_game.py
```
Enjoy the game its amazing and I am sure you'll love it.

## Instructions to play

<ol>
 <li>You can use the ⬅️⬆️➡️⬇ arrow keys to rotate the pieces.
 <li>You have to complete the lines of the grid to get points.
 <li>If you can not fit the pieces in the grid you lose.
 <li>For every line you complete you get 10 points.
</ol>

## Screenshot of the game

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k8lnrmnxdvogi60ohqxx.JPG)

Thank you and have a nice day 😊.