teleren/devto huggingface dataset:
Some easy steps to write UNREADABLE Rails code
Tags: ruby, rails
Published: 2021-08-29 14:06:59

Below are some of the easy steps we can follow to make the Rails code hard to debug for others.

### 1. Reduce the number of lines

Lesser the number of lines, the better developer you are.
It will affect readability for others. But, that's their problem!

```ruby
x = x - 1 and y +=1 and z = true while is_it_even_legal?() if some_random_condition
```

### 2. Use define_method and make it hard to debug

This code defines two methods, enable_feature_a and enable_feature_b. This dynamic function definition makes it difficult to debug code and find the impact areas.

```ruby
SAMPLE_AR = %w(feature_a feature_b)
SAMPLE_AR.each do |item|
    define_method("enable_#{item}") do |params={}|
        # do something
    end
end
```

So when your colleague misses impact, you can blame them.

### 3. Calling dynamic functions

Similar to #2, functions can be called dynamically.

```ruby
item = 'feature_a'
send("enable_#{item}")
```

### 4. Access instance variable, that were set in different file

Do not use function params or return values. Always use instance variables across files, so others have no idea where this instance variable was set.

```ruby
class SomeController
   include SomeModule

   def calculate_something(num)
       double_of_num(num)
       @result_num
   end
end
```

```ruby
modules SomeModule
      def double_of_num(num)
          @result_num = num * num
          puts "set instance variable here and use this in a different file, so Others can find it hard to debug"
      end
end
```
How to Copy Text To Clipboard Using Javascript
Tags: javascript, 100daysofcode, css, html
Published: 2021-08-29 14:04:35

 
## 1. document.execCopy

We can use document.execCopy which has widely browser support. One important to notice is that it is right now **deprecated**. 

- Access is synchronous
- Text is read from the DOM and placed on the clipboard.
- Good browser support

```jsx
function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
```

## 2. Navigator.clipboard.writeText

The **Clipboard API** adds to the Navigator interface the read-only clipboard property, which returns the Clipboard object used to read and write the clipboard's contents.

- writeText is used for writing contents to clipboard.
- Access is asynchronous and uses promises.
- Only supported on pages served over HTTPS.

```jsx
navigator.clipboard.writeText(text).then(
  function() {
    console.log("Async: Copying to clipboard was successful!");
  },
  function(err) {
    console.error("Async: Could not copy text: ", err);
  }
);
```

