teleren/devto huggingface dataset:
On real world coding challenge
Tags: programming, watercooler, news, recruitmentprocess
Published: 2023-02-05 16:01:02

### introduction

> We've done a t-shirt for real world coding challenge. The one you usually get as part of recruitment process

![real world coding challenge](https://images.devshirt.club/real-world-coding-challenge/real-world-coding-challenge.jpeg)

### Common coding challenges

Whether it is building a stripped version of battleship game that github uses for their recruitment process for enterprise applications engineer role, whether it is building a simple chat application, whether it is a url shortener. There are countless of different real world coding challenges circulating in the wild.

What engineering managers and team leads mostly check for in this kind of take at home assignments is:
1. Do you know how to structure the project according to standard practice. 
2. Do you know how to write clean cod
3. Do you know how to input validation in order to avoid crashes 
4. Generally do you know the language/framework required for the role. 

You can often help yourself by searching for similar projects on github. There might be some open source solutions that can inspire you. Just be careful not to copy somebody's bad practices.

### Do we need coding challenge

Hiring mangers usually don't know how to get the best person for the job. They must assume that that the person applying for the job is trying to oversell. It is really hard to trust the stranger that he has the skills he says he has. That is the main reason why we have technical challenge as part of the hiring process. 

I mean it feels a bit wierd to have it, especially if you are also doing a references check. If you do references check you can assume person has the required coding skills. On top of that there are plenty of product skills, as well as soft skills that are usually expected from software engineer, but on the other hand are rarely tested. At the same time it is not uncommon to have multiple people fitting the role, technical challenge is one way to further narrow it down and find the best candidate for the job.

### Outro

We are a payed swag club for developers, every month we publish 2 t-shirts with commissioned illustrations , their articles and their story.

You can follow us here to stay up to date with our latest stuff. Or you can purchase our t-shirts at our [developers t-shirts shop](https://www.devshirt.club)
React Native vs Flutter
Published: 2023-02-05 16:00:52

React Native and Flutter are both popular frameworks for building cross-platform mobile applications. Both frameworks have their own advantages and disadvantages, and the choice between them largely depends on your project requirements and preferences.

React Native Pros:

Large community and mature ecosystem: React Native has been around for a while and has a large and active community of developers. There are many resources available and a lot of third-party libraries that you can use.
Strong support from Facebook: React Native is maintained by Facebook and has strong support from the company.
Use of JavaScript: React Native uses JavaScript, a language that is widely known and used by many developers, making it easier to find and hire developers.
React Native Cons:

Slow performance for complex apps: React Native is not as performant as native apps and can be slow for complex applications.
Steep learning curve: React Native has a steeper learning curve than some other frameworks and can be more challenging to learn, especially for those who are new to mobile development.
Flutter Pros:

High performance: Flutter is known for its high performance and smooth animations, which is important for visually appealing apps.
Quick development time: Flutter's "hot reload" feature allows developers to see changes in real-time, which can speed up the development process.
Beautiful and unique UI: Flutter has a unique and beautiful UI, which makes it possible to create visually appealing and custom apps.
Flutter Cons:

New and relatively small community: Flutter is a relatively new framework compared to React Native, and the community is still growing, which means that there are fewer resources available and fewer third-party libraries.
Dart language: Flutter uses Dart, which is a less popular language compared to JavaScript, making it more challenging to find developers with experience in Dart.
In conclusion, both React Native and Flutter have their own strengths and weaknesses, and the best choice depends on the specific requirements of your project. If you need a fast and efficient framework with a large community and support, React Native might be the better choice. On the other hand, if you need a beautiful and high-performing UI, then Flutter may be the better option.
Build a Modern API with Slim 4 - Set up your .env file
Tags: php, api, tutorial
Published: 2023-02-05 16:00:00

In the last post you may have spotted mention of a `.env` file. What is it? What does it do? Where does it sit? How does the application use it?

All of the above will be answered. For now though the very first thing you will want to do, before even creating it, is to add it to your `.gitignore`. This will contain all of our keys, database login info, and many other bits we don't want anyone to see. So gitignoring it will make sure none of those values are committed.

Make sure that we are in our project root, where our `composer.json` and `composer.lock` should be.

```bash
echo .env >> .gitignore
touch .env
```

Now open your newly-created file in your favourite IDE and add some variables.

```text
_ENVIRONMENT="development"
_PDO_HOST="ip.address.or.domainname"
_PDO_USERNAME="user.name"
_PDO_PASSWORD="SuperSecretPassword123"
_PDO_NAME="DatabaseName"
_ENCRYPTION_CIPHER_METHOD="AES-256-CTR"
_HASHING_COST="10"
_SMTP_HOST="smtp.mybookstore.com"
_SMTP_USERNAME="bookstore.ceo"
_SMTP_PASSWORD="ExtraSuperSecretPassword1234"
_RATE_LIMIT_GET="1200"
_RATE_LIMIT_POST="600"
_RATE_LIMIT_PUT="600"
_RATE_LIMIT_DELETE="300"
```

You'll notice that some of those variables don't necessarily need to be kept secret. In particular, does the SMTP host not get included in every single email our system is going to send? Well, yes, however this file isn't just for secrets, it is also a handy place to store environment-specific variables such as, well, the first line! _ENVIRONMENT=development, staging, production, any others such as demo?

By having this file you can recreate it on each server in each environment and only have to change the relevant variables in one place. The same goes for the rate limits: they're going in our documentation, there's no way they're secret!
I created a website for sharing and copying your favorite emojis.
Tags: webdev, github, opensource, showdev
Published: 2023-02-05 15:59:43


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

## Ohmoji

Live: [Demo](https://ohmoji.vercel.app/)
Source: [Github](https://github.com/DEATHTINYZ/ohmoji)

> A fun and interactive emoji collection website for sharing and copying your favorite emojis.

## Getting started

To run this project locally, you will need to have [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) (or [Yarn](https://yarnpkg.com/)) installed on your machine.

1.Clone the repository:

```bash
git clone https://github.com/DEATHTINYZ/ohmoji.git
```

2.Navigate to the project directory:

```bash
cd ohmoji
```

3.Install the dependencies:

```bash
npm install
# or
yarn install
```

4.Run the development server:

```bash
npm run dev
# or
yarn dev
```

The app will be available at http://localhost:3000.

## Features

- Emoji search functionality
- View and copy emojis
- Light/Dark theme toggle

## Tech stack

- [Next.js](https://nextjs.org/): A framework for building server-rendered React apps
- [TypeScript](https://www.typescriptlang.org/): A typed superset of JavaScript
- [React](https://reactjs.org/): A JavaScript library for building user interfaces
- [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework
View Binding in Android.
Published: 2023-02-05 15:54:28

On the 23rd of November 2020, Google [announced](https://android-developers.googleblog.com/2020/11/the-future-of-kotlin-android-extensions.html) that Kotlin Synthetics had been deprecated where the `findViewById()` method was used to find an existing view in your XML layout by it's `android:id` attribute. Enter View Binding.

If you're like me, you often have to go back to the [official documentation](https://developer.android.com/topic/libraries/view-binding) and read on how to integrate this into your project. I wrote this article as a quick reference for future me and probably you😉.

## Enable view binding.
In your tool window bar, switch to Project View and under Gradle Scripts, in the app module, select the build.gradle file and set the `viewBinding` to `true` as shown below:

```Kotlin
android {
    ...
    buildFeatures {
        viewBinding = true
    }
}
```
Behind the scenes, a binding class is generated for all the XML layout files. Each binding class holds references to the root view and all views that possess an ID. The name of the binding class comes from the name of the XML file. The name is changed to a special format called Pascal case and the word "Binding" is added to the end.
Suppose you have a layout file named `activity_main.xml`;

```XML
<RelativeLayout ...>
  <TextView android:id="@+id/hello" />
</RelativeLayout>
```
The generated class will be named `ActivityMainBinding` with a `TextView` named `hello`.

## Use view binding in activities.
In the `MainActivity.kt` file, add the following code or adjust accordingly:

```Kotlin
private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    val view = binding.root
    setContentView(view)
}
```
You can use the binding class to access any of the views now.

```Kotlin
//change the text to "Hello World"
binding.hello.text = "Hello World"
//do something when clicked
binding.hello.setOnClickListener {
   //do something
}

```
## Use view binding in fragments.
Suppose you have a fragment named `HelloWorld.kt` with a layout file `fragment_hello_world.xml`. Add the following code or adjust accordingly:

```Kotlin
private var _binding: FragmentHelloWorldBinding? = null
// This property is only valid between onCreateView and
// onDestroyView.
private val binding get() = _binding!!

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    _binding = FragmentHelloWorldBinding.inflate(inflater, container, false)
    val view = binding.root
    return view
}

override fun onDestroyView() {
    super.onDestroyView()
    _binding = null
}
```
That's just about it, you can get an in depth look in the [official documentation](https://developer.android.com/topic/libraries/view-binding) and a practical tutorial [here](https://www.youtube.com/watch?v=z0F2QTAKsWU).
Iris Dataset Analysis in R
Tags: datascience, rlanguage, tutorial, beginners
Published: 2023-02-05 15:44:55

In this post, we take a look at the Iris dataset in R. 

This dataset was first published by UCI ML repository. And later heavily used by the R, Python and other data science communities in their testing. 

Most of the data science students use the Iris for variety of reasons. Be it for plotting some of the basic plots. Another use case is with trying out some of the R and python functions which allow them to clean and manipulate data in this dataset.

Take a look at the below video if you prefer the video instructions. 

{% embed https://www.youtube.com/watch?v=zvT2JA0HaNw %} 

Let's see how you can use it with RStudio. It comes preloaded with the RStudio so you should give it a shot.

Try the code below. 

`library(datasets)
data(iris)
summary(iris)`

When you run the code you would get the results like this. 


![iris dataset - devnami](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6pus3vof9adnw5eo0m5.png)

You can take a look at the raw dataset of Iris [here](https://gist.github.com/curran/a08a1080b88344b0c8a7#file-iris-csv).

If you use the plot function and manage to send entire iris dataset you would get multiple plots too. 

for plotting you use the function. 

`plot(iris)`


![plot iris dataset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bep5rllhhpui7un0qtm.png)

As you can see this dataset can be pretty handy for those who want to manipulate data while learning data analytics and data science as a part of your degree or maybe job.

I hope this helps anyone who is trying to learn the data science and exploring the dataset on their own.
Master CSS with Google Developers' Free Online Course
Published: 2023-02-05 15:44:52

CSS (Cascading Style Sheets) is an essential part of web development, as it provides the visual design and layout of a website. It is the glue that binds HTML and JavaScript together to create the user interface of a website. If you're new to web development or want to improve your CSS skills, then you should consider taking the free course from Google Developers.

Google Developers has created a comprehensive and interactive course called "Intro to CSS: Styles and Layouts". This course is aimed at beginners who want to learn CSS from scratch or want to improve their existing skills. It is a self-paced course that consists of several video lessons and hands-on coding challenges. You can easily complete the course in a few hours, or you can take your time and complete it at your own pace.

The course is designed to help you learn CSS in a practical and interactive way. You will start by learning the basics of CSS, such as selecting elements, applying styles, and using CSS properties. Then you will learn how to use CSS to create basic layouts, including header and footer sections, navigation menus, and columns. You will also learn how to use CSS to create responsive designs that adjust to different screen sizes, making your website look great on both desktop and mobile devices.

One of the great things about this course is that it provides hands-on coding challenges to help you practice and reinforce what you have learned. You will be able to test your knowledge by writing CSS code to complete various design tasks, and you can see the results of your code in real-time.

The course also covers advanced CSS concepts, such as using CSS preprocessors, animations, and flexbox. These advanced topics will help you take your CSS skills to the next level, allowing you to create more complex and sophisticated designs for your websites.

Overall, the "Intro to CSS: Styles and Layouts" course from Google Developers is an excellent resource for anyone looking to learn CSS or improve their skills. The course is free, self-paced, and provides a comprehensive overview of CSS. So, if you're ready to take your web development skills to the next level, then check out this free course and start learning CSS today!

In conclusion, CSS is a fundamental part of web development and is essential for creating visually appealing and well-designed websites. By taking the "Intro to CSS: Styles and Layouts" course from Google Developers, you'll be able to improve your CSS skills and gain the knowledge you need to create beautiful and functional websites. Whether you're a beginner or an experienced web developer, this course has something to offer. So, don't wait any longer, sign up for this free course today and start learning CSS!
Git and Github tutorial part 2
Tags: beginners, webdev, git, tutorial
Published: 2023-02-05 15:38:14

In this post we're going to learn how a team collaborates  on a project and how to use several different git operations.

## Git branching
Git makes it possible to create branches so we can test out different project variations.

### What is a branch ?
A newly created branch is a different version of the project you're working on.
This branch  not only includes commits from the main branch but also includes commits that the main branch does not currently have.

## git branch  
 We use this command to check the current branch.

```
git branch 
```
The output of this command would be all the branches that the project has. The branch you're currently on will display an asterisk next to it like this.

```
main 
branch-1
branch-2
* feature -1
```

### How to create a new branch ?
By using :

```
git branch "name-of-the-branch"
```
Branch names cannot contain space, and should have a descriptive name.

### git checkout

You can switch from a branch to another by using the git command

```
git checkout branch-name
```
###  Git merge
To update the main branch and have it include all the modifications made to the new branch we use this command: 

```
git merge name-of-the-branch
```
First you switch to the main branch then run the command above.
 
### Merge conflicts
If you're collaborating with a team, you will find that the main branch will include new changes than are not present on your branch, especially if these changes is affecting the current files you're working on. This will create merge conflicts. 

Merge conflicts is when git is not sure which changes you want to keep.

So when you try to merge git will ask you which version to keep. Delete the version you do not want along with 

```
<<<<<<< HEAD
```
along with any other git markings such as `=====` 

### Delete a branch 
To delete a branch we use this command: 

```
git branch -d "your-branch-name"
```
Riding on the Coattails of Open Source
Tags: opensource
Published: 2023-02-05 15:26:23

Open Source, the spirit of sharing. Many things we use today are driven by open source. For one, did you know that VS Code's syntax highlighting feature was actually taken from an open-source repository CodeMirror? How much do you know about open source? Let's dive.

> Disclaimer: This will be unstructured, take what you will.

## Cybersecurity by Design
- Disclaimer: Cybersecurity is never-ending, attackers can and will always find new ways to attack
- (unless you create some self-morphing cyber defence systems that reset every few minutes, as seen in James Bond's movie Skyfall, but even then it got hacked lul)

![James Bond, Skyfall cybersecurity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scozyue7ede26lyyf3vn.png)


- 80-20 rule. Defending against 80% most common threats is a good start, and maybe only 20% of effort is required.
- To reduce that effort further, it may be good to consider it each step of the way.
- Why?
- Imagine if you only considered it in the last step of the development cycle...
```sh
It will cost you a lot to re-architect and re-code it.
```

## Be Honest
- Attended with intention to expose myself to more diverse software work (eg. Backend / Cloud)
- In the talk, organisers made a passing remark that quite accurately pointed out my (maybe others' too) motivations
- People are probably easier to read than I thought?

## ARPANet (TCP/IP/ports)
- a defence project turned into something useful for the world
- 4 minute summary video: https://www.youtube.com/watch?v=qTNq4iCQC_w
- TCP / IPv4 / IPv6 is provided today by the Internet Service Provider (ISP)
- wow! just click connect to WiFi and you got it -- how much did they simplify it for users (i.e abstract it)

![7-layer OSI model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v082v5cmszn491687ims.png)


- 7 layers of OSI model https://www.bmc.com/blogs/osi-model-7-layers/

## All Devices run some Linux (OS)
- Linux OS is open-source alternative to MacOS, iOS, Android OS, Windows OS.
- designed to be identical as Unix
- summary here: https://opensource.com/resources/linux#:~:text=Many%20devices%20you%20probably%20own,Linux%20running%20under%20the%20hood.
- No way! Linux doesn't run on my Android phone does it? Welp https://www.quora.com/What-is-Linux-on-my-Android-phone-used-for

## Conclusion
Looks like there is a lot of useful things Open Source has been, and will continue to be a part of! What are some things that really excites you about open source?
Get viewport width and height in JavaScript (with examples)
Tags: javascript, webdev, beginners
Published: 2023-02-05 15:22:16

> ✋ **Update:** This post was originally published on my blog [decodingweb.dev](https://www.decodingweb.dev), where you can read the [latest version](https://www.decodingweb.dev/javascript-get-viewport-width-and-height) for a 💯 user experience. _~reza_

Sometimes you need to get the viewport width (or height) in JavaScript – probably to adjust an element based on the window size. The good news is, it’s easy and quick! Let’s see how.

What is the viewport size? You may ask.

Here’s an explanation:

In a web browser context, the term viewport (more precisely, the layout viewport) refers to the area of the document you’re currently viewing in the browser window; Content outside the viewport is not visible onscreen until scrolled into view. And the viewport size is the dimensions of this rectangular area.

But how do you find the width and height of a viewport in JavaScript (yes, without jQuery)?

First of all, you need to answer the following question:

Do I need a viewport width (or height) without or without the vertical scrollbar? 🤔

Let’s see how we can solve both use cases.

## Get viewport width including the vertical scrollbar

To get the viewport width, including the vertical scrollbar (if there’s one), all you need is the `window.innerWidth` property – a read-only property that gives you the “interior” viewport width in pixels.

```js
console.log(window.innerWidth)
```

And here's how you'd do it for the layout viewport's height:

```js
console.log(window.innerHeight)
```

Please note the value of the `window.innerHeight` property will include the horizontal scrollbar's height.

The `window.innerWidth` and `window.innerHeight` properties are compatible with most browsers, but, of course, except for IE! Who uses IE these days anyway?

Alright, now that you know what `window.innerHeight` and `window.innerWidth` is! Let's move on to the second scenario.

## Get viewport width without the vertical scrollbar

Sometimes, you don't want the vertical/horizontal scrolls to be included in the viewport height and width.

In that case, you should use the `Element.clientWidth` and `Element.clientHeight` on your document's html element.

You can access the root html element via `document.documentElement`.

And here's how to get the layout viewport width in JavaScript without the scrollbar:

```js
console.log('document.documentElement.clientWidth')
```

And for the viewport height:

```js
console.log('document.documentElement.clientHeight')
```

If you get a ReferenceError when accessing the document, check this quick [guide on fixing document is not defined error](https://www.decodingweb.dev/how-to-solve-referenceerror-document-is-not-defined).

Alright, I think that does it. I hope you found this quick guide helpful.

Thanks for reading.