teleren/devto huggingface dataset:
Weekly Roundup 23
Tags: weekly, links
Published: 2020-03-05 03:37:04

---
title: Weekly Roundup 23
published: true
date: 2020-03-01 00:00:00 UTC
tags: weekly, links
canonical_url: https://www.ankursheel.com/blog/weekly-roundup-23
---

Every week I come across some great articles. Here are some of the posts I feel you will enjoy reading as much as I did.

Renting a car can be expensive. **Lars Lofgren** shares a [list of tricks to save car rental costs](https://www.iwillteachyoutoberich.com/blog/how-to-find-cheap-car-rental/).

Links and Buttons can be confusing. How do you decide when to use which? There is a [complete guide to links and buttons](https://css-tricks.com/a-complete-guide-to-links-and-buttons/) over at **CSS-Tricks**.

**Stephanie Eckles** gives examples to help you decide which out of the many [CSS units for relative spacing](https://dev.to/godspowercuche/guide-to-css-units-for-relative-spacing-4g9h-temp-slug-7507157) you should use.

Can you redesign a component without touching the HTML? **Ahmad Shadeed** takes an article header card component and [redesigns it into 5 different designs by just modifying the CSS](https://ishadeed.com/article/same-html-different-css/). He also ensures that all of them are accessible, responsive, performant and progressively enhanced.

If you are like me you just use _console.log()_ when using the console for debugging. But the console object has so many more options. **Travis Almand** shares the [various commands that can be used in the browsers console output](https://css-tricks.com/a-guide-to-console-commands/)

Hope you enjoy reading these articles as much as I did.
Restart Omnisharp process within Visual Studio Code
Tags: vscode, omnisharp, net, csharp
Published: 2020-03-01 14:34:41

---
title: Restart Omnisharp process within Visual Studio Code
published: true
date: 2020-03-01 00:00:00 UTC
tags: vscode, omnisharp, .net, csharp
canonical_url: 
---

Another quick one for today, Every now and again my intellisense gets confused in Visual Studio Code displaying errors and warnings that should not exist.

The fix for this is to restart the Omnisharp process.

So first off get the commmand pallette up:

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>

Then type:

`>omnisharp:restart omnisharp`

Everything should then go back to normal.

Success 🎉
When IntelliJ Loses Its Mind, Run This
Tags: intellij, bash, script, productivity
Published: 2023-01-24 16:08:00

---
title: When IntelliJ Loses Its Mind, Run This
published: true
date: 2020-03-01 00:00:00 UTC
tags: intellij, bash, script, productivity
canonical_url: https://www.rocky.dev/blog/when-intellij-loses-its-mind-run-this
---

Occasionally, IntelliJ goes haywire and won't run your project or tests. Next time this happens, close IntelliJ, run the script below in your project directory, and then open IntelliJ and reimport the project.

The script copies your `.idea` folder to `/tmp`, runs `git clean -xdf` to remove all files not checked into `git`, and then copies the important files back into a new `.idea` folder so you don't lose things like database configurations, dictionaries, and project settings. Your old `.idea` folder remains in `/tmp` until the next time you run the script or the OS deletes it in case you need something else.

```bash
#!/bin/bash

if ! git diff-index --quiet HEAD; then
  echo "Uncommited files detected, commit them and try again. Exiting."
  exit 1
fi

set -o errexit -o noclobber -o nounset

idea="./.idea"
tmpIdea="/tmp/.idea"
items=("$tmpIdea"/codeStyles "$tmpIdea"/dataSources "$tmpIdea"/dictionaries "$tmpIdea"/inspectionProfiles "$tmpIdea"/dataSources*.xml "$tmpIdea"/workspace.xml)

rm -rf $tmpIdea
mkdir $tmpIdea
mv $idea /tmp
git clean -xdf
mkdir $idea

for i in ${items[*]}; do
  if [-d "$i"]; then cp -r "$i" $idea; fi
  if [-f "$i"]; then cp "$i" $idea; fi
done
```
Semantic HTML
Tags: html
Published: 2020-03-20 22:15:04

---
title: Semantic HTML
published: true
date: 2020-03-01 00:00:00 UTC
tags: html
canonical_url: https://www.cgweb.co.uk/content/posts/2020-02-28-semantic-html/
---

This post is just a quick overview of some semantic HTML elements. I use most of these regularly, but there may be some that I am missing if so let me know in comments below.

## What are semantics and why are they important?

Semantics in HTML refers to the purpose/role of the code rather than its styling/presentation. As a general rule any styling should done in CSS although of course there are circumstances why this may not be possible.  

### Benefits of using semantic code:- 

- __SEO__ (Search Engine Optimisation) using semantic tags provides information about the document helping communication making it clear what the page meaning is and what the contents are. All of this information is communicated to search engines which improves SEO and your page ranking.
- It will help visually impaired users navigate your pages more easily
- It makes it easier to find sections of meaningful code instead of nested divs. 

With the HTML5 specification several new tags were added including header, footer, nav, section and several others. Let's start with probably the most commonly used elements - header, footer and nav. 

The __header__ and __footer__ elements as the name suggests would be used globally throughout a whole site but can also be used within sections e.g.
```html 
<section>
  <header>My section heading</header>
    <p>This is a great article about HTML.</p>
  <footer>Copyright 2020 by The Author<footer>
</section>
``` 

__Nav__ elements are the same generally they appear at top or left of a site, but can be used elsewhere e.g. to contains links in a footer element although this isn't strictly necessary. Pages can quite often contain multiple nav elements - one for main site navigation and another for intra-page navigation. If doing this it is a good idea to use `aria-labelledby` attribute for those using screen readers.

__Article__ element is used for a self-contained content not related to the page e.g. a news site would have multiple article elements. Note each of these elements should contain a heading tag as a child element.

__Aside__ element is used for content indirectly related to the main content of the page usually a sidebar or some sort of call out box.

__Section__ element is a standalone section within a page (usually containing a heading) which as MDN states:
 > doesn't have a more specific semantic element to represent it. It should not be used as a generic container for content this is what divs are used for. A general rule of thumb is if it appears in a document outline it should be in its own section.

__Figure__ (and *optional* figcaption) element usually contains an image, diagram, illustration etc that is referenced in the main document flow, but can be moved elsewhere without affecting the document flow. The figure could contain an image without figcaption or include the figcaption as either the first or last child.
TIL: button elements offer attributes to change form behavior
Tags: webdev, html
Published: 2020-03-01 19:47:54

---
title: TIL: button elements offer attributes to change form behavior
published: true
date: 2020-03-01 00:00:00 UTC
tags: webdev, html
canonical_url: https://www.stefanjudis.com/today-i-learned/button-elements-offer-attributes-to-change-form-behavior/
---

Today, I was reading [A Complete Guide to Links and Buttons](https://css-tricks.com/a-complete-guide-to-links-and-buttons/) written by [Chris Coyier](https://twitter.com/chriscoyier). `button` and `a` elements are often misused. To help out, Chris' article gives a good overview of their functionalities and best practices.

[One section about button attributes](https://css-tricks.com/a-complete-guide-to-links-and-buttons/#buttons-heading-1) caught my eye. In it, Chris lists the attributes one could use with a `button` element.

The following attributes were new to me:

- `formaction`
- `formenctype`
- `formmethod` 
- `formnovalidate` 

It turns out, that you can use these to overwrite the behavior of an associated form. 

Let's have a look at an example.

```html
<form action="/some-endpoint" method="post">
  <label>
    Your name
    <input name="full-name" type="text" required>
  </label>
  <button 
    formaction="/some-other-endpoint"
    formmethod="get"
    formnovalidate>Submit</button>
</form>
```

The initial configuration of this form leads to a `POST` request made to `/some-endpoint`. Also, the form should only be submitable when the `full-name` input holds a value. 

This configuration is overwritten by the submit button though. 😲

If you hit the submit button (or press `ENTER` inside of the input field), there is no input value validation anymore (`formnovalidate`). The made request is a `GET` request (`formmethod`) going to `/some-other-endpoint` (`formaction`).

You might not need these "overwrite-attributes" very often, but when you do, I bet they're life-savers!

You can read more about [these attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), or you can have a look at [the above form example on CodePen](https://codepen.io/stefanjudis/pen/GRJEMLX).
useState() React Hooks(P1)
Tags: react, hooks, javascript, tutorial
Published: 2020-02-29 22:05:50


<strong>Hooks are special functions that let you “hook into” React features. They don’t work inside classes, just in functional components.</strong>
<strong>useState()</strong> lets you add state to a functional component.

<ul>
<li><strong>Always</strong> use hooks at the beginning of a React function.</li>
<li>Don't call hooks inside loops, conditions or nested functions.</li>
<li>You can use multiple useStates and variables.</li>
<li>The only argument we pass to <strong>useState()</strong> is the initial value.</li>
<li><strong>useState()</strong> is returning the variable and the function that updates it.</li>
</ul>

Now, a basic counter example:

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

<h3>Explanation:</h3>

We have to import the <strong>useState()</strong> hook. 

As you can see, we have a variable called <strong>count</strong>, and a function that updates that variable, <strong>setCount()</strong>. The <strong>initial value</strong> of the count is <strong>0</strong>.

We are displaying the count in a <strong>h1</strong> tag.

The first button has a click event that fires the <strong>setCount()</strong> function, which will <strong>add</strong> 1 on every click.

The second button is using the same function on click, but this time, it's going to <strong>subtract</strong> 1.

<h3>And this is the end result:</h3>

![Alt text of image](https://media.giphy.com/media/jUEc8BWmIRpANqXy9v/giphy.gif)

I hope I helped at least one person :)
Debugging and implicit returns in JS
Tags: javascript, es6, debugging, react
Published: 2020-02-29 22:27:29

---
title: Debugging and implicit returns in JS
published: true
description: A tiny trick to save you some time
tags: Javascript, ES6, debugging, React, JS
---

I remember the annoyance of having to debug functions with implicit returns. Because implicit returns must be used in conjunction with an expression, we can't just add another line to our arrow-function.

So imagine we made a mistake in the props we passed to our imaginary `BlogPost`-component. 

We misspelled `content`:

```js
// ...snip
return (
  <BlogPost title="My first post" subtitle="hurray!" conten="lorem ipsum and stuff" />
)
// ...snip
```

And we render this component:

```js
const BlogPost = props => (
  <main>
    <h2>{props.title}</h2>
    <h3>{props.subtitle}</h3>
    <p>{props.content}</p>
  </main>
);
```

Now, why does the content of my blog-post not show up 🤨? 

One option is to rewrite your component using an explicit return:

```js
const BlogPost = props => {
  console.log(props)
  return ( // Ugh, I had to wrap the component it in curly's just to log the props
    <main>
      <h2>{props.title}</h2>
      <h3>{props.subtitle}</h3>
      <p>{props.content}</p>
    </main>
  );
}
```

Having to do this once or twice is not so bad. But when you have to constantly add curlies and returns (and remove them after), it starts to get tedious. One little trick to make this easier is to do this instead:

```js
const BlogPost = props => console.log(props) || (
  <div>
    <h2>{props.title}</h2>
    <h3>{props.subtitle}</h3>
    <p>{props.content}</p>
  </div>
);
```

The result of `console.log` (or any of the console-methods really) is undefined. And as undefined is a falsey value, the right-side of the `OR`-operator will be evaluated and the component will be rendered.  

Note that you could also use the new `nullish coalescing operator` for this:

```js
const BlogPost = props => console.log(props) ?? (
  <div>
    <h2>{props.title}</h2>
    <h3>{props.subtitle}</h3>
    <p>{props.content}</p>
  </div>
)
```

And so we can use short-circuiting to make debugging functions with implicit returns a bit less time-consuming.
Articles that made my Week #004
Tags: career, watercooler, todayilearned
Published: 2020-02-29 22:11:14

Hey! Getting into the week I hadn't published my weekly blog post on time and felt really sad about it. 

{% twitter 1232247644258521089 %}

I eventually published it a few days later and was so happy to get the 4 consecutive weeks of writing badge so on wards we goo!

{% twitter 1232684784549273600 %}

Per the newly minted tradition, this is last weeks article.

{% link https://dev.to/malgamves/articles-that-made-my-week-003-mbf %}

I know at the beginning of the these posts, I talked about matching intention with action and looking at what I've been consuming, there's been a huge shift. This week I guess was the worst - having noticed these I changed it soon enough and tried to consume content that actually matches my intentions. 

Decided to get up to speed on this, I've built a couple of microservices in the past and I was curious to see how things have changed. I love how [James Hickey](https://dev.to/jamesmh) added a chart of major technologies and how far they are in terms of main stream adoption. Then he gets pretty deep into microservices. It a long read but it's pretty good.

{% link https://dev.to/jamesmh/should-i-use-a-microservices-architecture-4751 %}

It's always good to see people share how they've found developer relations. I loved reading about [Josh Alphonse](https://dev.to/joshalphonse) and his journey. It made me think about my own journey and since I've been thinking about what has changed for me.
{% link https://dev.to/joshalphonse/a-few-lessons-i-ve-learned-as-a-developer-advocate-so-far-4b4n %}

[ellie-html](https://dev.to/elliehtml) brought it with this one, I've been playing around with the possibility of putting up a nice site for my music and mixes and I think it was really nice to see what's possible you know. Sometimes we tend to limit ourselves.
{% link https://dev.to/elliehtml/creating-a-spooky-website-4ojk %}

In thinking about what's next for me, I've been thinking about whether remote work is something I want to do again. So I guess reading this article by [Kara Luton](https://dev.to/karaluton) made a lot of my feelings around remote work feel valid. I've been craving that in-person interaction and it shows aha.
{% link https://dev.to/karaluton/reflecting-on-one-year-of-remote-work-1nkp %}


I'll be honest, when I looked at this, I thought [Max Ong Zong Bao](https://dev.to/steelwolf180) was going to teach me how to not forget peoples names. Reading into it more, it's really what it says it is - how to remember as a developer. The sprinkle effect of developer blogs though, it's something I forgot about. At the moment I'm learning so much and it was a good reminder to document it because surely enough,  future me will forget and I will have to reference something. 

{% link https://dev.to/steelwolf180/how-do-you-remember-as-a-developer-1e21 %}


It wasn't the easiest week, I haven't been well but that little boost at the beginning made me feel so much better. How was your week?
Laravel API change unauthenticated message
Published: 2020-05-07 23:52:20

---
title: Laravel API change unauthenticated message
published: true
date: 2020-02-29 21:24:27 UTC
tags: 
canonical_url: https://dcblog.dev/laravel-api-change-unauthenticated-message
--- 

When making API calls to Laravel when a user who is not authenticated makes a call a 401 status code is returned and the following response:

```php
{"message":"Unauthenticated."}
```

Which I find a little strange it's an error so message should say error in my opinion.

This can easily be changed by adding a customer unauthenticated method to **app/Exceptions/Handler.php** :

```php
protected function unauthenticated($request, AuthenticationException $exception) 
{
    if ($request->expectsJson()) {
        return response()->json(['error' => 'Unauthenticated.'], 401);
    }

    return redirect()->guest('login');
}
```

Now the response will say error instead of message.
How do I learn programming & subsequently software development (Android & iOS in particular)?
Tags: suryakulshreshtha, android, ios, codenewbie
Published: 2020-02-29 21:20:33





Start with reading the right articles. Do not fall into click bait and fancy headlines of videos/tutorials/articles.
Another important thing that mostly goes ignored is that programming be it android or iOS/Swift requires you to learn how to implement logic, provide structure to support your need (Design and Create) which everyone talks of & also it somehow passively also wants you to learn the tools/IDE/software seamlessly so you can focus on doing and coding rather than struggling to set environment variables, checking installed software and directories.
Understand we always prepare ourselves to learn the hard part by watching other successful people or reading or sometimes intuitively the boost to write code again surfaces, what initially stops you and gets you tired is the switch on and offs & set create or prepare the setup to go and actually sit and code.
Two hours into your selected course of choice or maybe just following article step by step you realise this is just where i was able to press button and run the tools actual coding beings now. That is at times tiring for beginner & expert alike.
Everyone wants to type there first Hello World program (basically choose your weapon of choice and learn the respective syntax print that on some fancy colored text editor or on actual cockpit styled IDE) & you have it some corner of screen would say Hello World.
That's your first actual app in progress but reaching this level would require you to do bunch of things first & that is tiring.
So divide your learning into a threshold & liftoff sequences. You wont find this perception in any book it is coming from personal but valid failure and initial struggle. Every course will skip or be quick with this initial part of threshold, find a course or program or educator who helps you get on board easy and well first.
Because everybody can teach you what book says beyond that all programming concepts are same in beginning once you know that you can then specialize into android specific aspects.
All that i wrote above applies specifically to but also not limited to android programming in java / kotlin / flutter
Have fun & begin correctly (I could have said start right but then its not correct way that's the tiny difference. You wouldn't know its more aesthetic until you get the better more fitted way)
React Typescript Library Template
Tags: react, typescript
Published: 2020-02-29 21:18:40

---
title: React Typescript Library Template
published: true
description: A ready-to-use template to create a React library/component.
tags: react, typescript
cover_image: https://github.com/alioguzhan/react-typescript-library/raw/master/tools/tsreact.png
---

Hey dev.to, 

I just published a template repository at Github to start a React library with Typescript. Any kind of feedback and PR are welcome! Thanks.


https://github.com/alioguzhan/react-typescript-library
Say Hi To J0d!e, Our Newest Team Member!
Tags: showdev
Published: 2020-02-29 21:17:33

---
title: Say Hi To J0d!e, Our Newest Team Member!
published: true
description:Introducing the newest member of Vets Who Code, Jodie!
tags: showdev
---

![J0d!e](https://dev-to-uploads.s3.amazonaws.com/i/1jjq0vjfowkn1jmyqn7b.png)


Take a minute and say I to J0d!e, our newest team member at Vets Who Code!

We have always wanted a Clippy-but-for military-and-won't-get-us-sued type of character for Vets Who Code that we could do micro-projects around, teach our veterans and more importantly, have fun. Be sure to follow him on [Twitter](https://twitter.com/Its_J0die) and ask him frequently how he is doing. I promise he won't make you run in formation.
Laravel returns 302 for unauthenticated calls
Published: 2020-05-07 23:53:31

---
title: Laravel returns 302 for unauthenticated calls
published: true
date: 2020-02-29 21:15:09 UTC
tags: 
canonical_url: https://dcblog.dev/laravel-returns-302-for-unauthenticated-calls
--- 

I've started to secure API calls with Laravel Airlock, when calling a route that's been secured with the middleware  **auth:airlock** unauthenticated calls we're returning a status code of 302 means the route has been found. When 401 unauthenticated should have been returned.

Turns out it was not a Laravel Airlock issue but how Laravel handles ajax calls in order for an API call to be treated as an API call it requires a header called  **Accept** and a value of  **application/json.** With this heading in place, 401 will be returned for unauthenticated calls.
Choosing the right color palettes for your websites
Published: 2020-02-29 20:34:06


Selecting the right colors is one of the most important tasks of any design. It is something that the viewers remember the most about a website’s look.Most web designer give this task too little time and attention by choosing few color palettes that seem pleasant to the eye just stick  to them but if you want your design truly outstanding and you’d better off using a color palette generator . These Insanely useful tools help you explore creative combinations and choose the perfect match for your websites. Here’s some of my color palette generators you can use your next project.


Adobe’s Color CC :

Adobe’s Color Wheel is a must for designers who work in Adobe Creative Cloud programs but can serve for experimentation to any designer. This palette generator enables you to save your color combinations and then quickly upload them to your CC apps.

Brand Colors :

This website contains the biggest collection of official brand colors. You can use the website color palettes of the world’s biggest and most famous businesses to find an inspiration for your project.

Coolors.co :Coolers is a great color scheme generator tool. The color palette is displayed on the whole screen and its quite easy and interesting to use.You can also export your palette like PNG, PDF, SVG, CSS or copy the link.

 
Cohesive Colors : 

If you already planned a certain color palette, but just can’t find the right shades and hue combination, then you can rely on Cohesive Colors. You can use it to tweak your palette by applying a coat of tint over it in any color you choose and adjust it until you get what you need.


Color hunt :
 Color hunt showcases different palette with  elegant and simple telling. The community creations uploads new color scheme daily which you can save your collection just by one click. Schemes that are saved most often by the visitor can be found in popular palette section.

There are many resources with various approaches to color combinations to choose from. Hopefully this list will make it easy for you to pick and choose those that will be best suit your needs for any projects that come your way.

#colorpalette,Webdesign
Submit a Comment