teleren/devto huggingface dataset:
How to Export Data in Django using django-import-export Module.
Tags: django, python
Published: 2021-06-02 13:30:47

Hello Devs, In this tutorial I'm gonna teach you how to use django-import-export module, I write this blog because I faced some errors during my project so that's why I write this blog and want to give you information or my code..

```
Github Link:- https://github.com/ShivamRohilllaa/django-import-export
```

# Django-import-Export
First of all install this module 

```
pip install django-import-export

```
Now add this in your installed apps

```
# settings.py
INSTALLED_APPS = (
    ...
    'import_export',
)
```

### How to implement this in your Admin Panel
######Admin.py
```
from import_export.admin import ImportExportModelAdmin

class ModelnameAdmin(ImportExportModelAdmin):
    model = Modelname

```
now register this model and you will se import or export button in your admin panel, just click on export and export the complete model data.

# How to get exact values of Foreignkey-Field in django-import-export
This value can be achieved by dehydratemethod in django-import-export, I'll show you the code how you can do this.

Create two Models and connect them with foreignkey
```
class author(models.Model):
    auth = models.OneToOneField(User, on_delete=models.CASCADE)
    full_name = models.CharField(max_length=100)
    
    def __str__(self):
        return self.full_name

class publisher(models.Model):
    auth = models.OneToOneField(User, on_delete=models.CASCADE)
    full_name = models.CharField(max_length=100)
    
    def __str__(self):
        return self.full_name

class book(models.Model):
    writer = models.ForeignKey(author, on_delete=models.CASCADE)
    publisher = models.ForeignKey(publisher, on_delete=models.CASCADE)
    bookname = models.CharField(max_length=50)
    qty = models.IntegerField()

    def __str__(self):
        return self.bookname
```

Now, write this code in your admin.py file
 
```
from .models import *
from import_export.fields import Field
from import_export import resources


class BookResource(resources.ModelResource):
    writer = Field()
    publisher = Field()
    
    class Meta:
        model = book
        exclude = ['qty']

    def dehydrate_writer(self, book):
        return '%s by %s' % 
              (book.bookname,book.writer.auth.username)

    def dehydrate_publisher(self, book):
        return '%s by %s' % 
             (book.bookname,book.publisher.auth.username)

class BookAdmin(ExportMixinAdmin):
    resource_class = BookResource
    

admin.site.register(book, BookAdmin)

```
So, this is how you can get exact values of your foreignkey in your spreadsheet..

Thank You
Creating a custom Express server in Nuxt.js: 2 things to remember
Tags: javascript, webdev, ssr, vue
Published: 2021-06-02 13:28:07

## Why would you want to create a custom server?

A Server-side Rendered (SSR) Nuxt.js application requires a Node.js server. This server renders a webpage and passes it to the client-side Vuejs. This server is implemented by Nuxt itself behind the scenes. However, this simple server makes it difficult to implement things like a POST or GET request, a Pusher channel, cookies, etc.

I needed to run a Puppeteer script on the server and thus extended the basic server provided by Nuxt.js by creating an Express server.

For a server-side rendered application, a Node.js server needs to be configured. Although Nuxt provides one for you, you can extend this server with *serverMiddleware*.

> Note: While you can extend the server with *serverMiddleware*, you can also extend and control the application's routing with *middleware*.

## Two things to keep in mind
Here are 2 things to take note of when creating an Express server in your Nuxt.js application - 

### 1. Make sure to export the server
In a simple JavaScript/Node.js application, an Express server will be the one controlling and managing most of the application. But, in a Nuxt.js application, you need to export it because you are *extending* the server provided by Nuxt.js.

![Exporting an Express server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weasho2a7pgd3fnev0df.png)

