teleren/devto huggingface dataset:
5 lines of CSS style for disabled elements.(from Material Design)
Tags: css, webdev, beginners, tutorial
Published: 2021-10-18 08:11:52

---
cover_image: https://lh3.googleusercontent.com/ZWFDVVYAkiFCGvmxT7PQKKyIQz1l_-QKSeXyCCO96cmmXGsNMOmGFFTHzzA0oweCHYgyGv-iF5LCdqR5nVEPxmuE0FDxlQQbAdCWjg=w1064-v0
---
If I are creating a form with HTML, sometimes I wanted to disable a text box for users. Here came the **`disabled` attribute**.

## Disabled Controls
The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.

If the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. Often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.

## Read only controls
What about **read only** controls.
The difference between `disabled` and `readonly` is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

## Required fields
What about **required** controls.
Because a `disabled` field cannot have its value changed, `required` does not have any effect on inputs with the disabled attribute also specified. Additionally, since the elements become immutable, most other attributes, such as pattern, have no effect, until the control is enabled.

> Note: The `required` attribute is not permitted on inputs with the `disabled` attribute specified.

## Material Design
Material Design is a design language developed by Google in 2014. Expanding on the "cards" that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

According to Material Design
> A disabled state communicates when a component or element isn’t interactive, and should be deemphasized in a UI. Disabled states are displayed at 38% opacity of the enabled state.

Disabled states can also indicate they are not interactive through color changes and reduced elevation.

