teleren/devto huggingface dataset:
Basic architecture post
Tags: architecture, tutorial, devtips
Published: 2020-02-08 01:52:05

---
title: Basic architecture post
published: true
description: A simple post about the distinction between customer problem created product and architecture solution.
tags: architecture, tutorial, devtips
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5vtifray5uayakr093n1.jpg
---

A simple note about the difference between a product created for a client's request and an architectural solution.

## This is a problem

![A problem](https://dev-to-uploads.s3.amazonaws.com/i/rijrw8iw1i86si59sqad.jpg)

A problem is determined by the functional and non-functional requirements of the customer.

## This is a product

![A product](https://dev-to-uploads.s3.amazonaws.com/i/7g39p7p3i8bu8h69sb98.jpg)

A product is defined by a set of functions or features that are used directly by the end-user.

## This is a solution

![A solution](https://dev-to-uploads.s3.amazonaws.com/i/l161au0lqf0eol9bq9bl.jpg)

A solution is a combination of one or more products to solve a specific problem.

## Conclusion

Architects should not think about products, but about solutions.

------


**Thank you for reading!**

Any questions? Leave your comment below to start fantastic discussions!

Check out [my blog](https://luminousmen.com/) or come to say hi 👋 on [Twitter](https://twitter.com/luminousmen) or subscribe to [my telegram channel](https://t.me/iamluminousmen).
Plan your best!
Post unlimited images for free and link them to your blog, indefinitely and virtually without limits
Tags: productivity, hosting, images, serverless
Published: 2020-02-08 01:49:37

Yup: for free, indefinitely and virtually with no limit. Upload and host images, link them to your article or online blog. Voilà!

I feel as if I've discovered a party millions of people are already having. It's good, but I didn't know anything about it. Now I just know that it's useful.

An awesome free image hosting service. Yup: [postimage.org](postimage.org).

> # About Postimage
>
> Postimage was founded in 2004 to provide message boards with an easy way to upload images for free. Postimage is a very simple, fast and reliable free image service. It's perfect for linking to auctions, message boards, blogs, and other websites. Postimage guarantees maximum uptime and performance so that your image will be here whenever you need it. There is no registration or login; all you have to do is submit your picture. With continuous upgrades and dedicated staff, Postimage is the #1 solution for Free Image Hosting.

Some highlights in no particular order:

- No limits on the size of the uploaded image (up to 12Mb and 10k x 10k pixels). And they say your pictures are not going to be taken down due to inactivity.

- Upload in batches of up to 1000 (one thousand!) images per batch (!!). 

- There is no limit to the number of images you can upload.

- Images won't expire if they're not seen.

- It works with and without creating an account. I recommend creating an account. Creating an account has its perks, as you have a 'gallery' of your posted images. You can also access the links to share the image.

As if this wasn't enough, after uploading an image you get copy/paste links to common actions:

[![Common actions after uploading an image to PostImages.org](https://i.postimg.cc/TwS6Nb4Z/link-postimage.png)](https://postimg.cc/YG1Zhvk3)
<figcaption>Common actions after uploading an image to PostImages.org</figcaption>

There are many other perks. You can read about it in their [FAQ](https://postimages.org/faq)

I wonder who is funding this. Does anyone know?

Have you heard about this service before? What can you tell us about it?
Do you have an inner monologue? Some don't.
Tags: discuss, career, todayilearned, watercooler
Published: 2020-02-08 01:42:03

Today I learned... That some people don't have an inner monologue. Where you essentially talk to yourself in your own head, hearing your own voice, without physically verbalizing. And that some cannot do that.

I am totally surprised. I thought everyone could do that. But apparently many don't.

What I want to know, is for those that don't, how do you work out programming problems? How do you plan to write things before writing them? As I write this, I am just thinking the words in my head as if I was speaking them out loud. But I am not verbalizing.

I have a conversation with myself in my head about what to write. Or what my code is doing, or anything else. 

It seems that those that don't, think in more abstract thoughts and have to verbalize them.

But I want to know more about this from others. Do you have one? Do you not? If not how do you deal with planning, reading, writing, or problem solving in your head. 

I would love to hear. Or from those that know more about the topic.

{% twitter 1225873168801443843 %}
Lessons taked while i'm riding my bike
Tags: bike, personal, life, career
Published: 2020-02-08 00:07:46

Usually i try to cover some topic related to programming that I'm studying,  but today i'll talk about a habit that i really enjoy: riding a bike, and the benefits that i figure out while i'm enjoying my daily walk.

For me riding a bike it's not just to sit and move my legs, it's a moment that i can reflect about the things that I planned for my day, and some things that i passed on the week, and is also about focus on the way that i'll cycling.

So, let's deep dive on my lessons.


## You're are on the control

When you ride a bike, you're in the control, you need to concentrate your mind in the activity, to don't fall, not lost your target, your direction. And in our life it's not different, if you aims to achieve something you need to put your focus and effort in that, and don't allow that the other things blocks you, or distance you from your goal.


## One step at time

It's important have a step at time, make baby steps for the things, start of the basics and it goes progressively increasing your rhythmic.


## Try to skip the obstacles

When you're riding, sometimes you have obstacles, but if you like your backside(haha), and you want to keep your bike whole, you need to avoid the obstacles, when is possible. In the life, it's not different, you need to develop the ability to ignore some things for make possible a progress in other areas.


## You have your time

We humans, have a  habit to compare ourselves with the others, and it's difficult to us understand that each person have your rhythmic, your conditions and your history, when i'm riding, i see people driving in different velocities, and i learned that it's ok, many people will pass in front of me.

## Make stops

For you don't make tired, you need to have moments of relaxing, when you is in a transit you is obligate to stop sometimes to allows that the cars pass, and this is very cool because you have a time to reenergise yourself.


And that's it, do you have any lesson that you learned with a bike too? Please, share with me! <3
Beautiful css placeholder loading animation using css 
Tags: css, tutorial, design, ux
Published: 2020-02-08 00:00:00

---
title: Beautiful css placeholder loading animation using css 
date: "2020-02-08"
description: "Beautiful css placeholder loading animation using css"
---

Do you want to create animated placeholder instead of creating full page loader? This post is for you!

We will create placeholder animation with css and it's really easy.

This placeholder animation works with most of elements.

First we need to create css keyframe animation.

```css
@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1000px 0;
  }
}
```

I will explain what is happening here later.

Now let's create loading class.

```css
.loading {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(
    90deg,
    #e4e4e4 0%,
    #f1f1f1 40%,
    #ededed 60%,
    #e4e4e4 100%
  );
  background-position: 0px 0px;
  background-repeat: repeat;
  animation: animatedBackground 5s linear infinite;
}
```

Now let's understand what is there in loading class.

`height` and `width` are size of our placeholder.
We have gradient background to our place holder which has four shades gray colors at 0%, 40%, 60%, 100%. Important part here is first and last color should be same so that animation doesn't look broken.
we have set default position at 0px 0px and it's repeating background.

Now we will use our keyframe animation which is changing background position from `0px 0px` to `1000px 0px`

So our linear gradient background moves horizontally and we can see beautiful animated placeholder.

We can add this animation to circle element which are using border-radius.

Even you can play around use different background-gradient to make different kind of animations.

For example we can create rainbow animation like this.

```css
.rainbow {
  width: 500px;
  height: 100px;
  margin: 15px;
  background-image: linear-gradient(
    90deg,
    red 0%,
    orange 7%,
    yellow 21%,
    green 35%,
    blue 49%,
    indigo 63%,
    violet 77%,
    red 91%
  );
  background-position: 0px 0px;
  background-repeat: repeat;
  animation: animatedBackground 5s linear infinite;
}
```

So when next time you are asked to create placeholder animation don't panic it's really simple!

Here are reference of codepen.

**Codepend:** 

{% codepen https://codepen.io/aachauhan2009/pen/KKpwxWx %}
Tests are executable documentation
Tags: tdd, ruby
Published: 2020-02-17 19:16:02

---
title: Tests are executable documentation
published: true
date: 2020-02-08 00:00:00 UTC
tags: tdd,ruby
canonical_url: https://viralpatel.blog/blog/tests-are-executable-documentation
---

> A well-written test case tells a clear story, communicating the intent of code. Learn how to write expressive tests and why duplication isn't always a bad thing in your test cases. - phrase from ThoughtBot blog about TDD.

**Well written Tests** are always a source of truth for a living documentation for that perticular project. Other form of documentation such as git wikis, code comments, code commits, pull request descriptions, google doc, Slack comments can easily get out of the sync with the production code.

**Well written Tests** guides your example documentantion which can be used by the developers using your library. Developers of your library should never have to read your source code, code comments to figure out how to use your library. If you see yourself reading source code or code comments of other libraries you are using, it is an indication to you that the library does not have a well written test suite or example documentation to go through.

You should be revealing your **intents** through your tests. Developers using your library should never have to worry about how it is **implemented**. They should be able to use your library by reading your tests and examples only. We need to seperate the intent from the implementation.
Active Inactive Functionality In Laravel 6
Published: 2020-02-21 10:13:20

---
title: Active Inactive Functionality In Laravel 6
published: true
date: 2020-02-08 00:00:00 UTC
tags: 
canonical_url: 
---

How to Active and Inactive Status in Laravel 6Hi GuysIn this tutorial I will explain how to create functionality to active and inactive status in laravel 6 I give you a full example of active and inactive status in laravel 6 we can implement change status using ajax with bootstrap togg
binstubs is always generated when I run bundle install
Tags: rails
Published: 2020-02-07 23:01:20

## What was happened?
I use Spring and When I run bundle install, bundler overwrite my spring binstubs without option `--binstub`.

Then, I saw the message many many times when I run `bin/rails xxx` or something. I paste the message at the bottom of this post.

## What was the problem?
I develop with Docker and I've found a setting in the file  `/user/local/bundle/config'`.

It's `BUNDLE_BIN: "bin"`. 🥳

([BUNDLE_BIN](https://bundler.io/v1.16/bundle_config.html#LIST-OF-AVAILABLE-KEYS): Install executables from gems in the bundle to the specified directory. Defaults to false.)


```sh
root@b50431918198:/myapp# env | grep bundle
BUNDLE_APP_CONFIG=/usr/local/bundle
GEM_HOME=/usr/local/bundle
BUNDLE_PATH=/usr/local/bundle
PATH=/usr/local/bundle/bin:/usr/local/bundle/gems/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
OLDPWD=/usr/local/bundle
root@b50431918198:/myapp# cat /usr/local/bundle/config
---
BUNDLE_BIN: "bin"
```

## What is the solution?
So, I remove the line from the file.

## Additionally
I also added a setting like this.
It runs bundle clean automatically after bundle install

```sh
BUNDLE_CLEAN: "clean"
```

## Who helps me?
I'm a Japanese, and we've got a ruby community on Slack.
The name is [ruby-jp](https://ruby-jp.slack.com/). 
I wish I had an invite URL for you 😭
There is an English channel and some foreigners who can write/read Japanese join in the slack workspace.

I thank him very much!!

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


## The message
```sh
Beginning in Rails 4, Rails ships with a `rails` binstub at ./bin/rails that
should be used instead of the Bundler-generated `rails` binstub.

If you are seeing this message, your binstub at ./bin/rails was generated by
Bundler instead of Rails.

You might need to regenerate your `rails` binstub locally and add it to source
control:

 rails app:update:bin           # Bear in mind this generates other binstubs
                                # too that you may or may not want (like yarn)

If you already have Rails binstubs in source control, you might be
inadvertently overwriting them during deployment by using bundle install
with the --binstubs option.

If your application was created prior to Rails 4, here's how to upgrade:

  bundle config --delete bin    # Turn off Bundler's stub generator
  rails app:update:bin          # Use the new Rails executables
  git add bin                   # Add bin/ to source control

You may need to remove bin/ from your .gitignore as well.

When you install a gem whose executable you want to use in your app,
generate it and add it to source control:

  bundle binstubs some-gem-name
  git add bin/new-executable
```
Redefining Elixir modules
Tags: elixir, iex
Published: 2020-02-08 16:18:16

---
title: Redefining Elixir modules
published: true
date: 2020-02-08 00:00:00 UTC
tags: elixir, iex
canonical_url: https://perix4.github.io/2020-02-08-redefining-elixir-modules/
---

I want to talk about one of the most AWESOME things that Elixir features. It is the ability to redefine module on the fly from `iex` shell.

For TLDR folks - watch the [asciicast](https://asciinema.org/a/299258).

So, what does that mean?

Imagine that we have a system running simple `GenServer` that prints pre-compiled `@time` variable every one second.
Unrelated btw `System.monotonic_time/0` is **the way** to track durations in Elixir, see [System](https://hexdocs.pm/elixir/System.html) for more info.

Something like this:

```elixir
defmodule ModuleRedefining.Worker do
  @moduledoc false

  use GenServer

  @time System.monotonic_time(:second)

  def start_link(args) do
    GenServer.start_link(__MODULE__, args, name: __MODULE__)
  end

  def init(_) do
    send_after()
    {:ok, %{}}
  end

  def handle_info(:print, state) do
    IO.inspect(@time)
    send_after()
    {:noreply, state}
  end

  defp send_after do
    Process.send_after(self(), :print, 1_000)
  end
end
```

So we launch our app, fire up our `GenServer` (in supervision or manually) and execute to our `iex` shell.
We should see the output something like:

```
-576460752
-576460752
-576460752
-576460752
-576460752
(...)
```

Then we copy (in clipboard) our module and paste it in the running `iex` shell.
Elixir will return warning that we are indeed redefining the module, and its new code representation (btw. if interested in Elixir's AST, check this [article](https://by-cha.se/working-with-the-elixir-ast.html) out).

```
warning: redefining module ModuleRedefining.Worker (current version loaded from _build/dev/lib/module_redefining/ebin/Elixir.ModuleRedefining.Worker.beam)
{:module, ModuleRedefining.Worker,
 <<70, 79, 82, 49, 0, 0, 15, 124, 66, 69, 65, 77, 65, 116, 85, 56, 0, 0, 1, 188, 0, 0, 0, 43, 30, 69, 108, 105, 120, 105, 114 46, 77, 111, 100, 117, 108, 101, 82, 101, 100, 101, 102, 105, 110, 105, 110, ...>>, {:send_after, 0}}
```

Then we would see **changed** output to something like:

```
-576460745
-576460745
-576460745
-576460745
(...)
```

So what just happened?

When we pasted the module code, elixir recompiled it and redefined the existing module. By compiling the code, `@time` compile-time constant has changed so our output changed as well.

With great power comes great responsibility, so use this cautiously. I find this very useful when debugging some weird problems on our staging environment, so I can quickly tryout new code variations and patches. For development environment, i just change the source and `recompile` in `iex` shell.
React App - View Locations of those using it on map
Tags: react, rreact, redux
Published: 2020-02-07 22:57:03

I am looking to build an app for a friend who has an idea (not the greatest I'll admit but neither was flappy bird so who knows).

It's not really a full idea, and I know how to do most of it. Pretty much the basic framework for basic apps with profiles and all that. However, they want a map that will show others using that app nearby (not a dating or sex app lol) so people can connect with a relatively small radius.

I can build the foundation, I can include a map that with permissions will show where you are. I'm curious what the best way to go about having others logged on at the same time to show where everyone is on that map?

Any input is appreciated.

Thank you.
Perfect webdesing Workflow?
Tags: design, css, html, webdev
Published: 2020-02-07 22:41:22

On This post I try to make my own workflow. To be honest I'm not best dev front or web designer. But in my work I need to create some design or update sites. 


I have been using this method for a few years. But if you have another method. I can't wait to discover yours.

https://github.com/afevre/workflow

Use this workflow like a boss:

At start you need to centralize you'r inspiration on MoodBoard folder
- put screen capture, web site, flyer, restaurant menu, picture, Anything can be use to create you'r own desing.
- If you find something can be interesting during the creation put on Asset folder (font, picture etc...)

Create, test and restart, on SketchBoard folder you put you'r interpretation and you'r idea of you'r desing.
- That can be sketch on paper, on procreate, sketch , figma, paint, word etc... we don't care. It's just for materialize you'r mind.

In parralle you need to find something to write in you'r desing on Text folder. A good desing need to give us a message.
- I think this step is realy important because it's pretty hard to create good mockup without something .

Now we can create the skeleton of you'r desing! The mockup!!! ta ta tammmm.
- I think the mockup can be realy important if you shearch to create web site. Because on the web the text is very important. Now we can stay less 5sec on the site. If we don't find what we whant we get a

Let's go to be creatif, CREATEEEE the Model
- you can use sketch, indesing,affinity desinger etc
- Becarfull at you'r breaking point. With mobil and tablet small pc screen and verry big pc screen. You'r breaking point whas verry important. 480px for smartphone, 767px tablets, 767-979px to landing tab
- you don't need to create 12 models but you need to be attentif at you'r breakingpoints.

Now my favorit exercice, Create style guide!!!
- Style is the most simple and the most powerfull tips
- Create you'r own styleguide or take my exemple and make atomic desing of you'r desing



I will try to update this post and my repo with your comments.




credit: 
Photo by "My Life Through A Lens" on Unsplash
Arrow Functions: What you should know.....
Tags: beginners, vscode, javascript
Published: 2020-02-07 22:14:31

ES5 to ES6 
One of the biggest differences we all know of, is how functions have changed. 
With ES5 the function keyword syntax was popular, then in 2015 with the intro of ES6, there was no longer the need for the keyword nor a return statement. 
Functions have never been more clear and concise.
think of arrow functions as how functions were before, both accept arguments and run a specific set of statements every-time their called.

So what is the difference then?

Syntax: arrow functions don't need the keywords anymore!
Value: Arrow functions always inherited from the enclosing scope. and don't have their own value.
Arguments: with ES5 theres an object that can be used to get all the arguments passed to the function. But with arrow functions, they are bound to arguments of enclosing scope.
This: The value of this inside an arrow function remains the same throughout and its value is connected to the closest non-arrow parent function only..

Here's an example below:


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

I hope this might have gave you a very simple example of how arrow functions work! Please make sure you refer to the docs for further reading! Happy coding
Helpful VScode Extensions
Tags: beginners, vscode
Published: 2020-02-07 21:44:21

### Auto Rename Tag ###
Auto Rename Tag is useful because it saves you time when editing a tag. Normally you would have to change both the opening and closing tags, but with this extension, you only have to change the starting tag and the ending will change too.

### Bracket Pair Colorizer ###
Bracket Pair Colorizer is a useful extension because it lets you see where your opening and closing brackets are. 

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

### ES7 React/Redux/GraphQL/React-Native snippets ###
If you are using react I would suggest using this extension because it helps you set up quickly. Taking time to write boilerplate code isn't worth your time, it might as well have a snippet to do it for you. 

### IntelliSense for CSS class names in HTML ###
I enjoy using this extension because it saves you time from writing out the whole css.

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

### Live Server ###
When I was learning web development for the first time, I installed this extension. They allowed me to view my web page in realtime. All I had to do was save my vscode file and the page would display the changes. This is also called hot reloading, similar to npm/yarn start.

### Path Intellisense ###
Ever struggle to find your file when you're trying to find the path somewhere? Not anymore! With path IntelliSense, it can help you navigate through ur nest of directories without worry. 

Showing you what everything one level down is.
```
"./"
```

Showing you what everything one level up is.
```
"../"
```

In conclusion, these are only a couple of useful time-saving vscode extensions. Comment below what are some of ur favorite vscode extensions.
Project Driven HTML and CSS Tutorial for Beginners.
Tags: beginners, html, css, webdev
Published: 2020-02-07 21:10:46

---
title: Project Driven HTML and CSS Tutorial for Beginners.
published: true
description: HTML and CSS tutorials for absolute beginners.
tags: beginners, html, css, webdev
---

This is **The Beginner Level 1** of the web development course by **youTooCanCode** which is meant to make Learning easy for beginners especially those from non-computer-science background.


We currently focus on making web development basic skills easy to acquire and we are starting with HTML and CSS tutorials. Check it out:


#1. Introduction and Learning Style Suggestion.


{% youtube 9KMZRpShsbo %}


#2. Making of Header Section.


{% youtube dzsRRYAZdHU %}


#3. Optimising Header Section to be Responsive.


{% youtube rQHWUtgjiZ8 %}


#4. Making the Main Content and Centring Element.


{% youtube UDM40U9LKRk %}


#5. Tutorial on the Resources Used


{% youtube IckBf8LhPQk %}


What do you think?