### 2. Mention the server file path in Nuxt.js config
This is mentioned in the [documentation](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-servermiddleware#custom-api-endpoint) as well. Here is what worked for me:

![ServerMiddleware in Nuxtjs config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d99wz0zmz5dux8fi3yfk.png)

## Conclusion
It is very easy to extend the functionality of the default server provided by Nuxt.js. Remember, if you also want to control routing, you need to extend *middleware*.

For creating my custom Express server and writing this article, I mainly used the [Nuxt.js documentation](https://nuxtjs.org/docs/2.x/concepts/server-side-rendering).
USB Bootable ElectronJS Application

Published: 2021-06-02 13:20:17

Anyone familiar with the ElectronJS framework is probably reading this title and scoffing at it. I know it's kind of a crazy project, but is there any way I could boot a Linux-based operating system from a USB drive that immediately opens an ElectronJS app and forces the user to stay in that app. To the end-user, it would appear as if this application is the OS. I know Ejs uses a lot of unnecessary memory, but, in my defense, it will be the only app open on the entire OS, so that memory won't be needed.

Does anyone know of any resources that explain how I could go about this? Is it even possible? I've been coding for a long time, but I'm more of a tinkerer than an expert, so I wouldn't know where to start for a project like this. Also, if this isn't even worth the effort, I will gladly accept that as an answer. This would be more of an experiment to see if it's possible than a full-fledged project.
Your opinion matters!
Tags: devrel, discuss
Published: 2021-06-02 13:14:46

I've went from a Sys Admin, someone who resets passwords, designs architecture solutions for customers, and fights with servers to fit into rack space to someone who works within Developer Relations. 

It's been an interesting journey for my career and a steep learning curve for me over the past 18 months. 

I'm looking to reach out to the community to understand what everyone's impressions are of Developer Relations within the IT industry for two reasons: 

- to understand if a side project idea is worth pursuing
- understanding my career journey and where I should focus my attention at over the next year or so

If you have a few minutes spare I'd be grateful if you fill in this short form - [take the survey](https://forms.office.com/Pages/ResponsePage.aspx?id=qQZdxE7MWUS4OrXKUKG_tWJfXrHCX6BKlAV5Vk6J4b1UNzBGSE5BTE02MFAyT1IzWFE4QzJMREgxSC4u).  It doesn't gather any personal information and there are no right or wrong answers. 😊

Thank you!
DRY Principle in 100 Seconds
Tags: javascript, webdev, design, architecture
Published: 2021-06-02 13:11:24

## :bulb: What does DRY stand for?
**DRY** stand for **Don't Repeat Yourself,** a basic principle of software development aimed at **reducing repetition** of information.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h95scpm8mulyyts1ie1d.jpg)

## :bust_in_silhouette: Origination
The principle has been formulated by **Andy Hunt** and **Dave Thomas** in their book The Pragmatic Programmer. It is stated as *"Every piece of knowledge must have a single, unambiguous, authoritative representation within a system"*.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4sam8gpes5ksqphk9g7.jpg)

## :star: Why DRY?
- Write code once, use it often.
- Change code in one place, see the change in all instances.
- Less code is good: It saves time and effort, is easy to maintain, and also reduces the chances of bugs.

## DRY Violations
- Writing/ Copying and pasting the same code or logic again and again.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m6alzdd8r7iofq01jf4.gif)

## :bulb: How to DRY?
- Divide your code and logic into smaller reusable units and use that code by calling it where you want.
- Put business rules, long expressions, if statements, math formulas, metadata, etc. in only one place.


## :iphone: Keep in Touch
If you like this article, don't forget to follow and stay in touch with my latest ones in the future by following me via:

- **Twitter:** https://twitter.com/RichardWynn01
- **Medium:** https://richard-wynn.medium.com
- **Github:** https://github.com/richard-wynn