## 3. Live Demo
{% codepen https://codepen.io/afozbek/pen/ExXVdbM %}

## 4. Links
- [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript)
how to insert comment in html
Tags: html, webdev, wordpress
Published: 2021-08-29 12:45:49

Hi guys,

Today we will see how to insert comment in html.

When it comes to the coding documentation, commenting is plays an important role, as it indicates what is what.

In HTML, in order to comment, use this type of Structure.
```html
<!-- This is a comment -->
<p>In this way, we will comment in HTML.</p>
```
Thanks for taking your valuable time for reading my post, if you have any queries , please leave a comment and will respond. If you find this post useful, please share it. 

Read: <a href="https://wordpress.org/plugins/increase-upload-limit/" target="_blank">How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?</a>

Social Profile : <a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/">LinkedIn</a>

Have a Nice Day!
Validate JSON like never before❗
Tags: java, automation, testing, apachehttpclient
Published: 2021-08-29 12:28:04

This article will help you implement the Un-Marshalling concept to fetch the values from the JSON response for validation purposes🤩

https://medium.com/@prathore28647/apis-and-http-client-validate-post-call-response-f9b7f8692939

Follow me on Medium for such interesting articles and help me grow🖖
Top 10 Tools🛠 For Web Developers👨‍💻to keep check In 2021🤘🏻
Tags: javascript, webdev, react, css
Published: 2021-08-29 12:26:12

Using web development tools always makes your work easier and more smooth. Web dev is a field where you often need them and that’s why I made this list so that you can bookmark it and check any tool you are looking for.


- Devhints.io

Here you will find sets of ready-made snippets with popular code snippets, configurations, and commands.

If you don’t find the snippet you need, you can request the author to add it.


- Bootstrap Cheatsheet

The bootstrap cheat sheet is an interactive list of Bootstrap 5 classes, variables, and mixins. It helps you easily find the differences between Bootstrap 4 and Bootstrap 5.

https://bootstrap-cheatsheet.themeselection.com/

- Carbon

If you need to create a piece of code in the form of an image, Carbon is the perfect tool for this purpose. The application has support for many languages ​​and a ready set of different themes, thanks to which we can modify our snippet.

https://carbon.now.sh

- Google Lighthouse

It is an open-source, automated tool for measuring the quality of web pages. It audits the performance, accessibility, and search engine optimization of web pages. 

- MetaTags.io

Meta Tags is a simple online tool that you can use to quickly check the meta tags for your website.

- frontendchecklist.io

The process of creating a website can often be long, tedious, and very complicated. The consequence of this is that we can forget some things. The Front-End Checklist is here to help

- Gitignore.io 

I know that you don’t need higher math to create a .gitignore file, but a ready-made tool was created for that. The only thing you provide is information such as the operating system or development environment.

- Regex101

The application offers both instruction for creating regular expressions and a ready environment for writing and testing expressions. Additionally, after creating an expression, we get a detailed explanation of it.

https://regex101.com/

- Ngrok 

If you create a website on a local server and show off your work results to someone, you can use Ngrok. This tool allows you to “bring to the world” your local application.

https://ngrok.com/

- Nibbler

Nibbler is a free online tool that you can use to scan your website. It will give you a report scoring the website for key areas, including accessibility, SEO, social media, and technology.

https://nibbler.silktide.com/
I made my own VS Code theme in less than an hour, here's how? [Part 2]
Tags: vscode, extension, javascript, design
Published: 2021-08-29 12:01:42

**Following my Previous  [Blog](https://dev.to/gauravsinhaweb/i-made-my-own-vs-code-theme-in-less-than-an-hour-here-s-how-1g61) :**



After designing your theme,

Go to `your themes` option by following  [url](https://themes.vscode.one/your-themes)  and download the source code (JSON file) to your device.

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


> 
Now, this is the major step where you'll have to replace the current JSON file to the downloaded file. 

so **keep calm** and **Let's go!! 🚀**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmrhipkv221no7anyd7z.PNG)

Open the VSCE Installed folder/ codebase (check out the previous blog) and you'll get a similar list of directories.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofxtywo7bdptk354seoq.PNG)

In the ``themes folder``, Replace the Downloaded file from the current file and rename your theme to whatever you want!


Let's Make a ``.vsix`` file so that it can be published to `visual studio marketplace`

1. open up your terminal

2 follow the command `vsce publish`, which will make a .vsix file.

Now, go to the `visual studio marketplace` console.

3. Add a new extension by clicking `+ New Extension` 
4. Select Visual Studio Code and upload your `.vsix` file and Publish.

Everything is done!✨

If you don't have an account on `marketplace.visualstudio.com`, 
you can follow their official doc, here's the link:  https://code.visualstudio.com/api/working-with-extensions/publishing-extension

If you are stuck anywhere in the process, do comment and `Like` the blog if you find it's helpful :)

> Here is my VS Code theme  [Link](https://marketplace.visualstudio.com/items?itemName=GauravSinha.greencloud) : https://marketplace.visualstudio.com/items?itemName=GauravSinha.greencloud

Happy Theming!✨
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2021-08-29 12:00:10

---
title: "A Fun Programming Joke To Start Your Day"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12593f93b65.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:___ I love you and I only love you. Does that turn you on?

___AND GATE:___ No.
 -->
Vue 3 date picker
Tags: vue, typescript, opensource
Published: 2021-08-29 11:30:28

Fellow developers, I've created my first open source component for Vue 3. It is a date picker with many features and many I plan to add in the near future.

As you may notice but currently available components are not so future rich. Many are only singe date pickers, some are only range, missing time picker, not mobile friendly and so on. 

This project is trying to solve those issues.

It would be great if you try it let me know what you think. Any suggestions, critics are welcome and I will try to resolve them. 

Many thanks.

You can check the component on [Github](https://github.com/Vuepic/vue3-date-time-picker)
We improved the trailblazer-rails gem!
Tags: trailblazer
Published: 2021-08-29 11:07:35

While working on an example Rails application for the [new Trailblazer tutorial series](https://trailblazer.to/2.1/learn.html#learn-expert-books-building-your-own-authentication-library-with-trailblazer) I figured out that `trailblazer-rails` is quite inconvenient to use when you need to customize calls.

## Controller-wide cells options

When using the Cells gem for rendering views along with a layout cell, you formerly had to pass the `:layout` option manually in every controller action.

```ruby
class SongsController < ApplicationController
  def new
    # ...
    render cell(Song::Cell::New, ctx, layout: App::Cell::Layout)
  end
```

People started monkey-patching internal methods from `trailblazer-rails` to get the layout (and other options) automatically injected into every `#cell` call. 

This is built-in now, just define `#options_for_cell` on the controller.

```ruby
class SongsController < ApplicationController
  private def options_for_cell(model, options)
    {
      layout: App::Cell::Layout
    }
  end
```

The hash returned from this method is passed as a defaults hash to `#cell`. It's [documented, too!](https://trailblazer.to/2.1/docs/trailblazer.html#trailblazer-rails-cells-configuration)

## Runtime variables for operations

Another clumsiness I noticed was that it's impossible to inject variables into the operation context when using `#run`. You can simply provide those as keyword arguments now.

```ruby
class SongsController < ApplicationController
  def create
    run Song::Operation::Create, 
      current_user: current_user, cookie: session do |ctx|
      # ...
    end
```

This will add :current_user and :cookie to the ctx passed into the Song::Operation::Create operation. Here are [the docs](http://localhost:4000/2.1/docs/trailblazer.html#trailblazer-rails-run-runtime-variables).

## Trailblazer-Rails docs moved!

In the process of the refactoring we also rewrote `trailblazer-rails` docs. The [old docs](https://trailblazer.to/2.0/gems/trailblazer/2.0/rails.html) are still available on the old website. Why would you need them, though, with [new docs waiting here](https://trailblazer.to/2.1/docs/trailblazer.html#trailblazer-rails)?

The new gem version is 2.2.0. :fire:
How to pass PHP variables to JavaScript in WordPress
Tags: wordpress, php, javascript
Published: 2021-08-29 11:05:45

When you're building a WordPress theme or plugin, sometimes you have JavaScript code that needs to use data/values from PHP. For instance, you need these values in your JavaScript code :

- Homepage URL
- Theme option values
- WordPress posts data
- etc

The easiest way to do that is by initializing those values into JavaScript objects in your `header.php` theme file or `wp_head` hook. For example :

```html
<script>
var myThemeParams = {
   homeURL: <?php echo home_url(); ?>,
   themeOptions: <?php echo get_theme_mod( 'mytheme_options', false ); ?>,
}
</script>
```

Even though it works but WordPress has been provided us with a function for doing something like that. It's called `wp_add_inline_script`.

```php
wp_add_inline_script( $handle, $data, $position = 'after' )
```

- `$handle` : Name of the script to add the inline script to.
- `$data` : String containing the JavaScript to be added.
- `$position` : Whether to add the inline script before the handle or after.

That function will add an inline script before or after your JavaScript code. It actually can do more besides passing PHP variables to JavaScript. You can see another use case [here](https://developer.wordpress.org/reference/functions/wp_add_inline_script/).

So, to use `wp_add_inline_script` for passing variables from PHP to JavaScript, you need to set the position properties to before so that it'll add the inline script before your JS file. And then initialize a JavaScript object and set the value with data from PHP.

```php
$myThemeParams = array(
    'homeURL' => home_url(),
    'themeOptions' => get_theme_mod( 'mytheme_options', false )
);
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js' );
wp_add_inline_script( 'my-theme-script', 'var myThemeParams = ' . wp_json_encode( $myThemeParams ), 'before' );
```

In your JavaScript you can access it like this:

```javascript
console.log( myThemeParams.homeURL );
console.log( myThemeParams.themeOptions );
```
50 Great Websites for Web Developers!
Tags: webdev
Published: 2021-08-27 04:43:41

[Hidden Tools] -
https://hiddentools.dev/

[Music For Programming] -
https://musicforprogramming.net/

[Programming Language Convertor] -
https://ide.onelang.io/

[HTTP Cat] -
https://http.cat/

[Iconscout] -
https://iconscout.com/

[CSS Zen Garden] -
http://www.csszengarden.com/

[A List Apart] -
https://alistapart.com/

[Code Project] -
https://www.codeproject.com/

[Scotch] -
https://scotch.io/

[TutsPlus] -
https://tutsplus.com/

[Creative Blog] -
https://www.creativebloq.com/

[Codrops] -
https://tympanus.net/codrops/

[MDN Web Docs] -
https://developer.mozilla.org/zh-CN/

[The Odin Project] -
https://www.theodinproject.com/

[Code Wars] -
https://www.codewars.com/

[WpSessions]-
https://wpsessions.com/

[CSS Autor] -
https://cssauthor.com/

[Laracasts]-
https://laracasts.com/

[Web Design News] -
https://www.webdesignernews.com/

[UX Movement] -
https://uxmovement.com/

[Gradient Magic] -
https://www.gradientmagic.com/

[Trianglify] -
https://trianglify.io/

[CSS Tricks] -
https://css-tricks.com/

[Free Frontend] -
https://freefrontend.com/

[Code My UI] -
https://codemyui.com/

[CSS Reference] -
https://cssreference.io/

[HTML Reference] -
https://htmlreference.io/

[Frontend Mentor] -
https://www.frontendmentor.io/

[Site Point] -
https://www.sitepoint.com/

[Free CSS] -
https://www.free-css.com/

[Awesome Python] -
https://pythonawesome.com/

[Fun JavaScript Projects] -
https://fun-javascript-projects.com/

[Daily Dev] -
https://daily.dev/

[Dev Docs] -
https://devdocs.io/

[ShortCode Dev] -
https://shortcode.dev/

[What Runs] -
https://www.whatruns.com/

[1LOC] -
https://1loc.dev/

[Web Code Tools] -
https://webcode.tools/

[Am I Responsive] -
http://ami.responsivedesign.is/

[Shape Divider] -
https://www.shapedivider.app/

[Fancy Border Radius] -
https://9elements.github.io/fancy-border-radius/

[CSS Gradient] -
https://cssgradient.io/

[CSS Clip Path] -
https://bennettfeely.com/clippy/

[CSS Layout] -
https://csslayout.io/

30 Seconds Of Code -
https://www.30secondsofcode.org/

Undraw -
https://undraw.co/

Humaaans -
https://www.humaaans.com/

W3 Layouts -
https://w3layouts.com/

Templatemo -
https://templatemo.com/

Tooplate -
https://www.tooplate.com/
Bootstrap 5 Post with Thumbnails Card
Tags: bootstrap, css, html, webdev
Published: 2021-08-29 10:25:21

Thumbnails view posts are used for blog user-interface with different views. So here we try to make a simple interface using bootstrap 5 and CSS.

In this element, we used the bootstrap 5 card component with responsive utility classes. Also, we used custom classes for making this element more attractive and friendly. To make it mobile-friendly we used media queries. Also, we customize bootstrap classes, which are already used in components.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source code](https://w3hubs.com/bootstrap-5-post-with-thumbnails-card/)
Tip: Making Directories Recursively With Python
Tags: beginners, tips, python, 100daysofpython
Published: 2021-08-29 10:15:09

_**I write content for AWS, Kubernetes, Python, JavaScript and more. To view all the latest content, be sure to [visit my blog](https://blog.dennisokeeffe.com) and subscribe to my newsletter. [Follow me on Twitter](https://twitter.com/dennisokeeffe92).**_

> This is Day 8 of the #100DaysOfPython challenge.

Today's post is a quick overview of making directories recursively (if they do not exist).

## Getting started

Let's create the `hello-recursive-dirs` directory and install Pillow.

```s
# Make the `hello-recursive-dirs` directory
$ mkdir hello-recursive-dirs
$ cd hello-recursive-dirs
# Create a file for our script
$ touch main.py
```

## Using the OS module to create folders recursively

The OS library has a function [`makedirs`](https://docs.python.org/3/library/os.html#os.makedirs) that can be used to make directories recursively.

In this example, let's create the folder `tmp/deep/folder`.

Add the following code to `main.py`:

```py
import os

new_folder_name = 'tmp/deep/folder'
if not os.path.exists(new_folder_name):
    os.makedirs(new_folder_name)
```

Run the script with `python main.py` and confirm that the folder was created.

## Resources and further reading

1. [`OS.makedirs`](https://docs.python.org/3/library/os.html#os.makedirs)

_Photo credit: [pawel_czerwinski](https://unsplash.com/@pawel_czerwinski)_


_Originally posted on my [blog](https://blog.dennisokeeffe.com/blog/2021-07-27-making-directories-recursively-with-python). To see new posts without delay, read the posts there and subscribe to my newsletter._
Paid Project
Tags: javascript, webdev, help
Published: 2021-08-29 10:11:27

Hey Everyone, My name is Prabhaav Swarup and I am very new to computer languages, despite being surrounded by computers from a very young age. I am currently learning JS and am starting a new project which i think will be very successful. For that to happen I need to build a team of like minded people who are willing to make the journey with me and will also be compensated for it. All those interest feel free to HMU so that we can talk about it.
Building Vocabulary Day 1
Tags: day1
Published: 2021-08-29 10:01:41

Hello, Daily I will come up with a post consisting of new 5 words that I have learned and which are frequently asked in GRE exams with Pictorial representation.
1. **Calumny**(noun) :  Making of a false statement meant to injure a person's reputation.
![alt text](https://compote.slate.com/images/cc162fc7-dce4-42cd-a796-d3f3331c96d7.jpg?width=960 "Logo Title Text 1")
[Checkout Pronunciation](https://www.google.com/search?q=calumny&oq=ca&aqs=chrome.0.69i59l3j69i57j69i60l4.2381j0j9&sourceid=chrome&ie=UTF-8)

2. **egrigious**(adjective) : Outstandingly bad, Shocking 
![alt text](https://i.pinimg.com/originals/9e/69/cf/9e69cfa6ae55b432709d169999de85a8.png)
[Checkout Pronunciation](https://www.google.com/search?q=egregious+meaning&oq=egregious&aqs=chrome.1.69i57j0i433i512j0i512l8.7174j0j4&sourceid=chrome&ie=UTF-8)

3. **acrimony**(noun) : bitterness and ill will 
![alt text](https://i.ytimg.com/vi/6DKyhqcJaWY/maxresdefault.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=acrimony&oq=acr&aqs=chrome.0.69i59l2j69i57j0i271l3j69i61.2852j0j9&sourceid=chrome&ie=UTF-8)

4. **betray**(Verb) : To reveal or make known something, usually unintentionally  
![alt text](https://static.toiimg.com/photo/60473899.cms)
[Checkout Pronunciation](https://www.google.com/search?q=betray&oq=be&aqs=chrome.0.69i59l2j69i61j69i60l2j69i65l3.1816j0j9&sourceid=chrome&ie=UTF-8)
5. **iconoclast**(noun) : somebody who attacks cherished beliefs or institutions.
![alt text](https://miro.medium.com/max/1200/1*jZf6Q00pgcKiDlnm_so0SQ.png)
[Checkout Pronunciation](https://www.google.com/search?q=iconoclast&source=lmns&bih=722&biw=1536&hl=en-GB&sa=X&ved=2ahUKEwiM26TK-tXyAhXUznMBHd8mCnMQ_AUoAHoECAEQAA)
I hope this helps to you if you are preparing for GRE exams..
Eauctions in india, Details
Published: 2021-08-29 09:49:58

This is one of the most painful step as there is no organized data in India. EauctionsIndia.com providing information on Bank Auction Properties. we are providing information at free of cost. we are updated regularly. The other sources of information are Newspapers, Notice posted in Bank Branch or Notice posted in the Society. For easy search, i suggest that instead of paying for search to get complete details, you can search for Bank Auction Property on our webiste. Note down basic details including Bank name and then either visit the bank branch or search for auction notice through banks website / newspaper.

Step 2: Check Property Details

Once you shortlist bank auction property, carry out preliminary check on our own. Check market price of the property, obviously reason for bank auction is payment default but check out any legal dispute, bank auction related details and how can you participate in bank auction.
The biggest problem with Bank Auction is that you will not have get access to property papers before purchase for title search. Banks are not willing to share much information. Sole objective of bank is to dispose off the property. If you are seriously interested in buying the property then it is advisable to hire a lawyer or expert for this process. One important point to check is Balance outstanding of the defaulter. In many cases balance outstanding is much higher compared to Reserve Price. Please check if the property is auctioned at amount below balance outstanding amount then how bank will recover the balance amount. In such scenarios, defaulter has to pay the balance amount but better to clarify. If final bid amount is more than outstanding amount then balance amount is paid to the defaulter by the bank.