teleren/devto huggingface dataset:
My Most Recent Achievement Was...
Tags: wecoded, womenintech, programming, webdev
Published: 2021-03-08 14:55:50

It's been a year of lows, highs and more lows. To say challenging would be putting it mildly. The struggles continue. Nevertheless, I coded.

In the midst of the lows, the highs I achieved were both unexpected and amazing 💙:

* My first tech blog post [Navigating the World of Web Development] (https://dev.to/debrakayeelliott/navigating-the-world-of-web-development-4eao) relating to so many others in the dev community on this journey 
* Finding the Virtual Coffee community that's so supportive of where I am and encourage me to never give up
* Being featured by CodeNewbie for the [February 2021 Community Member Spotlight] (https://community.codenewbie.org/codenewbie/debra-kaye-elliott-the-go-getter-43mh), my biggest achievement ever! 

This journey is not one to be navigated alone. It has been challenging. It has been demotivating, more times than I care to admit. It has made me feel like I'm not progressing. This is why participating in the right communities is *so* important. The right people will meet you where you are and not judge you, will help you through your struggles, help you learn, encourage you to keep going and celebrate your wins with you. The saying goes "Surround yourself with positive and uplifting people," and those are the only types of people I want in my circle.

My biggest goal is to be the best developer I can be, and work with great people in a supportive environment. A developer will do great work and grow in an environment where they're supported, their voice is heard, their team listens, they feel valued and are celebrated. That's where I want to be.

It's been more than a challenging journey. Nevertheless, I coded.
Integrate ESLint with your React project step by step (javascript)
Tags: javascript, react, eslint
Published: 2021-03-08 14:55:05

First of all we need to install ESLint

```
npm i eslint --save-dev
```

Install ESLint plugins

```
npx install-peerdeps --dev eslint-config-airbnb
```

Note: with a single command will install 6 plugins: `eslint-config-airbnb`, `eslint-plugin-import`, `eslint-plugin-react`, `eslint-plugin-react-hooks`, and `eslint-plugin-jsx-a11y`. You can also install these plugins individually.

Install babel eslint

```
npm i --save-dev babel-eslint
```

Your "devDependencies" should look something similar to this

```
"devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.0.0"
}
```
Now, create file `.eslintrc.json` at the root of the project. Paste below config:

```
{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
    },
    "parser": "babel-eslint",
    "extends": [
        "eslint:recommended",
        "airbnb",
        "airbnb/hooks",
        "plugin:react/recommended",
        "plugin:import/errors",
        "plugin:import/warnings",
        "plugin:jsx-a11y/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off",
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [
                    ".js",
                    ".jsx"
                ]
            }
        ],
        "react/display-name": 1
    }
}
```
Also, install [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for VSCode, After that need to reload VSCode window once to get proper linting.*

ESLint will automatically start detecting errors/warnings in `.js` and `.jsx` files. If that's not the case then either your project has no linting errors or ESLint is not properly setup. To test if linting works run eslint command in the terminal with folder path i.e. `eslint src/**` and notice output.

To disable the linting of some files/folders you can create a `.eslintignore` at the root of the project.

`.eslintignore`

```
node_modules
dist
coverage
```

Finally, you can also add linting to `scripts` in `package.json` as a part of your pipeline process

```
"scripts": {
    "lint": "eslint . --ext js,jsx",
    "lint:fix": "eslint . --ext js,jsx --fix"
}
```
3D Architectural Visualization services
Published: 2021-03-08 14:40:17

Silverbell is a 3D Architectural Visualization and Rendering Company based in Delhi, India, that specialises in producing high-quality 3D architectural visualisations, product visualisations, and 3d Interior Designer Rendering visualisations for Architects, interior designers, business clients, and the real estate industry, among many other things.

Visit US Our Website :-https://www.silverbell.co/services
Laravel Tip: Refactoring to lookup tables
Tags: laravel, tip, php, refactor
Published: 2021-03-08 14:37:36

---
title: Laravel Tip: Refactoring to lookup tables
published: true
description: Sometimes you find yourself in a situation where you have too many if statements in a controller.
tags: laravel, tip, php, refactor
//cover_image: https://direct_url_to_image.jpg
---
Sometimes you find yourself in a situation where you have too many if statements in a controller. On a recent project that we were working on, we had a case where we had to show three different views based on the model type.

Our initial code looked something like this:
```php
<?php

public function create(Report $report, $type)
{
    if ($type == 1)
        return view('items.inventory.create', ['report' => $report]);
    elseif ($type == 2)
        return view('items.stock.create', ['report' => $report]);
    elseif ($type == 3)
  return view('items.special.create', ['report' => $report]);
}
```

[Read full tutorial on our blog](https://www.luckymedia.dev/blog/laravel-tip-refactoring-to-lookup-tables)
NET5 & Record Type - Creazione copie
Tags: net5, recordtype, andreacarratta
Published: 2021-03-08 14:24:09


❓ Ti sei mai chiesto come effettuare copie al volo?

Nella vita possiamo porci molti problemi, ma sicuramente uno tra questi dovrebbe essere 

👉 Se ho gia' un RecordType e devo crearne dai valori molto simili, posso fare qualcosa oppure devo crearlo da zero ogni volta?

Nel seguente post troverai la soluzione per risolvere questo dilemma!

🚀 Quanto e' veloce il tutto? Sicuramente meno di avere letto il mio post sino a questo punto!  Ti aspetto sul mio blog!

[Articolo Completo](https://blog.devandreacarratta.it/net5-record-type-with/?utm_campaign=net5&utm_medium=coding-tips&utm_source=devto&utm_content=net5-record-type-with)

#net5 #recordtype #devandreacarratta
ActiveStorage: Attaching file inline in Model.create / update
Tags: rails, activestorage
Published: 2021-03-08 14:23:22

In the [Rails guides](https://edgeguides.rubyonrails.org/active_storage_overview.html#has-one-attached) you learn you can attach a file to a model using the `attach` method on you attachment:

```ruby
@message.image.attach(
  io: File.open('/path/to/file'),
  filename: 'file.pdf'
)
```

Super useful when your record is already created. But if you need to create a new record you can also attach your file directly in the `create` command:

```ruby
Message.create(
  foo: 'baa', 
  image: {
    io: File.open(Rails.root.join('image.png')),
    filename: 'image.png'
  }
)
```
Best Image Editing service and Retouching 
Published: 2021-03-08 14:19:56

Looking for the Best Image Editing service and Retouching images editing services online?

With our real estate photo editing services, you can always rely on image editing agency for high-quality professional images. We have a team of professional photo retouching artists who can handle any kind of photo retouching project. Our customer service team is prompt to discuss any issues or concerns you may well have.

Visit us Our Website:- https://pictionstar.com/photo-editing-retouching/
5 underrated Tech companies that pay more than Google, Microsoft, and Amazon
Tags: career, webdev, beginners, productivity
Published: 2021-03-08 14:19:39

{% youtube aaEVJpL62XQ %}

A lot of engineers set their career goal as working at one of the major tech giants. I think this is mainly due to years of essentially propaganda telling people they aren't a "real" engineer unless they jump through all the hoops required to work for those companies.

**In reality there are a bunch of other great companies that pay just as much as companies like Google, Facebook, Amazon, etc**. In fact, many of them pay more. In recent years it has become well known that many of those big companies will give you a lowball offer unless you have a competing offer from another company.

The companies I talk about in the video above are:
* Tableau
* Roblox
* Figma
* Snowflake computing
* Plaid

I'll be covering a lot more of these lesser known tech companies so be sure to follow or subscribe on YT
She Coded, 2021
Tags: wecoded
Published: 2021-03-08 13:35:35

---
title: She Coded, 2021
published: true
description: Your advice may not always apply.
tags: shecoded
//cover_image: https://direct_url_to_image.jpg
---

I wasn't sure if I wanted to write one of these this year. If you're on twitter you may know that last week was full of bad sexist takes that were incredibly demoralizing.

Yet, it's tradition. Once a year, I walk away from tutorials and tech posts, and I write about all the things I don't normally choose or want to write about.

This year, I want to take about lived experiences.

We all move through the world a bit differently. Yet we all have similar experiences as humans. Those may seem like conflicting statements, but they're not. And it's more important than ever that we understand that.

I move through this industry as a white woman. There is inherent challenge in that to be sure. Some of which I didn't truly experience until this year, for myriad reasons. And having that experience diminished or ignored is hurtful.

When I share a story of discrimination, however well-intended, a man telling me what to do differently next time is unhelpful. They're telling me what they would do, what would work for them. But they've never experienced this industry as I do. And what works for them won't work for me.

But I'm a white woman. So that means there are just as many experiences of discrimination and harm caused by this industry that I have not experienced. And my advice does not belong in those conversations. Because I don't know how to navigate the experience of a Black woman, or a disabled woman, or so many others.

My job is to believe those experiences. Full stop. To listen, to learn, to find ways to advocate with the voice and privilege I have.

Discrimination exists on a spectrum. I expect those who don't experience sexism to listen to my lived experiences. To believe me. To learn from me. But intersectionality is everything. And I have a lot to learn too.

Coding may be for machines, but this industry is full of people. And we have a long way to go until everyone has the same experiences and opportunities.
Nevertheless, she coded: Linah Anyango
Tags: wecoded
Published: 2021-03-08 14:13:35

Linah is a Biology and Chemistry teacher at Regis School,Runda. In her 12 years of teaching, she has been coming up with innovative ways of improving learning outcomes among marginalized girls in Mombasa.

In her quest to inspire girls to venture in the STEM field, she started the Girls in STEM club in her school, where she trains girls in Digital Literacy, invites mentors to speak to them and also prepares them for various STEM fairs. She has also been running an after school free coding sessions for teens in Ganahola slum, Mombasa. 
 
Linah is a renowned speaker in both local and international EduTech Conferences where she has shared her insights on the role of ICT integration in transforming learning experiences and improving learning outcomes.

As a teacher coach, she has coached over 300 teachers on integrating various digital tools in teaching and learning. When schools were closed due to Covid-19 pandemic, she ensured that learning does not stop by training and coaching her colleagues on remote learning. she has been a Microsoft Innovative Educator Trainer and Microsoft Innovative Educator Expert from 2018. 

Linah has received several recognitions for her contribution towards transforming education and was listed among the Top 50 Teachers in world in 2020.

Linah is African region Advisory board member of the BETT MEA show, an annual EduTech event which brings together great minds in education from Africa and Middle east to share on best practice. She is also a board member of Beacon Teachers Africa, An organisation that champions Teachers empowerment and image building as well as child protection.

Moreover, she is also the founder of Kanyadhiang’ Briquettes, a community-based organisation in Homa bay county which seeks to solve the problem of water hyacinth infestation by converting them into clean energy through making water hyacinth briquettes. The CBO has not only been a good source of revenue for the women and youth in who are the members but has also helped to fight climate change through clean energy and reduced the water hyacinth menace in lake Victoria. Her zeal to transform her community has won her scholarship into leadership trainings such as YALI and TechWomen.


Follow her on social media using the following links:
[Facebook](https://www.facebook.com/linah.anyango)
[Twitter](https://twitter.com/YLnhanyango)
Glassmorphism UI
Tags: opensource, showdev
Published: 2021-03-08 14:12:44

Hello devs 👋🏻

Me and my friend from Themesberg have just launched a brand new pre-launch page for a CSS UI library that we've been working on for a while based on the new glassmorphism design trend.

We'll probably launch it in a few weeks, and it is going to be MIT licensed. 

For now, you can sign up with your email and get the latest news about the progress and be one of the first to find out when the project is launched.

Here's the page: https://ui.glass/

Cheers!
Refactoring type annotations to PHP 7.4 type declarations with Rector
Tags: php, refactoring, webdev, engineeringmonday
Published: 2021-03-08 14:11:35

## The problem
So, you have an older PHP project that uses type hinting via annotations and you would like to move away from those ugly annotations to nice inline type declarations. 

*From this:*
```php
<?php

declare(strict_types=1);

class SomeClass 
{
	/**
	* @var string
	*/
	private $someProperty;
}
```
*To this:*
```php
<?php

declare(strict_types=1);

class SomeClass 
{
	private string $someProperty;
}
```

Sure, you could do it manually but depending on the size of the project this could take anywhere from a day to a couple of weeks. 

## The solution
Well, worry not, this is where [Rector](https://github.com/rectorphp/rector) comes in. Rector is a "tool for automated refactoring" that will make changes in your code based on pre-defined rules. One of those [many rules](https://github.com/rectorphp/rector/blob/master/docs/rector_rules_overview.md) will help us to automatically move type declarations from annotations to inline declarations and that rule is called TypedPropertyRector. So now that we know what Rector is and what rule to use, how do we use it?

First of all install Rector using composer
`composer require rector/rector --dev
`
Next, use the init command to create the rector.php config file
`vendor/bin/rector init`

Now it's time to modify the config file to suit our use case
```php
<?php
//rector.php

declare(strict_types=1);

use Rector\Php74\Rector\Property\TypedPropertyRector;
use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;

return static function (ContainerConfigurator $containerConfigurator): void {
    $services = $containerConfigurator->services();
    $services->set(TypedPropertyRector::class);
};
```

Finally, you can either run Rector to process your files in the src directory
`vendor/bin/rector process src` or do a dry run to catch any errors that might pop up beforehand `vendor/bin/rector process src --dry-run`

## Conclusion
 Rector is an amazing tool that will let you do all sorts of improvements on your code and automate a lot of work when migrating to other PHP versions. It's also not a bad idea to consider using it as a part of your CI pipeline for automated code refactoring or even automated code review.
APIs 101 Using Postman | Ali Mustufa | 8th March 2021 |FET-JU
Tags: api, postman, jgi, 2021
Published: 2021-03-08 14:04:31

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

First of all, we get to know about our speaker of the day @ialimustafa.
He has excelled in contribution and grow with the community, has attended many pronounced submits.
Now coming to the workshop, I’ve to say his presentation skill is as perfect as crystal.
Started with
##API:-Application Programming Interface:

We’ve seen a real-time use of API, Example was about social media. Discussed story of Instagram, LinkedIn.
Kinds of API: 
1)	PUBLIC API:-
    Eg. Music with Spotify helps to provide, Weather report, etc.
2)	PRIVATE API:-  
    Eg.  API used by Instagram, etc.
3)	HARDWARE API:-
    Eg. Access to the camera, etc.

API’s Turn software into LEGO bricks:
--Connect one interface to other interfaces.
--Without disclosing the hardware.
Important Two Parts:

##1.Requesting       
# Method :
GET (Retrieve Information)
POST (Send Information)
PUT (Update Information)
DELETE (Deleting Information)
 
# Address URL:
Linkedin.com/ feed/
-Where Linkedin.com/  is End Point
       i.e channel of communication.
-feed/   is the path 
       i.e where the operation is going to be.

# Specifying details:
 -Parameters:
->path param
->query param

Then,

##2.Receiving Responses
->Status code:
404- Page not found
200- Ok
201- Created successfully     
400- Bad request
->Headers
->Accessing Body Data

At the end of the theory
Discussed 
What is Postman?
Ans. Creating, using & testing APIs with UI.

Also covered the scenario of Before Postman & After Postman development(auto code generated). 

#Key points:- (Hands-ON)
Then learned to 
use 4 methods of requesting, 
how to fork,
 use of Id, 
Where to find the body? 
  Refer documentation.
Hybrid CI CD: Cloud based CI and On premise CD Solution
Published: 2021-03-08 14:01:15

Use of (cloud-based) Azure Devops CI tool with (on premise) Octopus deploy CD tool. This blog explains steps to move towards a cloud-based solution from an on premise one. 

Follow steps below to implement this solution: 
> Use of on-premise agents: The concern with this implementation was the deployment would happen on premise servers using Octopus. To implement this solution we used the “On-premise” Agents. The type of agents,  communication and authentications steps are all discussed in https://docs.microsoft.com/en-us/azure/devops/pipelines/agents/agents?view=azure-devops&tabs=browser

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwlmd03ejo45tq6rk33c.png)
          
> Setting up default agent: Ensure the user has sufficient permissions and identify a suitable littler on-premises agent. Then follow the steps in https://docs.microsoft.com/en-us/azure/devops/pipelines/agents/v2-windows?view=azure-devops to set up the agent. 

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m6zda0qjy6ijdx705u1.png)
 
> Azure Devops Plugins: Following plugins are installed :
a. Red gate plugin to facilitate Integration with Redgate SQL Change Automation (https://marketplace.visualstudio.com/items?itemName=redgatesoftware.redgateDlmAutomationBuild) 

> b. Octopus plugins for deployment (https://marketplace.visualstudio.com/items?itemName=octopusdeploy.octopus-deploy-build-release-tasks)

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3p3h2dga3eccolkn9j7.png)
 

> Setting up of additional Octopus projects: Create additional projects to receive output artifacts from Azure Devops pipeline.

> These projects would receive build artifacts from Azure Devops.  The additional projects were setup to: 
a. Avoid any impact to progress on tickets dependent on Octopus
b. Existing projects in octopus have a Team city specific configuration, this was modified to generic one in 

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifhk2ke5jrrzd8hg0gq7.png)
 
> Ensure the code is in a cloud based repository: Either Azure repo / github / gitlab / bitbucket etc..,

> Setting up pipelines in Azure Devops:  Follow steps to setup azure build pipeline (for e.g. follow https://azuredevopslabs.com/labs/azuredevops/yaml/ to set up a pipeline) however ensure the agent pool in Azure Devops is set to default (as we have defined the agent to be default in step 2) and have the following major tasks in each pipeline:

> a. NuGetCommand@2 
  b. VSBuild@1
  c. OctopusPack@4
  d. OctopusCreateRelease@4
  e. OctopusDeployRelease@4

> For Steps c,d and e follow https://octopus.com/docs/packaging-applications/build-servers/tfs-azure-devops/using-octopus-extension which results in packaging/ creating a release and deploying a release in Octopus from Azure Devops

Note : Since we are using Azure Devops as a CI tool we will only be setting up the build pipelines and not the release pipelines
Combine Flask and Vue.js
Published: 2021-03-08 13:58:04

*If you want to expose an HTML page using **Flask** and **Vue.js** (without webpack), you need to set up something to let **Vue.js** know where it can work.*

---

**Flask** uses **Jinja** a templating language to display information in a webpage. And, like Vue.js, their delimiters are 
```
{{ ... }}
```

### Examples
*A Jinja example*
```html
<title>{% block title %}{% endblock %}</title>
<ul>
{% for user in users %}
  <li><a href="{{ user.url }}">{{ user.username }}</a></li>
{% endfor %}
</ul>
```


*A Vue.js example*
```html
<div id="app">
  {{ message }}
</div>
```

---

> *So, how to make them live together?*

---

### Solution

In Vue.js, you can change the delimiter of your components!

```js
var app = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    data: {
      message: 'Hello Vue!'
    }
  })
```
```html
<div id="app">
  [[ message ]]
</div>
```

With that, **Vue.js** and **Jinja** can live together and you can display **Vue.js** pages with **Flask**. 👍

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

---

### Links
* Flask : https://flask.palletsprojects.com/en/1.1.x/
* Vue.js : https://vuejs.org/
* Jinja : https://jinja.palletsprojects.com/en/2.11.x/

---

I hope it will help you! 😀