![(1) Enabled and (2) disabled buttons differentiate through color and elevation changes.](https://lh3.googleusercontent.com/ZWFDVVYAkiFCGvmxT7PQKKyIQz1l_-QKSeXyCCO96cmmXGsNMOmGFFTHzzA0oweCHYgyGv-iF5LCdqR5nVEPxmuE0FDxlQQbAdCWjg=w1064-v0)

## The code
So here is the Materialized disabled CSS snippet
```css
:disabled,
[disabled] {
  opacity: 0.38;
  pointer-events: none;
}
```
{% codepen https://codepen.io/ksenginew/pen/abyNJqQ %}

That's all. Enjoy it.
Follow me for more tricks.🏃‍♀️🏃‍♂️
Thanks 💖💖💖.
Hacktoberfest2021 Journey
Tags: hacktoberfest, java, github, opensource
Published: 2021-10-18 08:05:53

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

### First experience in Hacktoberfest
There was a Digital Ocean meeting a long time ago. It was introduced to the event by the speaker.


### Background
I'm a Software Engineer who loves open source technology. Java and a little javascript are used in coding. I play video games when I'm not working. I love music and I play instruments like guitar and bass.

### Progress
It is quite challenging because the review of my PR's are quite too long to be accepted and some has no labels. I decided to contribute project's that are implemented in Spring Framework after working on snippets for the first week. Most of my contributions are focused on code quality and unit test.

### Contributions

1. DVHacktoberfest- https://github.com/DVB7781/DV-Hacktoberfest/pull/20
2. Stockshare - https://github.com/Sarthakdtu/StockShare/pull/4
3. provider/hackerrank - https://github.com/pro-vider/HackerRank/pull/4
4. iedcbootcampcec/Hacktoberfest21-letshack - https://github.com/iedcbootcampcec/Hacktoberfest21-letshack/pull/16
5. mansiparashar/springboot-mongodb -https://github.com/mansiparashar/springboot-mongodb/pull/2
6. ninjaarun/SpringFramework - https://github.com/ninjaarun/SpringFramework/pull/3
7. GregorioPM/Spring-Rest - https://github.com/GregorioPM/Spring-Rest/pull/7
8. tino097/awesome-spring-boot-rest-api - https://github.com/tino097/awesome-spring-boot-rest-api/pull/5

### Maintainer
I also participate in maintaining a repo https://github.com/abhpd/hacktoberfest2021. I focus on java snippets that can be used in a real world application.

### Reflections
Well, its FUN. Looking forward to participating next year.
“Learn Amazon SageMaker”, second edition
Tags: aws, machinelearning, howto
Published: 2021-10-18 13:52:47

---
title: “Learn Amazon SageMaker”, second edition
published: true
date: 2021-10-18 08:01:39 UTC
tags: aws,machinelearning,howto
canonical_url: https://julsimon.medium.com/learn-amazon-sagemaker-second-edition-cbd2bfb5e9f2
---

Very happy to hold a paper copy of “Learn Amazon SageMaker, 2nd edition”. 532 pages and 60+ notebooks, taking you from installation to production. Available for pre-order on [Amazon](https://www.amazon.com/Learn-Amazon-SageMaker-developers-scientists-ebook/dp/B09CQ6MSRY/), [Packt](https://www.packtpub.com/product/learn-amazon-sagemaker-second-edition/9781801817950) and everywhere else.

![](https://cdn-images-1.medium.com/max/1024/1*-tiS0wwOBbunEcLey_GIlA.jpeg)

Table of contents:

![](https://cdn-images-1.medium.com/max/1024/1*dLkp98e8ONZMTOd6ytIOWQ.jpeg)

![](https://cdn-images-1.medium.com/max/1024/1*Qo3iRIip7oy4mKlBb48JXw.jpeg)

![](https://cdn-images-1.medium.com/max/1024/1*52ziWobseMmVdctDSNpyAg.jpeg)

![](https://cdn-images-1.medium.com/max/1024/1*oBVq4aT9bGHNtzHuZm0_BA.jpeg)

![](https://cdn-images-1.medium.com/max/1024/1*i2pp0B0u5xTdx_hupl2j3A.jpeg)
Spiral lifecycle model Part 2
Tags: programming, productivity
Published: 2021-10-18 07:54:22

**In the last post, we studied about the spiral lifecycle model. Let us now continue discussing about the model in this part. Just in case you missed it, you can check it out [here](https://dev.to/aatmaj/spiral-lifecycle-model-part-1-4cjh)**
____

### Advantages of the model
The spiral lifecycle model helps you analyze risks and eliminate them before they get too big. One of the moist important advantages of the spiral model is that as the cost increases, the risk decreases. The more time and money you spend, the lesser risk you are actually taking, which is exactly what we all want in any lifecycle model.

The spiral model provides at least as much management control as the traditional waterfall model, you have the checkpoints ready just from the start of every iteration. Because the model is risk oriented, it provides you with the early indications of any risks possible. If in the worst case, the project cant be done for technical or any other reasons, you will find that out early on. Moreover the users can see the system easily from the start due to **effective prototyping**. This results in **Early user engagement**

The spiral lifecycle model can be coupled with other lifecycle models in a couple of different ways. This is why this model is very adaptable. And yes, the transition from building a project to maintaining it is so smooth that this boosts the overall maintainability of the project 

### Disadvantages
The only disadvantage of the spiral model is that it's a lot complicated.  It requires conscientious, attentive and knowledgeable management. It can be difficult to define objective, verifiable milestones that indicate weather you're ready to add the next layer to the model or not. In some cases, the product development is straight forward enough and project risks are modest enough that you don't need the flexibility and risk management provided by the spiral model. Not suitable for small or low risk projects and could be expensive for small projects.


### When to use this model
Use this model when you have an experienced management staff. Use in projects where user involvement is to be preferred over expected time to complete.

> Use For
##### For medium to high-risk projects.
##### When there is adequate to fair time.
Do not re-dispatch jobs but still notify sentry for failure.
Tags: php, tutorial, laravel
Published: 2021-10-18 07:33:19

In my daily work as php developer, sometimes I need to make a job do not being re-despatched, yet fail and notify the sentry for failure.

So let us suppose we have a job that retrieves some data from DB and e-mails it:

```php

namespace App\Jobs

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;

class MailStuff implements ShouldQueue
{
    use Dispatchable;
    use InteractsWithQueue;
    use Queueable;
    use SerializesModels;

    private $model;    
    private $email;

    public function __construct(Model $model, string $email)
    {
      $this->model = $model;
      $this->email = trim($email);
    }


   public function handle()
   {
      if(empty($email)){
         throw new RuntimeException("Mail Should not be valid");
      }      
      
      // Collect data here
      // Send email
   }
}
```

Also we followed the sentry's [documentation](https://docs.sentry.io/platforms/php/guides/laravel/) and set up the sentry.

In our case job will be re-dispatched and will fail again and still be re-dispatched and fail again etc etc. That will keep the queue busy for no aparent reason. Is email is empty we have no reason to re-dispatch the job, but I need to know that job has been stopped in errorous condition.

Therefore I'll refactor the handle like this:

```php
 public function handle()
   {
      if(empty($email)){
         app('sentry')->captureException(new RuntimeException("Mail Should not be valid"));
         Log::error("Mail Should not be valid");
         return;
      }      
      
      // Collect data here
      // Send email
   }
```

What I did is I used the sentry from service container and reported manually an exception. Then I'll just return the function and not proceed further.

The approach is not perfect but it works and does not keep queue busy if it should not be kept busy.

Comment bellow for a better solution.
Create a neomorphism effect in CSS !
Tags: css, neomorphism, tutorial
Published: 2021-10-18 07:23:52

Hey **fellow creators**,

Let's learn how to create this awesome *neomorphism* effect in CSS that's raging at the moment !

If you prefer to watch the video **version**, it's right here :

{%youtube _46bA5Nw_vk%}

## 1. Create a button in HTML.
Create a button in your body with a fire emoticon and a class called "btn".

```html
    <body>
         <button class="btn">🚀</button>
    </body>
```

## 2. Style the button.
Make sure to give the button the same colour as the colour of its background in order to blend in. Then, center the button in the middle of the page as well as center the emoticon inside the button.

```css
body{
    background-color: #333333;
}

.btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 200px;
    height: 200px;
    font-size: 60px;
    outline: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #333333;
}
```

For now, the button blends into the background, so we'll need to remedy that.

## 3. Add some depth !
Now it's time to add some depth ! Since we cannot see the button right now, we'll use box-shadow to create this neomorphism interface.

In order to do that, we'll add some lighter shadows to the left of the button (second line) and some darker shadows to the right (first line), for instance here with :

```css
.btn{
    box-shadow: 5px 5px 10px #202020,
    -5px -5px 10px #464646
}
```
![Neomorphism button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htrdlh522kdw8a1mnsif.png)
Make sure the button is still accessible.

But here you are! You've created your very first **neomorphic** button. Well done 👏
 
Grab the source code is here : https://www.ui-delivery.com/Neomorphism

Come and take a look at my fancy **Youtube channel**: https://www.youtube.com/c/TheWebSchool

*See you soon for more easy-to-follow tutorials !*

Enzo.
My 10 favorite Tech Twitter tweets from the past week
Tags: webdev, beginners, programming, tutorial
Published: 2021-10-18 07:15:44

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

8 must-read blog posts:

By macerub 

{% twitter 1449341454711672835 %}

A skill that everyone should learn:

By mkhundmiri 

{% twitter 1448919021139611648 %}

Web3 will be huge

By dabit3 

{% twitter 1447549652715323392 %}

Write your Twitter bio using these:

By joserosado 

{% twitter 1448790643048845318 %}

Autonomous is the future:

By tom_hirst 

{% twitter 1447490409723224069 %}

It's just a jpg:

By tomosman 

{% twitter 1448974171514544165 %}

Taking breaks from time to time is key:

By catalinmpit 

{% twitter 1448242908969246726 %}

Start documenting your journey:

By @MakadiaHarsh 

{% twitter 1448964022431326230 %}

If you're interested in creating content as a developer, read these replies:

By FrancescoCiull4 

{% twitter 1448202525249769474 %}

Wait until compounding kicks in:

By study_web_dev 

{% twitter 1447421062237536257 %}

_I hope found this useful and if you did please let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._
String.prototype.toUpperCase()  VS  String.prototype.toLowerCase()
Tags: javascript, beginners, programming, webdev
Published: 2021-10-18 07:14:58

Hello World!

In this tutorial we are going to be looking at the difference between: 

**String.prototype.toUpperCase()** 

and 

**String.prototype.toLowerCase()**


These two *methods* act similar but have different outputs, they are basically two sides of the same coin. Lets Take a quick look at this fairly simple code.




**String.prototype.toUpperCase()** 

In this section we will be looking at how to use the Syntax Method: **toUpperCase()**


Description:
 
The **toUpperCase()** *method* is a way of changing the string value into **UPPERCASE** letters within the string object. 

Let’s take a look at the example below:

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

**Expected Output: THIS IS AN EXAMPLE OBJECT STRING USING TOUPPERCASE METHOD**


||                                                       



**String.prototype.toLowerCase()** 

In this section we will be looking at how to use the Syntax Method: **toLowerCase()**


Description:


The **toLowerCase()** *method* is a way of changing the string value into **lowercase** letters within the string object. 

Lets take a look at the example below: 

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

**Expected Output: this is an example object string using tolowercase method**



**The Difference** between *String.prototype.toUpperCase()*  &  *String.prototype.toLowerCase()* is that the toUpperCase() method simply converts lowercase strings(only) into capital formatted letters, while the toLowerCase() method simply converts Uppercase strings(only) into lowercase formatted letters. 

For more detailed inquires about the syntax, usages, specifications, browser compatibility and more, check the links bellow: 

1. toLowerCase() Method link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase 

2. toUpperCase() Method link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
Hide or Show Gridlines in Excel in Java
Tags: java, excel, api
Published: 2021-10-18 07:10:32

The Excel gridlines run between the columns and row of the spreadsheet, allowing you to see where each individual cell is located. This article will share how to use a free Java API to hide or show gridlines in a Excel worksheet programmatically.

**Installation (2 Method)**
**1#** Download the free API ([Free Spire.XLS for Java](https://www.e-iceblue.com/Download/xls-for-java-free.html))and unzip it, then add the Spire.Xls.jar file to your project as dependency.
**2#** You can also add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
    <repository>
        <id>com.e-iceblue</id>
        <name>e-iceblue</name>
        <url>http://repo.e iceblue.com/nexus/content/groups/public/</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.xls.free</artifactId>
        <version>3.9.1</version>
    </dependency>
</dependencies>
```

**Sample code**
```java
import com.spire.xls.ExcelVersion;
import com.spire.xls.Workbook;
import com.spire.xls.Worksheet;

public class HideOrShowGridlines {

    public static void main(String[] args) {

        //Create a Workbook object
        Workbook workbook = new Workbook();

        //Load a sample Excel file
        workbook.loadFromFile("C:\\Users\\Administrator\\Desktop\\input.xlsx");

        //Get the fisrt worksheet
        Worksheet worksheet = workbook.getWorksheets().get(0);

        //Hide gridlines
        worksheet.setGridLinesVisible(false);

        //Show gridlines
        //worksheet.setGridLinesVisible(true);

        //Save the document
        workbook.saveToFile("HideGridlines.xlsx", ExcelVersion.Version2016);
    }
}
```

![Gridline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy9h8fxwsd5g9gzf0mos.jpg)
10 JS tricks you *probably* didn't know
Published: 2021-10-18 06:51:33

1. You can use **+** in front of a string to convert it into a number. `console.log(typeof +"5") //number`
2. **+** in front of date object will convert in into number of milliseconds. `console.log(+new Date()) //1634538267248`
3. **| 0** after a floating point number will convert in into a integer. `console.log(35.354 | 0) //35`
4. If an array only contains one number you can use **+** in front of array to convert it into a number. `console.log(typeof +[6]) //number`
5. Use es6 to remove duplicates from array. `console.log([...new Set([1,2,2,3,4,4,5])]) //[1, 2, 3, 4, 5]`
6. Converting Numbers array to Strings array `console.log([1,2,2,3,4,4,5].map(String)) //['1', '2', '2', '3', '4', '4', '5']`
7. Converting String array to Numbers array `console.log(['1', '2', '2', '3', '4', '4', '5'].map(Number)) //[1, 2, 2, 3, 4, 4, 5]`
8. HTML comment is valid in JavaScript WTF 🤣```js
<!--Don't mind me I am just a comment-->
console.log("Hello")
```
9. Compare three values without using **&&**. `console.log(3 > 2 < 5) //false`
10. Deep copy object using **JSON.stringify** and **JSON.parse** `console.log(obj == JSON.parse(JSON.stringify(obj))) // false`
Why You Must Learn Software Design Patterns
Tags: webdev, tutorial, programming, technology
Published: 2021-10-18 06:39:25

![](https://miro.medium.com/max/1400/1*u9jpjqjXKQpfuMMbur-9Zw.jpeg)

Design patterns let you write better code more quickly.



{% medium https://medium.com/@mariusbongarts11/why-you-must-learn-software-design-patterns-befd77f88713 %}
9 Strategies to Speed Up the Software Development Process
Tags: development, softwaredevelopment
Published: 2021-11-25 12:14:07

---
title: 9 Strategies to Speed Up the Software Development Process
published: true
date: 2021-10-18 06:33:44 UTC
tags: Development,SoftwareDevelopment
canonical_url: https://www.botreetechnologies.com/blog/strategies-to-speed-up-software-development-process/
---

Speeding up the software development process is essential to get more time to market for the products. Enterprises that want a first-mover advantage must launch solutions faster than their competitors. Therefore, the speed of software development is one of the most significant factors to understand the depth of competitive advantage.

Software development companies need me to constantly meet the dynamic requirements of clients and the market. One of the major challenges enterprises face is failing to quickly launch new products and releases to serve the market. 

However, a rigorous focus to speed up software development often leads the software development teams to burn out, which ultimately leads to employee turnover. Deadline delivery has become such a priority for companies that the physical and mental health of employees deteriorates in the process.

Therefore, it is important for enterprises to improve the software development speed without leading the team to burn out and exhaustion. They need to follow strategies that will increase the speed of the software development process and ensure that the products get launched on time without additional burden on the employees. 

The speed of software development is a decisive factor in giving the enterprise a competitive advantage. How fast a company can meet the customer’s requirements determines their success in the market. Rapid application development also ensures high product adaptability as customers will get the updated products in enough time. 

And such products are only built by a [custom software development company](https://www.botreetechnologies.com/software-development-company) like BoTree Technologies. 

The post [9 Strategies to Speed Up the Software Development Process](https://www.botreetechnologies.com/blog/strategies-to-speed-up-software-development-process/) appeared first on [BoTree Technologies](https://www.botreetechnologies.com/blog).
Goodsummaries ( a new site)
Tags: html, project, programming, javascript
Published: 2021-10-18 06:28:38

Say hello to my new site and can be considered my first full site. 
**It's a site for publishing and sharing summaries of books**
You can check and use it here: 
https://goodsummaries.herokuapp.com/

 used technologies:
HTML, CSS, SASS, JAVASCRIPT, NODEJS, EXPRESS

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

![Summary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fdwe6ypytwomcifvlzv.png)

![publishing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2w94mpd7qc7209nj78y.png)

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

![Challenges page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uaacbz7kfdki6p3ln9py.png)