teleren/devto huggingface dataset:
hide and show nav-links content without using JS (only pure CSS)
Tags: html, css
Published: 2021-02-03 11:31:06

I was working on a [FreeCodeCamp's project](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page) , and I was looking for new ideas even though they only need to perform some simple tasks, accidentally I fond the `:target` pseudo class in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/:target), exactly in the [lightbox section](https://developer.mozilla.org/en-US/docs/Web/CSS/:target#pure-css_lightbox)

#how this selector works
the first thing you should know is that the `:target` selects the element when its `id` and the hash in the URL are the same, and that's happens when you visit a link which refers to that element ... ***for example*** <br />
if we link a section by an anchor tag
```html
<!-- the link -->
<a href="#changed_element">link</a>

<!-- the linked element -->
<section id="changed_element">
    the changed element
</section> 
```
now let's change the section's style when the user click on the link that refers to it by adding the `:target` selector.
```css
#changed_element:target{
    background-color: #000;
    color: #fff;
}
```
> so this selector selects the visited elements 

hmmmm so if we want to hide and show elements using this selector we only need to specify their display before and after clicking on their links <br />
***example***
```html
<!-- nav links -->
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
</ul>


<section id="home">
    home's content
</section>


<section id="about">
    about's content
</section>


<section id="services">
    services's content
</section>
```
```css
/* the default display by hiding the elements  */

#home, #about, #services{
    display: none;
}

/* showing the element that has been clicked in the nav-linkd */

#home:target, #about:target, #services:target{
    display: block;
}
```
so if the user click on a link .. the browser will show the hidden content of that link ... and if he click on other element, the previous element will be hidden again cause he is not targeted and the new link's content will appear

you can change the styles that you want this is just an example ... you can visit [this website](https://john-doe.neocities.org/) to see how he made a ***full website*** with a ***single html file***
this is my first article in a dev community SO *I'm sorry if my explanation was bad (maybe) ... i hope that this article is useful to you and you like it*
#resources
* the MDN docs [link](https://developer.mozilla.org/en-US/docs/Web/CSS/:target)
* [article about a image gallery using only css and :target element in hacks.mozilla](https://hacks.mozilla.org/2012/02/a-simple-image-gallery-using-only-css-and-the-target-selector/)
* an article about some uses of that selector on css-tricks [link](https://css-tricks.com/css-target-for-off-screen-designs/)
* [my freecodecamp project](https://codepen.io/CH4R4F/full/poNvgzm)
Use Google like a pro
Tags: webdev, programming, productivity, career
Published: 2021-02-03 11:20:50

Googling is one of the most important skills for every developer.

Let me show you how to get better at Googling.

Let's start!

1 . Use quotes to force an exact-match search:

`"what is javascript"`

![Exact Match](https://dev-to-uploads.s3.amazonaws.com/i/toa5cjwc3ns90uoj4q4v.PNG)

2 . AND operator will return only results related to both terms:

`html AND css`

![AND operator](https://dev-to-uploads.s3.amazonaws.com/i/g2mzmbnmwrqbhb518mmq.PNG)

3 . You can use the OR operator to get the results related to one of the search terms

`(javascript OR python) free course`

![OR opeator](https://dev-to-uploads.s3.amazonaws.com/i/ufu4tbbbxon9eppethu4.PNG)

4 . - operator will exclude results that contain a term or phrase:

`javascript -css`

![Minus operator](https://dev-to-uploads.s3.amazonaws.com/i/so2wotovlwq8oslfjlq6.PNG)

5 . You can use the (*) wildcards as placeholders, which will be replaced by any word or phrase.

`"how to start * in 6 months"`

![Wildcard operator](https://dev-to-uploads.s3.amazonaws.com/i/ecxlmfrf7jct3n0jos8o.PNG)

6 . Search inside a single website:

`site:freecodecamp.org`

![Site operator](https://dev-to-uploads.s3.amazonaws.com/i/f19qsogbh16kp0mga2b6.PNG)

7 . You can also use a very useful feature that helps to find a specific file type.

`filetype:pdf learn css`

![Search by filetype](https://dev-to-uploads.s3.amazonaws.com/i/txu7yuj4zrvvsqh4ir9x.PNG)

8 . Search for a range of numbers:

`ecmascript 2016..2018`

![Search by number range](https://dev-to-uploads.s3.amazonaws.com/i/gj9tyrfum3uftq7g4qs6.PNG)

If you liked this article, be sure to ❤️ it.

## Happy coding! ❤️
RSpec: one _logical_ expectation per example
Published: 2021-02-03 11:11:23

Expectation (or verification) is the phase of the test in which we check the actual test result against the correct test result:
```ruby
expect(post.slug).not_to be_nil
expect(account.admins).to match_array(admins)
expect(comment_notification).to have_received(:deliver)
expect { post.destroy }.to change(Post, :count).by(-1)
```

Test, which has a lot of expectations, is hard to read and maintain: to find the failing test will have to look for the according line number and read the neighboring. That's why it is better to use one expectation per example.

But there are situations where one logical check is expressed by several physical ones. For example, to check that the color in RGB is blue, we check the red, green and blue component of the color:
```ruby
describe "#color" do
  it "is blue" do
    expect(color.R).to be < 0.2
    expect(color.G).to be < 0.2
    expect(color.B).to be > 0.8
  end
end
```

In that case it's better to combine expectations into one with `have_attributes`:
```ruby
describe "#color" do
  it "is blue" do
    expect(color).to have_attributes(
      R: (a_value < 0.2),
      G: (a_value < 0.2),
      B: (a_value < 0.8),
    )
  end
end
```

And if you want to check several related side effects, it is better to combine them with `and`:
```ruby
it "activates subscription" do
  expect { subscription.activate! }
    .to change { subscription.reload.active? }.to(true)
    .and change { subscription.reload.valid_until }.to(1.month.from_now)
end
```

----------------

See also:
* [Expectation per example in RSpec style guide](https://github.com/rubocop-hq/rspec-style-guide#expectation-per-example)
How Web Servers Stop Bots?
Published: 2021-02-03 11:03:06

Many web servers mainly want to allow humans to query them and disallow bots.


Here are the main ways how the web servers stop bots from doing their thing:

They look at the User-Agent-String header sent by the bot. If it is not a familiar one sent by a known browser on a known OS, they might reject the call.

The bot is making too many calls too frequently. Web servers know that humans dont do that and can block you out.

The bot is making calls in a sequential order which humans rarely do.

The bot is making calls at the same time every day. The call logs show it and the webmaster can block you.

The bot is making calls at predictable intervals.

The bot is not passing the cookies back. Even though the cookies are not relevant to the use of the data, the web servers expect it to come back as all browsers do pass them back.

The User-Agent-String is always the same and is not rotated.
Wednesday Links - Edition 2021-02-03
Tags: java, microservices, kotlin, database
Published: 2021-02-03 10:44:27

New Developer Friendly Features After Java 8 (5 min read) ✨
https://piotrminkowski.com/2021/02/01/new-developer-friendly-features-after-java-8

Talking to Postgres Through Java 16 Unix-Domain Socket Channels (8 min read) 🗣️
https://www.morling.dev/blog/talking-to-postgres-through-java-16-unix-domain-socket-channels

Stream.toList() in Java 16 b27 (30 sec read) 🚿
https://twitter.com/gunnarmorling/status/1351283558053261315

Error handling in Java is error prone (9 min read) 🧨
https://blog.darrien.dev/posts/error-handling-in-java-is-error-prone

Killing mutations with Kotlin (3 min read) 🧟
http://www.codingflower.com/index.php/2021/01/24/killing-mutations-with-kotlin

Bad Kotlin Extensions (6 min read) 🏷️
https://krossovochkin.com/posts/2021_01_25_bad_kotlin_extensions

JPAstreamer: Expressing Hibernate/JPA queries with Java streams (10 min read) 💽
https://blogs.oracle.com/javamagazine/jpastreamer-expressing-hibernatejpa-queries-with-java-streams

IntelliJ IDEA 2021.1 EAP 1: Support for Java 16, WSL 2, Run Targets, and More (6 min read) 🎉
https://blog.jetbrains.com/idea/2021/01/intellij-idea-2021-1-eap-1

Sysdig 2021 container security and usage report: Shifting left is not enough (5 min read) 📦
https://sysdig.com/blog/sysdig-2021-container-security-usage-report/
Perfekte WordPress .htaccess für schnelle Ladezeiten
Tags: wordpress, geschwindigkeit, htaccess
Published: 2021-02-04 21:39:25

---
title: Perfekte WordPress .htaccess für schnelle Ladezeiten
published: true
date: 2021-02-03 10:39:00 UTC
tags: Wordpress,geschwindigkeit,htaccess
canonical_url: https://j0e.org/wordpress-htaccess/
---

![WordPress .htaccess für schnelle Ladezeiten](https://j0e.org/wp-content/uploads/2016/04/wordpress-htaccess.png)

 Meine perfekte WordPress .htaccess, damit auch deine Website schneller lädt. Die Geschwindigkeit einer Webseite ist …

Die Datei namens .htaccess ist nicht unbedingt notwendig, um eine Webseite zu betreiben.

Seltsam mag dir der Name mit einem Punkt davor vorkommen. Auf Betriebssystemen wie Linux und Unix, worauf die meisten Webserver laufen, bedeutet das aber lediglich, dass diese Datei unsichtbar ist. Mehr steckt hinter diesem Punkt vor einem Dateinamen nicht.

Die Einstellungen darin gelten auch für alle darunter liegenden Dokumente. Du musst die Datei also nicht in jedes Unterverzeichnis kopieren. Bei WordPress wird die Datei mitgeliefert, da sie für die sogenannten Permalinks notwendig ist. Dabei werden die unschönen URLs in lesbare Adressen umgewandelt.

Ich verwalte seit Jahren eine Vorlage meiner perfekten .htaccess Datei, die ich für all meine Webseiten nutze. Meine .htaccess-Vorlage optimiere ich ständig und teste neue Funktionen. Verbesserungen trage ich dann auf allen anderen Seiten nach.

Weiter Lesen: [WordPress .htaccess](https://j0e.org/wordpress-htaccess/)
Accountability in Software Development
Published: 2021-02-03 10:35:11

The short and cold days, limited social contacts and not knowing when life will go back to normal is a huge weight on everyone. Often it limits the motivation and the output. This needs to be remembered by managers, but it should not stop them from holding people accountable for their work.

Managers all around face the same question: How do I hold people accountable for their work, when I don’t actually see them working? Out of fear to treat the employees unfair, they shy away from performance reviews. It might be a noble thought, but can actually have the opposite effect.

In a workplace environment everyone wants to be held accountable- for their good and their bad work. If everyone is treated that way, a feeling of fairness is established and it will boost the progress.

To read more about the importance of accountability, check out this article: https://www.forbes.com/sites/tracybrower/2020/08/30/how-to-manage-the-work-when-you-cant-see-people-working-5-new-takes-on-accountability/?sh=56515bb42b4d

At JonnyGit we provide leaders of software development teams with all the needed information to have fair performance reviews that help everyone improve.

#accountability #leadership #JonnyGit
About JonnyGit
Published: 2021-02-03 10:33:31

In our new series “About JonnyGit” we would like to show You what our product is all about and what value we can add to Your company. In this first post, we will tell You about our mission.

Our main goal is to help software development leaders to tackle the challenges their team encounters. We will help You understand their needs and motivations so You can bring out the best in Your team.

Software development can be a very complex process, it might be better described as creation. We are there to close the information gap between Creator and Team Leader. Our powerful analytics will provide You with valuable insights into every little step Your developer takes, so You can give helpful feedback to accelerate the workflow.

By focusing on prescriptive analytics, we go beyond basic performance indicators and identify behaviors and patterns that might act as barriers. You then have all the information You need to build Your very own high-performance team!

#mission #softwaredevelopment #JonnyGit
Combine all your messaging and chat services into one application with Franz
Tags: productivity, webdev, tools
Published: 2021-02-03 10:07:57

Franz makes it easy to organize all your messages in one easily accessible place.

![Alt image 1](https://www.geekzone.fr/wp-content/uploads/2020/01/ferdi_02.jpg)

![Alt image 2](https://opensource.com/sites/default/files/uploads/franz.png)


Link : [Franz](https://meetfranz.com/)
Fleet reporting app using Angular
Tags: angular, fleet, framework
Published: 2021-02-03 09:54:11

I worked closely with our clients to develop a lightweight fleet reporting web and mobile application using the Angular framework. The reason behind choosing Angular to build the front-end interface was to optimize smooth server communication and leverage auto-synchronization. We also utilized interactive SPAs (Single Page Application) to leverage responsive web design. 

- Easy to use interface to access fleet-related information  instantly
- Ability to track workflows of team members and respective clients
- Features to manage the fleet from a remote location
- A single portal to monitor fleet operations
- Schedule analytics reports using Power BI

Read more about - https://www.softwebsolutions.com/web-and-mobile-app-using-angular.html
Pengelolaan air tanah dan analoginya dengan pengelolaan keuangan
Published: 2021-02-03 09:07:30

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

Pengelolaan air tanah mirip dengan pengelolaan keuangan. Ada pemasukan dan pengeluaran. Keduanya harus seimbang. Pengeluaran jangan sampai lebih besar dari pemasukan. Indikasi kesuksesan pengelolaan keuangan adalah seluruh pengeluaran dapat dipenuhi dan tetap bisa menabung. Pengelolaan air tanah juga sama. Pengambilan air jangan sampai melebihi jumlah air yang meresap ke dalam akuifer. Penjelasannya ada dalam podcast ini.
How to Export Lotus Notes NSF files to Outlook in Windows?
Tags: lotusnotestooutlook, nsftopst, nsftooutlook
Published: 2021-02-03 08:45:40

You can free download and try the NSF to Outlook Converter that lets you export multiple NSF files from Lotus Notes to Outlook without any data error in just a few simple steps. This NSF Converter offers multiple features that are advance, easy to understand, and helps you to export the NSF database to Outlook with 100% success results.


This Lotus Notes to Outlook Converter will provide you the option to export NSF files direct to Microsoft Cloud accounts like NSF to Office 365, NSF to Live Exchange Server, NSF to Outlook.com. Also Provide you advance filter options like Date range filter, subject filter, etc. for user better experience.


Both home users and technical sound users can easily operate this software. It has a simple and easily understandably Graphical Interface. It provides a free trial that allows users to add and scan multiple NSF files and give a preview of data and convert 25 files from each folder to PST file format.

To know more simply follow the link: https://www.cubexsoft.com/nsf-converter/to-pst.html
ServiceNow: Script Tracer
Tags: servicenow
Published: 2021-02-03 08:02:23

With the new Quebec release, ServiceNow has now a 'Script Tracer'!
The Script Tracer is a javascript debugger which helps you debug synchronous, server-side scripts which are executed as part of an application's logic.

To start tracing you need to open the Script Tracer via System Diagnostics > Script Tracer. The Tracer opens in a new window and then press the 'Start Trace' button to start tracing.

![alt text](https://developer.servicenow.com/app_store_learnv2_scripting_quebec_serverscripting_images_script_scripttracer.png "Script Tracer 1")

The tracer tracks all server-side scripts and UI actions that are triggered during the time of tracing. Errors are indicated by a red cycle with a X. 

![alt text](https://developer.servicenow.com/app_store_learnv2_scripting_quebec_serverscripting_images_script_tracerrunning.png "Script Tracer 2")

There are three tabs with more information. The state tab shows the fields and new values resulting by the script. Changed values are highlighted in green.

The Script tab shows the specific line of script, with the button 'Show Script' you can see the complete script. With the button 'View File' in the top right, you can switch directly to the file.

The Transaction tab shows details about the current transaction.
JS Test #3: Adding strings to numbers and booleans
Tags: beginners, javascript, codenewbie, webdev
Published: 2021-02-03 06:55:47

![code-snippet](https://learn.coderslang.com/js-test-3.png)

Will we see any output? If yes, then what would it be?	

<!--more-->

.

.

.

.

.

.

.

.

.

.

.

.

.

To answer this question correctly, you need to understand the typecast rules in JS.

The arithmetic operations `+` and `-` have the same priority, so the value of `x` will be calculated from left to right without any exceptions.

First, we concatenate the string `'2'` with the number `3`. The result is the string `'23'`.

Second, we try to subtract the boolean value `true` from the string `'23'`. To make this operation possible, both boolean and a string have to be cast to a number. Non-surprisingly `'23'` becomes `23` and `true` is turned to `1`. Eventually, we do the subtraction and get the result, number `22`.

The last step is to add the string `'1'` to the number `22`. Applying the same concatenation that we did on the first step gives us the result - a string `'221'`.

---

**ANSWER**: there are no issues with the expression in line 1. The value of `x` is a string `’221’`, which will be successfully logged to the screen.

[Learn Full Stack JavaScript](https://js.coderslang.com)
Glassmorphism Credit Card CSS
Tags: css, input, glassmorphism, creditcard
Published: 2021-02-03 06:48:40

My final and first project with Html & CSS after finishing the course in Wix. we learned the basics of HTML and CSS (basic course for Product Design of the company), while the final project was to create any kind of form with inputs. 

[https://codepen.io/ronkeee/pen/KKgJmmz](https://codepen.io/ronkeee/pen/KKgJmmz)
Interface gráfica com Powershell
Tags: powershell, tutorial, beginners, gui
Published: 2021-02-02 18:41:05

Já criamos scripts de backup simples, com funções, com uma forma de acessibilidade, mas será que conseguimos também sair do terminal e deixar ele com uma cara mais de "programa"? 

Com o Powershell podemos criar uma interface gráfica simples, e inegavelmente com uma cara antiga, para os scripts. 
É um processo bem trabalhoso mas pode ser útil, então vale a pena compartilhar. 

Vou tentar pelo texto explicar um pouco da ideia geral do que vamos fazer e compartilhar um script super comentado para exemplificar. 

Precisamos ter algumas noção para criar essa interface, a primeira delas é que criaremos um formulário, então vamos pensar que temos uma folha em branco onde precisamos desenhar o que queremos mostrar.

Para esse exemplo, precisamos desenhar: 
1. Campos de texto não interativos
1. Botões que estão sempre visíveis
1. Um botão que só vai aparecer quando uma condição for cumprida

Para localizar as pastas, vamos escrever uma função para exibir para o usuário o Windows Explorer e permitir que ele visualmente selecione a pasta que quer salvar e onde quer salvar.

Para fazer a magica acontecer, vamos interagir com um evento do botão, nesse caso o momento em que o usuário clica nele. Trabalhando com esse evento, deixamos de gatilho para que o trecho do código seja executado somente quando o usuário utilizar.

Esse script é realmente mais complicado de explicar, mas com o exemplo, acredito que consiga replicar e modificar. 

{% gist https://gist.github.com/IGDEXE/b9e0c00c21512443d9b6a64732c965fa %}

Precisamos apontar exatamente a posição do que queremos desenhar, o que pode dificultar um pouco o processo de deixar a interface bonita e com uma boa usabilidade. 
Um outro ponto de atenção importante, se encerrar o terminal a interface também é fechada. 

Concluindo, acho valido comentar que não é só porque conseguimos fazer, que devemos fazer. Powershell é uma linguagem muito útil para automatizar sistemas, mas nem por isso precisamos fazer tudo com ela. 
Uma interface gráfica feita por uma linguagem de programação mais "convencional", provavelmente terá um desempenho, usabilidade e aparência melhores do que vamos conseguir nesse script. 
E claro, podemos manter nossa logia de manipulação de sistema feita por scripts e aciona-los nessa interface.
Why Flutter App Development is the Best Choice for Startups in 2021?
Tags: flutter, mobile, android, ios
Published: 2021-02-03 06:36:21

Advancing technology has brought radical changes in our life by bringing some of the most unique solutions. One of such solutions is Flutter app development. It has created a big impact on every industry sector irrespective of the company’s size. As a promising platform, Flutter can significantly increase the speed of cross-platform app development while saving huge bucks for entrepreneurs. These are just a few reasons why startups find Flutter an ideal choice.

Top Six Reasons Why Flutter is An Ideal Choice for Startups in 2021

Since its launch back in 2017, Flutter has gained ground among mobile app developers worldwide. An innovative approach, high efficiency, and enhanced reliability can make Flutter an ideal choice for every business. Talking about startups, Flutter app development trends fit in every corner. What’s more, reduced development and maintenance rates, as well as improved performance, make Flutter a perfect choice for startups.

Let’s go through the top six reasons why startups should opt for Flutter app development in 2021-

Rapid Development Process- Cross-platform app development is known for quick execution and reduced TTM (Time to Market) for customized, native-like apps. When it comes to startups, they need to launch a dedicated app in a short time to get a competitive edge and promote their business effectively. Here, Flutter app development lends a helping hand. It ensures quick app development process and enables entrepreneurs or startup owners to come up with a mobile app that can seamlessly run across various platforms including Android OS and iOS. What’s more, Flutter-based apps are user-friendly and highly customizable, so startups can update them as per the changed business requirements.
 

Cost-effective Option- The cost of Flutter app development is less because Flutter apps take a less time in development and testing. The platform facilitates developers to build a feature-rich app for your business in a short time. Startups find this very useful as their focus remains on saving money at every stage so that they can invest money in other productive aspects. The Flutter platform enables developers to build a cross-platform app using a single code base. Another feature known as Hot Reload can save the developer’s time in testing apps.

Read More:https://www.suriainternational.com/flutter-app-development-is-best-choice-for-startup/