teleren/devto huggingface dataset:
Does JAMstack mean having to pre-render all the things?
Tags: jamstack, jamuary
Published: 2020-01-13 22:11:29

As the JAMstack ecosystem matures, the debate over what counts as “truly JAMstack”™ continues. Given the elusive nature of the term and its [recent-most evolution](https://github.com/jamstack/jamstack.org/commit/41c0b767694c1f8c7e3fabcb1e0d770b154c00d7), its unsurprising that there remains some confusion over this. The JAMstack stands for JavaScript, APIs and Markup, and emphasizes the intermingling of these pieces to build websites that are scalable, performant and overall efficient. A key component of what makes a site JAMstack is its pre-rendering capabilities or how much of the site is generated ahead of time. The focus here of course is not on the implementation per say, but on the results instead; So a successful JAMstack site is determined by how fast and delightful the site is to work with rather than whether it uses a specific technology. To attain the end goal of fast, secure sites, the JAMstack approach encourages pre-rendering assets at build time. Frontloading the build step means serving your UI statically, which has significant benefits when it comes to performance and server costs down the line. 

The JAMstack however doesn’t preclude serving assets dynamically. A SPA for instance still counts as JAMstack as long as it pre-renders parts of the UI (like data fetches or an initial app shell) to dynamically load content into. The idea of the JAMstack in a sense follows a similar ethos to the progressive enhancement movement. Start from the premise of pre-rendering content statically and then progressively add runtime elements like API calls and JavaScript. This way sites can effectively serve content well while providing delightful and meaningful experiences to users.
Dynamic view with STI in Rails
Tags: rails
Published: 2020-01-20 22:16:34

## 🤔 Situation
I have a STI model named `Media` which has two chirdren models which are `Photo` and `Video`. And I've wanted to not change the view logic by each class.

Example
```erb
<% @album.media.each do |medium| %>
  <div>
    <%= file_content(medium) %>
  </div>
<% end %>
```

## 😅 But I didn't want to write like this.
If I ask object about class and then switch the logic, it's not OOP anymore. I have to write again when I add a new class like 'text', 'sound'.

```ruby
module MediaHelper
  def file_content(medium)
    return nil unless medium.file.attached?
    if medium.class == Photo
      return photo_content(medium)
    else
      return video_content(medium)
    end
  end
end
```

## 👍 How have I solved it?
I wrote the helper like this.

```ruby
module MediaHelper
  def file_content(medium)
    return nil unless medium.file.attached?
    send("#{medium.class.name.underscore}_content", medium)
  end
end
```

```ruby
module PhotosHelper
  def photo_content(medium)
    # do something
  end
end

module VideosHelper
  def video_content(medium)
    # do something
  end
end
```

## 🦄 But, I believe there is a better way.
I don't know it works. But I hope I will change my code like this.

### 1. remove the parent helper

```ruby
# module MediaHelper
#   def file_content(medium)
#     return nil unless medium.file.attached?
#     send("#{medium.class.name.underscore}_content", medium)
#   end
# end
```

### 2. align the children's helper names.

```ruby
module PhotosHelper
  def file_content(medium)
    # do something
  end
end

module VideosHelper
  def file_content(medium)
    # do something
  end
end
```
lib3to6 - python compatability library
Tags: python
Published: 2020-01-14 00:50:39

In light of the recent blog article ["Mercurial's Journey to and Reflections on Python 3" by Gregory Szorc](https://gregoryszorc.com/blog/2020/01/13/mercurial%27s-journey-to-and-reflections-on-python-3/) I thought I'd try to pimp my work in this area again.

In short, if you have a project that needs to be compatible with Python 2.7 or even just Python 3.4, then you might want to look at [lib3to6](https://pypi.org/project/lib3to6/). The idea is quite similar to Bable for JavaScript: It transforms valid Python 3.7 code, into valid Python 2.7 code such that the semantics match as closely as possible.

I still work with a Python 2.7 codebase, but most new work is now done in modules that are written for Python 3.7 and this library translates the code when the package is created. I've used it over the past year on half a dozen projects and I feel it is quite stable.

An example of how it works.

Say you have a `my_module` which is written for Python 3.7. Features used here that are not supported by Python 2.7 are

 - type annotations
 - f-strings
 - print function
 - implicit utf-8 file encoding


```python
# my_module/__init__.py
import sys


def hello(who: str) -> None:
    print(f"Hello {who} from {sys.version.split()[0]}!")


print(__file__)
hello("世界")
```

The above code is translated to the following

```python
# -*- coding: utf-8 -*-
from __future__ import absolute_import
from __future__ import division
from __future__ import print_function
from __future__ import unicode_literals

import sys


def hello(who):
    print('Hello {0} from {1}!'.format(who, sys.version.split()[0]))


print(__file__)
hello('世界')
```

Some changes that are made:

 - Explicit utf-8 file encoding
 - Future import boilerplate. This changes the semantics to match those of Python 3, i.e.:
  - print is a function
  - string literals are unicode literals
 - f-string converted to an equivalent `string.format` invocation.

I've had some people puh puh the project, because the gut reaction appears to be that Python 2.7 should die already, but this project is also useful if you are a library author who, for example, wants to use f-strings and yet still have your library be compatible with Python 3.5. If you don't care about Python 2.7 then just don't test for it.

There is much more that could be said, but I think this is enough for now and I hope you find the library useful.
7 Best Use Case of JavaScript Array Method map(), filter() and reduce()
Tags: javascript, tutorials
Published: 2020-02-05 07:41:03

---
title: 7 Best Use Case of JavaScript Array Method map(), filter() and reduce()
published: true
date: 2019-10-17 17:31:31 UTC
tags: Javascript,javascript,tutorials
canonical_url: https://codesquery.com/javascript-array-method-map-filter-and-reduce/
---

If you are starting in the web development, maybe you haven’t heard about the functional programming. Functional programming has been making prominent space in the field of web development. It will help you to write more precise and clean code which is easy to understand, refactor and test. There is some javascript array method available [...]

The post [7 Best Use Case of JavaScript Array Method map(), filter() and reduce()](https://codesquery.com/javascript-array-method-map-filter-and-reduce/) appeared first on [CodesQuery](https://codesquery.com).
Javascript Date Object Explained In Detail
Tags: javascript, tutorials
Published: 2020-02-05 07:43:01

---
title: Javascript Date Object Explained In Detail
published: true
date: 2019-11-05 18:11:52 UTC
tags: Javascript,javascript,tutorials
canonical_url: https://codesquery.com/javascript-date-object/
---

For any web developer, working with the date in the application is always a tricky part. While working with the date, we have to make sure things works properly for every timezone. In Javascript, you might have to work with the calendar events, booking events or any other type of events which needs the relevant [...]

The post [Javascript Date Object Explained In Detail](https://codesquery.com/javascript-date-object/) appeared first on [CodesQuery](https://codesquery.com).
Github Login Implementation In Node.js Using Passport.js
Tags: node, sociallogin, tutorials
Published: 2020-02-05 07:42:48

---
title: Github Login Implementation In Node.js Using Passport.js
published: true
date: 2019-11-15 09:31:43 UTC
tags: Node.js,node.js,social-login,tutorials
canonical_url: https://codesquery.com/github-login-implementation-in-node-js-using-passport-js/
---

In this article, we are going to learn how to implement the Github Login in Node.js Application. We are using the Node.js Express Framework and Passport.js library for this tutorial. Create a Github App For Your Application Before proceeding further into coding got the GitHub login in node.js, first, we have to create an app [...]

The post [Github Login Implementation In Node.js Using Passport.js](https://codesquery.com/github-login-implementation-in-node-js-using-passport-js/) appeared first on [CodesQuery](https://codesquery.com).
The Future of Writing CSS - OOCSS 
Published: 2020-01-14 09:27:08

Object oriented CSS was proposed by web developer Nicole Sullivan in 2008. Her goal was to make dynamic CSS more manageable by applying the principles of object oriented design popularized by programming languages such as Java and Ruby. Using the OOCSS framework results in CSS that is reusable, scalable and easier to manage.

OOCSS draws upon many concepts in object oriented programming including the single responsibility principle and separation of concerns. The goal is to produce components that are flexible, modular and interchangeable.

<h2>CSS Code</h2>
<code>
.button-white {
    width: 150px;
    height: 50px;
    background: #FFF;
    border-radius: 5px;
}
</code>
<code>
.button-black {
    width: 150px;
    height: 50px;
    background: #000;
    border-radius: 5px;
}
</code>
<h2>OOCSS Code</h2>

<code>
.button-white {
    background: #FFF;

}
</code>
<code>
.button-black {
    background: #000;
}
</code>
<code>
.button{
    width: 150px;
    height: 50px;
    border-radius: 5px;
}
</code>

class="button button-white" for White button 
class="button button-black " for Black button 

The Benefits of Object Oriented CSS

1. Speed
2. Efficiency
3. Scalability
Multi Step Form Submit in Laravel with Validation
Tags: laravel, multistep, formsubmit
Published: 2020-01-14 09:37:20

In this tutorial we will go over Example of Multi Page / Step Form in Laravel with Validation. This tutorial does not use any javascript component to create multi step form.

Instead we will create multiple form pages and will use Laravel session to save the intermediate data.

https://www.codechief.org/article/multi-step-form-submit-in-laravel-with-validation
Object Destructuring Javascript ES6
Tags: javascript, object, destructuring, es6
Published: 2020-01-14 10:20:29

// Example 1
// bind variables to different "car1" object properties

```javascript
const car1 = {
  name: "fiat",
  model: 500,
  weight: 850,
  color: "red"
};


const { name, color, weight } = car1;

```

// Example 2
// destruct an object property from a variable
// Rename a variable
// set a value to a variable

```javascript
const car2 = {
  brand: "fiat",
  model: 500,
  weight: 850,
  colors: {
    red: true,
    green: false
  }
};
```

// Use ":" sign" to change the name of the variable
// Use the "=" sign to assign a value to a variable

```javascript
const {
  colors: { red: redColor, white: whiteColor = false, brown = "true" }
} = car2;
```
Must have command line tools!
Tags: productivity, beginners, linux, macos
Published: 2020-01-14 11:36:19

It's been a while since my last post, and I thought it would be a nice new year start sharing my favourite command-line tools.

Here we go:

* [bat](https://github.com/sharkdp/bat), A cat(1) clone with syntax highlighting and Git integration. 
![bat screenshot](https://camo.githubusercontent.com/9d3d89364f2cc83ace8f29646a6236bc15ea1da0/68747470733a2f2f696d6775722e636f6d2f724773646e44652e706e67)

* [ag](https://github.com/ggreer/the_silver_searcher), The silver searcher. A code-searching tool similar to ack, but faster. http://geoff.greer.fm/ag/

* [ripgrep](https://github.com/BurntSushi/ripgrep), another alternative to ack and ag. (Thanks to Michael for reminding me of this great tool).

* [fd](https://github.com/sharkdp/fd), A simple, fast and user-friendly alternative to 'find'.

* [fzf](https://github.com/junegunn/fzf), A command-line fuzzy finder.
![fzf screenshot](https://raw.githubusercontent.com/junegunn/i/master/fzf-preview.png)

* [forgit](https://github.com/wfxr/forgit), Utility tool powered by fzf for using git interactively. Thanks to [Mr F.](https://dev.to/0xdonut/comment/k9gj).

* [ranger](https://github.com/ranger/ranger), A VIM-inspired file manager for the console https://ranger.github.io

* [tig](https://github.com/jonas/tig), Text-mode interface for git https://jonas.github.io/tig/
![tig screenshot](https://thepracticaldev.s3.amazonaws.com/i/5mpsyegjd6yr9m3vz1m7.png)

* [hub](https://github.com/github/hub), A command-line tool that makes git easier to use with GitHub. https://hub.github.com/
```shell
$ hub clone rtomayko/tilt

# expands to:
#=> git clone git://github.com/rtomayko/tilt.git
```

* [httpie](https://github.com/jakubroztocil/httpie), Modern command line HTTP client – user-friendly curl alternative with intuitive UI, JSON support, syntax highlighting, wget-like downloads, extensions, etc. https://httpie.org/
![httpie gif](https://httpie.org/static/img/httpie.gif?v=70bc5a5b7fdf2b4982ed18b364c32b11)

* [jq](https://stedolan.github.io/jq/), A lightweight and flexible command-line JSON processor.

* [exa](https://github.com/ogham/exa), A modern version of ‘ls’. https://the.exa.website/ (Thanks to [Mr F.](https://dev.to/0xdonut/comment/k8oe))


[Michael Kohl](https://dev.to/citizen428/comment/k8pi) Suggestions:

* [lab](https://github.com/lighttiger2505/lab), like hub but for Gitlab (also wraps hub, so can manage both from one tool).

* [broot](https://github.com/Canop/broot) Instead of `tree`.

* [rq](https://github.com/dflemstr/rq) record query, like jq but supporting more data formats.
Application-Level Rate Limiting in Facebook APIs

Tags: facebook, facebookapi
Published: 2020-01-14 14:17:24

Facebook Graph APIs have rate limits. It is the number of Graph API calls that you can make to Facebook in a specific period of time. All API calls from the FB app will fail if you exceed the rate limit. Application-level rate limits apply to calls made using any access token other than a Page access token and ads APIs calls.

Two types -

###Account level  

Number of api calls from a user = undocumented-number-which-only-fb-knows

These calls could be from a user using many different apps.

If a specific user account is making too many calls, the user could get rate limited.

###Application level

Number of API calls an app can make = 200 * number of users.

If you have only a test user, your app can make 200 requests. Rate limiting happens real time on sliding window for past hours and the rate limit get added up real time. This can be observed in the Application Rate Limit in the dashboard.
Charity Website Design 
Tags: websitedesign
Published: 2020-01-25 07:01:08

NGO has always been a helping hand to the needy. However, they have not come under huge limelight because of the absence of proper promotion. One of the reasons for this is because they did not have a good website. At a time when people get information Only from the internet, not having a website is a very poor idea. so, getting a website designed is crucial.

Charity Organizations mostly choose DataIT Solutions because we create a charity website design that both impresses and boosts client inquiries on the website, all while working within various budgets. In fact, we offer special pricing for nonprofits and charities. And we take care of all of the details - customer service is what we do best - so that you can focus on your organization - what you do best.

DataIT Solutions have a proven track record of supplying high-quality charity website design services to a broad spectrum of charities, non-profit organizations, and small businesses.

We have a full range of web development services that include: User Experience Design, Search Engine Optimization, Content Management Systems and Responsive, Bespoke Design.

If any Confusion?
Contact us:-http://bit.ly/309mZgR
Best approach for filter data, fetch again, array.filter?
Tags: help
Published: 2020-01-25 15:13:09

---
title: Best approach for filter data, fetch again, array.filter?
published: true
tags: help
---

Hi everyone, I'm thinking about it.

We have a API like https://rickandmortyapi.com/ that return a array's character like 

```javascript
{
  "info": {
    "count": 394,
    "pages": 20,
    "next": "https://rickandmortyapi.com/api/character/?page=20",
    "prev": "https://rickandmortyapi.com/api/character/?page=18"
  },
  "results": [
    {
      "id": 361,
      "name": "Toxic Rick",
      "status": "Dead",
      "species": "Humanoid",
      "type": "Rick's Toxic Side",
      "gender": "Male",
      "origin": {
        "name": "Alien Spa",
        "url": "https://rickandmortyapi.com/api/location/64"
      },
      "location": {
        "name": "Earth",
        "url": "https://rickandmortyapi.com/api/location/20"
      },
      "image": "https://rickandmortyapi.com/api/character/avatar/361.jpeg",
      "episode": [
        "https://rickandmortyapi.com/api/episode/27"
      ],
      "url": "https://rickandmortyapi.com/api/character/361",
      "created": "2018-01-10T18:20:41.703Z"
    },
    // ...
  ]
}
```

We have a input to filter by name and a select to filter by status. 
We want add to our project pagination and use the info.next and info.prev, we are using React what is your best aproach to do it?
- Call to the API each time that the input name change?
We have the endpoint https://rickandmortyapi.com/api/character/?name=rick
- Filter our array of characters with array.filter?
```javascript
characters.filter(({name}) => name.includes(filterInputValue))
```
- Have a state for allData and another one for filterData?

Right now, I call each time to the API but I think this is many calls...

I'm a junior web developer and I want learn about good practise to improve my code, help me!

P.D: Excuse me for my English I improve it soon, Be free to correct me!😅😅
Python configs for Humans. Part #2
Tags: python, configs
Published: 2020-01-25 18:21:37

Hello, dev.to!

Today, I want to tell you about my library for configs ([betterconf](https://github.com/prostomarkeloff/betterconf)). I have already article about it but I have implemented some features which weren't.

Okay, let's start!

At first, now you can get values not only from env vars. By default it's so but you can edit.

```python
from betterconf import field, Config
from betterconf.config import AbstractProvider

class NameProvider(AbstractProvider):
    def get(self, name: str):
        return name

class Cfg(Config):
    my_var = field("my_var", provider=NameProvider())

cfg = Cfg()
print(cfg.my_var)
# my_var
```

And... you can do casting of your objects by simple and clear syntax:

```python
from betterconf import field, Config
# out of the box we have `to_bool` and `to_int`
from betterconf.caster import to_bool, to_int, AbstractCaster


class DashToDotCaster(AbstractCaster):
    def cast(self, val: str):
        return val.replace("-", ".")

to_dot = DashToDotCaster()

class Cfg(Config):
    integer = field("integer", caster=to_int)
    boolean = field("boolean", caster=to_bool)
    dots = field("dashes", caster=to_dot)

cfg = Cfg()
print(cfg.integer, cfg.boolean, cfg.dots)
# -500, True, hello.world
```

This library is lightweight and dependency-free. I'm using it in my production environments and recommend you too!

You can see more at Github: https://github.com/prostomarkeloff/betterconf
Technology and the environmental challenges in this decade
Tags: technology, environment, engineering, discuss
Published: 2020-01-25 20:59:59

Recently came to an end the World Economic Forum 2020, in Davos, Switzerland. Its theme was about the climatic change around the globe, with several leaders and activists speaking about the need to take energic action to avoid a catastrophic future. As a human and a scientist, I think it should be interesting to share some of my visions about the information given in Davos and our role as producers of technology.

**It is important to note that this is my personal point of view**. It is my belief that the plurality of perceptions is vital to better understand the reality and form the basis for creative and innovative thinking.

We have only one home at the moment: this planet. The actions that causes environmental changes reverberate through all the globe, slowly but surely. Our economic models don't create a sustainable development and the result is starvation, unemployment, enormous unequality and other sad consequences. Some of the leaders in Davos have sopken about some initiatives to recover environments in their countries, but it is, unfortunately, too little for the power of the challenge we must surpass.

We have knowledge and technology to address the problems of our time. We no longer are separated by geographical barriers and because of Internet we can discuss, plan and develop more solutions than past centuries. Seeing some of the speeches of Davos, I started to realize: *It's time to be decisive, active and start to liberate the potential of our technology to create a sustainable society, to better care for our world*.

We can go to Mars, create colonies on the Moon, but I think we should first put our humanity ahead of our technology. We still pollute our streets, our rivers, extinguish animals and plants without much thinking about the future consequences. **This reflects in the technology we create today. This reflects in the mindset we adopt today**.

We can do better. We as developers have the tools to create a sustainable future. I would like and example of projects you are working that are linked with the issues of environment in your countries.

This can be a unusual post, but I think it is worth discuss topics about the direction we want our technology to go. I invite you, reader, to post your thoughts about this topic. Thanks for reading.
React/Vue components are just server side template components with worse performance. Change my mind.
Tags: discuss, react, vue, jinja
Published: 2020-01-26 06:12:40

To this day, even after going through react tutorials, I still feel like it so much more overhead than what is needed compared to using a good templating engine like jinja. I can easily make components and in one file inject css and js that is only used on that component. 

Plus, most times the templates are cached. So with very little css/js to load it's really fast. Basically like a static site. 

But, data binding. Ok, so there's some is on the page that can change some elements. You can still make an Ajax request to some endpoint to get a json response and update the UI. Even faster with a websocket to subscribe to an endpoint. You still don't need react/Vue for that. 

Another upside, is libraries getting out of date. No need to update your react version when a new one comes out. Less headache, no overhead. Sure there will be something if you're using is for Ajax requests, but that's likely an easier upgrade anyways. 

I forget any other reason server site template rendering was just easier?

_**Note 1**: My goal here is to have a conversation about this. I am trying to learn better for both sides of the argument._

_**Note 2**: I do want to be fair in saying that I understand the desire for this for a rich interactive application interface that has a lot more moving parts that don't need to communicate with a back end. Such as where you would build an offline application_