## :newspaper: Others
Be interested? :smiley: You can visit the links below read my other posts in my programming principles series 
- [Single Responsibility Principle (SRP) in 100 Seconds](https://dev.to/richardwynn/single-responsibility-principle-srp-in-100-seconds-3b1d)
- [YAGNI Principle in 100 Seconds](https://dev.to/richardwynn/yagni-principle-in-100-seconds-1i6j)
- [KISS Principle in 100 Seconds](https://dev.to/richardwynn/kiss-design-principle-in-100-seconds-3ca6)
Top Technology Trends for 2021
Tags: technology, busines, software
Published: 2021-06-02 12:57:26

To grow businesses in 2021, it’s imperative to adopt technology that complements and enables the overarching business strategy. Leaders must continuously stay abreast of the emerging technology trends on the horizon. This will help business leaders to build integrated corporate strategies and take calculated risks that have a high probability of paying off in 2021.

In this blog, we’ll review the top tech trends of 2020 and how they will manifest in 2021. We’ll also take a look at some tech trends of 2021 that the world can look forward to. https://www.cuelogic.com/blog/top-technology-trends-for-2021
Racing promises without discarding the results
Tags: javascript
Published: 2021-06-02 12:49:13

Recently I came across this scenario where I had to make a bunch of API calls from my server, return the fastest response and do some post processing on all the responses.

To begin with I thought of using Promise.race() but as you might know, Promise.race() only returns the result of the first promise that fulfills or rejects. Clearly this won't work so how do we solve this? 🤔

This is how I went about solving it.

Assume we have an array of promises
```
const promises = [promise1, promise2,....];
```

Declare a wrapper class 
```
class RacePromiseWrapper {
  private callWithRaceWinner: (result: Result)=>void;
  private results: Result[];
  private hasFirstReturned = false;

  constructor(callWithRaceWinner) {
    this.callWithRaceWinner = callWithRaceWinner;
  }

  onResolve = (result: Result):void => {
    if (!this.hasFirstReturned) {
      this.hasFirstReturned = true;
      this.callWithRaceWinner(result);
    }
    this.results.push(result);
  };

  getResults(): Result[] {
    // any post processing you'd like to do
    return results;
  }
}
```
Here you can see the class maintains a field variable hasFirstReturned that is used to call a function with the result of the first promise that resolves. 

Declare an async function as follows
```
const getAllResultsWithRacing = async (promises, callWithRaceWinner) => {
   RacePromiseWrapper wrapper = new RacePromiseWrapper(callWithRaceWinner);
   promises.map((promise)=>promises.then(wrapper.onResolve));
   await Promise.all(promises);
   return wrapper.getResults();
}
```

Now you can use this function as such to race the promises without discarding the results of the promises

```
const results = await getAllResultsWithRacing(promises, (firstResult) => {
   //do something with firstResult
};
results.map((result)=> {
  //do something with all of the results
}
```

Think there's a better way to do this? Do let me know in the comments.
How to Reset React Native Cache - NPM, iOS, Android, and More
Tags: reactnative, mobiledevelopment, debugging
Published: 2021-06-02 12:47:12

---
title: How to Reset React Native Cache - NPM, iOS, Android, and More
published: true
description: Things get funky in react native. Here's how to start fresh and clear a React Native app cache.
tags: reactnative, mobiledevelopment, debugging
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4gc58cruj2rmd4fzy802.jpeg
canonical_url: https://www.reactnativeschool.com/how-to-reset-react-native-cache-npm-ios-android-and-more
---

> Originally published on [React Native Schoool](https://www.reactnativeschool.com/how-to-reset-react-native-cache-npm-ios-android-and-more).

Things can get... funky in React Native. Here's how to start fresh and reset a React Native app cache.

There are a lot of things in play in a React Native app including:

- NPM/Yarn
- Cocoapods
- Watchman
- Metro bundler
- React Native
- iOS Build
- Android Build

When things start to get weird/unexpected what do you do? Track down how to clear each one of those folders? Just clear one out?

Here's the easiest method...

# How to Use React Native Clean Project to Clear Your React Native App

[React Native Clean Project](https://github.com/pmadruga/react-native-clean-project) is a CLI plugin that will clear out all the things that could be causing you grief with your React Native app.

First, install the package as a development dependency:

```bash
yarn add react-native-clean-project --dev
```

or

```bash
npm install --save-dev react-native-clean-project
```

Then you'll want to set up some scripts in your `package.json`. You've got two options here - interactive or auto.

```jsx
// package.json

{
  "scripts": {
    "clean": "react-native clean-project",
    "clean:auto": "react-native clean-project-auto"
  }
}
```

You can then run those via your command line

```bash
yarn clean OR npm run clean
yarn clean:auto OR npm run clean:auto
```

## Why Interactive?

Interactive is going to let you choose what you clear from the cache. If you suspect it's one thing, or it's only affecting one platform, you can just focus there.

**Benefit:** Faster build times because you don't need to reinstall and rebuild all the caches.

**Drawback:** You have to monitor it and make decisions.

## Why Auto?

Auto mode is going to use the [CLI defaults](https://github.com/pmadruga/react-native-clean-project#content) to get the app back to a "freshly-cloned, never-started repo".

**Benefit:** Run it and forget it. No decisions or monitoring required.

**Drawback:** Slower initial rebuild time because you have to rebuild every cache.

## Why is this necessary? Why does this happen?

Like I said before, there are a lot of moving parts in a React Native app.

We're working with a multiple ecosystems (NPM, Cocoapods), multiple platforms (iOS, Android, Web), and multiple tools (React Native, Metro, Homebrew). 💩 happens and sometimes we need to clean it up.
Product Hunt - DronaHQ Low-Code Platforms Template Gallery. 
Published: 2021-06-02 12:43:26

Hey folks! Just launch on Product Hunt - DronaHQ Low-Code platforms Template Gallery. 

Check it out:  https://www.producthunt.com/posts/dronahq-templates - Awaiting your thoughts and feedback :))

If you are new to the community and don’t know where to start off, here you go with the complete directory of popular use cases. Just connect to your data source or use DronaHQ's in-built database Sheets and your app is ready.(stay tuned, more to come)
Day 14/30 : Samsung Watch Clone With HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-06-02 12:41:51

Welcome to Day 14 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Samsung Watch Clone html css](https://1.bp.blogspot.com/-QkExAVHnUYM/YKinvizJJLI/AAAAAAAAAFE/tR9iYDrFnMMJ6uVicVjphT0HWtRlJS2qQCLcBGAsYHQ/s600/14.gif)

**➜ Video Tutorial :**

{% youtube LwPBMR97edA %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/06/samsung-watch-clone-with-html-and-css.html


**➜ Instagram Post and Reel for Day 14 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

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

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
Wednesday Links - Edition 2021-06-02
Tags: java, spring, quic, jvm
Published: 2021-06-02 12:30:32

QUIC is now RFC 9000 (3 min read) 🚄
https://www.fastly.com/blog/quic-is-now-rfc-9000

Spring Microservices Security Best Practices (12 min read) 🔒
https://piotrminkowski.com/2021/05/26/spring-microservices-security-best-practices

Providing useful API error messages with Spring Boot (3 min read) ℹ️
https://www.mscharhag.com/spring/rest-api-error-messages

ArchUnit 0.19.0 released (1 min read) 🎉
https://github.com/TNG/ArchUnit/releases/tag/v0.19.0

Junit5 test execution listener that hides log events for "green" tests (1 min read) 🟢
https://github.com/zeldigas/Reasonable-Test-Logs

Java 17 will add extended file attribute support for macOS (30 sec read) 🥪
https://twitter.com/andrewthegaul/status/1398163924193669120

OpenJDK Discusses Post-SecurityManager Practices (4 min read) 👮
https://www.infoq.com/news/2021/06/openjdk-post-securitymanager

Converting Java Lambda functions to GraalVM native-image (3 min read) 🏆
https://www.graalvmonlambda.com/walkthrough/convert-to-graalvm/

Quest to the OS: Java Native Memory (10 min read) 🦿
https://blog.picnic.nl/quest-to-the-os-java-native-memory-5d3ef68ffc0a
Free Figma (Low Fidelity) Hand Drawn Wireframe Kit
Tags: ux
Published: 2021-06-02 12:28:55

Low fidelity wireframes are sketches of the page layout and the basic navigation. The goal of a low fidelity wireframe is to give you a general sense of the hierarchy of information, the placement of major components on the screen, and the general flow of interaction.

Below are a few good examples of wireframes with low fidelity and download this Figma Free UI Wireframe kit with hand drawn style.

Nowadays, more and more designers are moving away from Photoshop to utilize other software. When you want to make a prototype, you can simply edit the content right inside Figma and collaborate easily with your peers. Also, if you want to go further than the prototype, you could build a fully- featured app with web components and a backend.


![Figma Low Fidelity Wireframe Kit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3w77p4djlj05mdz1jpwe.png)

![Figma Low Fidelity Wireframe Kit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5800u1lah58turor4ej.png)

[Free Figma Hand Drawn Wireframing Kit](https://www.designinspiration.info/free-figma-low-fidelity-hand-drawn-wireframe-kit/)
Simple cross-browser testing thanks to Comparium
Published: 2021-06-02 12:12:18

Cross-browser testing ensures the greatest amount of accessibility and visibility amount, giving a positive experience across many popular browsers. When you're creating a website design, you need to test the result in Chrome, [Microsoft Edge](https://comparium.app/microsoft-edge-emulator.html), and other popular browsers, and to make sure that everything looks as it was intended, and without bugs and glitches. Let's talk about one of the best cross-browser testing tools Comparium.

Comparium is a testing service with a rich set of operating systems and browsers. You can capture screenshots of web-based resources by combining various operating systems and then compare the results in manual and automatic modes.
While applying for jobs, do you mention skills that you learned via side-projects but never used them at your work?
Tags: discuss, career, watercooler, programming
Published: 2021-06-02 12:11:55

Hi everyone! I'm a [software engineer](ashwinhariharan.tech) who recently transitioned into Developer Relations. I like programming and enjoy learning and tinkering with new technologies - and they aren't necessarily stuff that I use or require everyday at my workplace. Pretty sure that I'm not the only one! 😇

When I look at the stuff that I know, I can divide them into 2 broad categories:

## Grade A skills:
These are stuff that I require very less ramp-up time, because I've had enough exposure with them and use them *almost* everyday at work. For me, they happen to be the following:
- JavaScript / TypeScript
- Node.js / Express
- MongoDB
- React

If I'm ever asked questions like *"How many years of experience do you have in `x`"*, and it happens to fall under Grade A, I can answer it somewhat accurately (for instance, 2 years or 4 years or whatever).

## Grade B skills:
These are skills that I never had a chance to work on or use in production at work, but I acquired them while working on my side projects. Here are some of my own skills that fall under this category:
- Python
- Django
- PostgreSQL
- Docker
- Scikit-learn
- Keras
- Figma

For this category, answering questions like *"how many years of experience do you have"* becomes difficult, because I use them every now and then, not every single day. However, I can still *get things done* with them and would like the person going through my profile to know that. I may not be as comfortable in these as my *Grade A* skills, but I still know much more than just writing a simple *hello world* program (or its equivalent).

---
If you can relate with the above, I would love to know from you on:
- Along with Grade A, do you also mention Grade B skills in your resume, CV or in job applications?
- If the answer to the above is yes, how do you list them? Do you make a distinction between Grade A and Grade B, or do you just club them all together?
- If you're asked "How many years of experience do you have in `x` skill", and that skill happens to be a Grade B skill, how do you answer it?
- If in a job posting, you find that 60% of the required skill-set fall under your Grade B and 40% fall under Grade A, do you still apply for the role?