teleren/devto huggingface dataset:
How to Build a Website in 5 Minutes
Tags: tutorial, webdev, html, css
Published: 2021-01-18 13:16:40

So a couple of days ago I was searching online about Tailwind CSS, if you don’t know about Tailwind CSS, it is a CSS framework design to give developers more flexibility over their CSS class and tools. It let you style your website or app more easily as bootstrap does.

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

Again while searching online I found a website called tailblock which contains pre-build CSS blocks like navigation bar here section etc.
You can copy the code from it and can easily customize it or you can simply copy and paste it to vs code and run it. It will give you a super boost and can be helpful in many cases like your client need a website but he is on a tight budget and also didn’t need a fancy website but just a simple page where he can tell what he does, in that case, you can use this trick. 
Here is how you can build a website in just 5 Minutes.
Go to tailwindcss.com/docs/installation and scroll to “ Using tailwind via CDN’ or just copy the code below.

''' <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> '''

Past the code to your HTML Document.

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

Now go to tailblock.cc

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

Find what you want on your website

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

Click on View Code

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

Copy it and past it in your code editor,

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

Tadaa!! Your website is ready to go here is what I build using it for a client.
[Link](https://github.com/sharozijaz/sajeel_website)

Support Me on Patreon.com

https://www.patreon.com/sharozijaz
По хардкору: instance_double, verify_partial_doubles
Tags: ruby, rspec, testing, doubles
Published: 2021-01-18 13:10:41

В комментариях к посту о дублерах, стабах и моках [Макс Прокопьев](https://twitter.com/maxprokopiev) упомянул `instance_double`, секретную технику старших разработчиков. О ней и поговорим. Коротко, по делу и с примерами.

## Ситуация
Возьмем пример с `Notifications`:

```ruby
class Notifications
  def as_json
    # Загружаем и отдаем последние новости
    # и уведомления с серверов Юрия Лозы по ХТТП
  end
end

class NotificationsController
  def index
    # Оборачиваем уведомления в ключ 'data'
    render json: { data: notifications.as_json }
  end

  def notifications
    Notifications.new
  end
end
```

Чтобы не обращаться к серверам Лозы в тестах, используем дублера:

```ruby
describe "NotificationsController#index" do
  let(:notifications) do
    double(:datasource, as_json: { notifications: [] })
  end

  before do
    allow(Notifications)
      .to receive(:new)
      .and_return(notifications)
  end

  it "wraps notifications in 'data' key" do
    get :index, format: :json

    expect(json_response["data"].keys)
      .to have_key "notifications"
  end
end
```

Что произойдет, если мы переименуем `Notifications#as_json` в `Notifications#to_json`? Ничего. Мы останемся наедине с зеленым тестом, проверяющим бесполезного дублера.

<img class="img--break" src="/assets/cantbelieve-double.jpg" alt="" width="620" height="471" />

## `instance_double`
Чтобы не попадать в такую дебильную ситуацию, используйте `instance_double`:

```ruby
describe 'NotificationsController#index' do
  let(:notifications) do
    instance_double(Datasource, as_json: { notifications: [] })
  end

  # ...
end
```

Такой дублер проверит свой интерфейс. Если метода нет или у него другие аргументы — красный тест.

Чтобы так же проверять моки и стабы, убедитесь, что [`verify_partial_doubles`](https://www.relishapp.com/rspec/rspec-mocks/v/3-4/docs/verifying-doubles/partial-doubles) включен в `spec_helper.rb`.

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

Внимательный читатель со звездочкой наверняка заметил, что одного `instance_double` мало. Все верно. В RSpec есть похожие дублеры для классов, модулей и объектов: [`object_double`](https://www.relishapp.com/rspec/rspec-mocks/docs/verifying-doubles/using-an-object-double) и [`class_double`](https://www.relishapp.com/rspec/rspec-mocks/v/3-4/docs/verifying-doubles/using-a-class-double).
Fix the IOS 14 Keychain bug in Password fields
Tags: ios, html, web
Published: 2021-01-18 13:15:52

---
title: Fix the IOS 14 Keychain bug in Password fields
published: true
description: IOS 14 Keychain bug that crashes app when clicking on Password fields
tags: ios,HTML,web
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/m1xuq915eiopewuv9hei.jpeg
---
Since Apple released the IOS `v14`, The `Safari browser` in all IOS devices have a problem with the Input type's `password` which the application crashes when you click on the Password Input. The problem is The `Keychain` has a critical problem and wants to autofill a user match but will crashes while loading the matches, So I tried so many ways to fix this issue, and I found these solutions that documented in this repository:

[Github Repository with Examples](https://github.com/ali-master/ios-password-field-crashes)

If you have any other solution, please contribute to the repo to tell other programmers how they can fix this huge problem.
По хардкору: describe vs. context
Tags: ruby, rspec, testing
Published: 2021-01-18 13:14:49

`describe` и `context` объединяют связанные проверки и задают структуру теста.

Структура — каркас теста, отражающий его логику. Без структуры читать тест сложно: повествование скачет, внимание блуждает, поиск связанных проверок бесит.

Без структуры:

```ruby
it "#accessible_projects return all system projects when user is admin"
it "returns no projects when user is not admin"
it "returns user full name with email"
```

Со структурой:

```ruby
describe "#accessible_projects" do
  context "when user is admin" do
    it "returns all system projects"
  context "when user is NOT admin" do
    it "returns no projects"

describe "#user_name_with_email" do
  it "returns user full name with email in parens"
```

## Когда и что использовать
Я использую `describe` для сущностей (кто, что?), а `context` для состояний (когда, с чем, с какими условиями?). Так легче ориентироваться в возможных ситуациях и исследовать условия.

```ruby
# Так себе
context "associations"
context "#full_name"
describe "when user is admin"
describe "with valid params"

# Хорошо
describe "associations"
describe "#full_name"
context "when user is admin"
context "with invalid params"
```

Контексты начинаю со слов when, if, with, given. Если вижу их в описании проверки — вытаскиваю:

```ruby
# Плохо: условие, описание ситуации
# (user is editor) тяжело заметить
it "returns only published posts when user is not editor"
it "returns published and draft posts when user is editor"

# Хорошо: ситуация явно обозначена контекстом
context "when user is editor" do
  it "returns published and draft posts"

context "when user is NOT editor" do
  it "returns only published posts"
```

Вложенные контексты начинаю с and, чтобы было понятно, что это не все условие:

```ruby
context "when user is editor" do
  context "and post is published" do
    it "displays post views/visitors count"
```

## Шпаргалка

<div class="outstanding outstanding--therule">
  <code>describe</code> &lt;something&gt;<br />
  <code>context</code> &lt;when... / if... / with... / given...&gt;
</div>

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

Внимательный читатель со звездочкой залезет в исходники RSpec, чтобы убедиться, что [`describe` и `context` отличаются только по смыслу](https://github.com/rspec/rspec-core/blob/b54e2a161b7de5e6cfdcfde9abce2ea3cec10b82/lib/rspec/core/example_group.rb#L269-L277).
[Free] tailwind css components
Tags: webdev, ux
Published: 2021-01-18 13:14:15

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uapvu23ueerx26yqj1wi.png)
Tailwind css has taken the developer community by storm since its introduction almost two years ago. With its simple syntax and shared class names, it has become a favorite for front-end developers. We at TUK want to help the community even more by releasing **50** completely **free tailwind css components (200+ coming soon)** and **one template**. Here is the link: check it out.

https://tailwinduikit.com/free-tailwind-css-components

Well, our developer team has worked day and night to ensure the tailwind css components have cross-browser compatibility and responsive design. They have also been thoroughly tested to ensure that you do not have any problems implementing your dream front end.

The components are an excellent opportunity for new tailwind css adapters to design an amazing front end without spending countless hours designing every component from scratch. Our free template will also allow the designer to visualize a complete extraordinary front end while exploring in-depth on how to achieve it by looking at the code. Furthermore, the components are also of great help to experienced developers because as the demand for websites increases more and more clients want a unique design for their websites. 

Thus, these components ensure a developer does not have to worry about designing components such as buttons, sidebars and can instead focus freely on the aesthetic and unique features of the website with the mental peace that he has amazing standard components that can be modified easily to suit the needs of each individual project. This also allows the designer to reuse the components in future projects saving him time and cost.

Our belief here at TUK is to make the internet more accessible for everyone. Therefore, all our components are accessible for disabled persons. This is especially important given a recent study by an accessibility software company Deque found that 70% of websites, from business to e-commerce to government sites had significant accessibility issues resulting in a loss of $6.9 billion. Given there are a billion people worldwide with temporary or permanent disabilities this is a huge issue. Thus, by using our components developers ensure they fulfill their moral responsibility of making websites more accessible while also helping their clients capture a larger market share without any extra effort.
What are you waiting for? check out the free components here.

https://tailwinduikit.com/free-tailwind-css-components
Just found out top 10 starred public repos in Github are written in Go. 
Tags: watercooler, go
Published: 2021-01-18 13:12:27

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

[Here](https://gtpr.bywachira.com)
Ethereum 2.0 vs Symbol (Part 2): Consensus Protocols
Tags: finality, ethereum, symbolblockchain, blockchain
Published: 2021-01-19 08:31:07

---
title: Ethereum 2.0 vs Symbol (Part 2): Consensus Protocols
published: true
date: 2021-01-18 13:01:47 UTC
tags: finality,ethereum,symbolblockchain,blockchain
canonical_url: https://medium.com/coinmonks/ethereum-2-0-vs-symbol-part-2-consensus-protocols-73e0a2589242
---

[![](https://cdn-images-1.medium.com/max/1772/1*jNpB94cBV42Yfyrihh8W-A.png)](https://medium.com/coinmonks/ethereum-2-0-vs-symbol-part-2-consensus-protocols-73e0a2589242?source=rss----721b17443fd5---4)

NEM started with Proof-of-Stake (PoS) derivatives, and Ethereum has been planning in moving from Proof-of-Work (PoW) to PoS and it is now…

[Continue reading on Coinmonks »](https://medium.com/coinmonks/ethereum-2-0-vs-symbol-part-2-consensus-protocols-73e0a2589242?source=rss----721b17443fd5---4)
Daily Developer Jokes - Monday, Jan 18, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-18 13:00:18

---
title: "Daily Developer Jokes - Monday, Jan 18, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Jan%2018%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12593d119ae.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
There are 10 types of people in this world, those who understand binary and those who don't.
 -->
How we helped Kinderlime build a better child care platform
Tags: ruby, programming, startup, webdev
Published: 2021-01-18 12:55:12

Kinderlime is a child care app & management platform that simplifies all child care business operations, so that users can focus on what matters: the children. They offer a wide range of child care management solutions, including contactless check-in/out, integrated tuition collection, business management tools, after-school program software, staff management, and much more. Kinderlime is the No. 1 name in child care software and is used by more than 30,000 child care providers across the U.S. They offer their services through a web app, which provides the main functionality for both teachers and parents, as well as iOS/Android mobile applications, with functionality for parents.

The client’s team was initially distributed and located in San Jose, CA and India, and they were already efficient at running fully remote software development. We discussed the details with Nalin, and it turned out that they were redesigning their current Rails app architecture and had a wide variety of apps that needed to be developed for both web and mobile platforms.

The challenge they had was splitting the monolithic Rails application into separate backend and frontend projects, using an API gateway in a microservices architecture, and then using the same API for mobile clients. They needed our help with the frontend of their application, and came prepared with technical requirements and wireframe design, explaining how they envisioned each screen of the application. We were an excellent fit for the project, since we have quite a bit of experience with similar Rails-based solutions and splitting monolithic Rails applications.

[Read the full case study](https://evrone.com/kinderlime)
Пора валить?
Tags: career, productivity
Published: 2021-01-18 12:51:29

Худшее, что может сделать программист для своей карьеры — обменять десять лет своей жизни не на десять лет опыта, а на один год, повторенный десять раз. Вот сидишь ты в собственном кубикле, программируешь там, тут остановился и подумал: Ух, ты! Ну и псих же я: десять лет на одном месте с тем же самым Друпалом. Бывает такое?

Чтобы вовремя заметить такое болото, раз в полгода я задаю себе три вопроса:
1. Что интересного, значительного и важного я сделал за прошедшие полгода?

2. Что за навыки я получил или прокачал за прошедшие полгода? Они вообще мне нужны?

3. Как мне команда и компания? Что с доверием, ценностями и миссией компании? Я еще верю в них? Или уже все пронизано цинизмом и пессимизмом?

Если ответы по двум из трех вопросов удручающие, пора валить.

Еще по теме:
[How to waste your career, one comfortable year at a time](https://apoorvagovind.substack.com/p/how-to-waste-your-career-one-comfortable)
Обратная связь в тестах
Tags: vim, productivity, testing
Published: 2021-01-18 12:49:53

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

Я фанат мгновенной обратной связи в тестах: чем быстрее я получу результаты теста, тем быстрее вернусь к коду, тем быстрее сделаю работу. Для этого использую вотчеры: в Руби Guard отслеживает изменения в файлах и автоматически запускает нужные спеки, в JS это делает `jest --watch`.

Постепенно они стали меня бесить: сохраняешь файл, тест прогоняется через две секунды. Эти две секунды — целая вечность. Часто думаешь, что не сохранил файл, сохраняешь еще раз. Тест прогоняется еще пару раз. Да еще и целиком!

Постепенно перешел к ручному, но мгновенному запуску тестов с помощью vim-test:
https://github.com/janko/vim-test

Идея простая: сохранил спеку, нажал «пробел t» (пробел — это leader), получил терминал с тестом. Мгновенная обратная связь, советую.

P. S. Для запуска тестов использую вот такие шорткаты:
```
nnoremap <silent> <Leader>t :TestFile<CR>
nnoremap <silent> <Leader>s :TestNearest<CR>
nnoremap <silent> <Leader>l :TestLast<CR>
```
5 Command To Master Chrome Dev Tools
Tags: javascript, chrome, devtools, html
Published: 2021-01-18 12:49:17

{% youtube fiTr2hDeMBA %}

[Subscribe On Youtube](https://www.youtube.com/c/gulshansaini?sub_confirmation=1)

In this video I am going to show you **5** commands to master chrome dev tools

## 1 - Convert object to table

**Command:** `table({})`
```javascript
let data = {
  "market": "Capital Market",
  "marketStatus": "Close",
  "tradeDate": "11-Jan-2021",
  "index": "NIFTY 50",
  "last": 14347.25,
  "variation": 209.89999999999964,
  "percentChange": 1.48,
  "marketStatusMessage": "Market is Closed"
};
table(data); // convert json to table
```

## 2 - Print all keys for an object

**Command:** `keys({})`

```javascript
let data = {
  "market": "Capital Market",
  "marketStatus": "Close",
  "tradeDate": "11-Jan-2021",
  "index": "NIFTY 50",
  "last": 14347.25,
  "variation": 209.89999999999964,
  "percentChange": 1.48,
  "marketStatusMessage": "Market is Closed"
};
keys(data); // return keys of object
```

## 3 - Clear the console

**Command:** `clear()`

You can clear the console by typing CMD+K on MAC or CTRL+K on windows
Otherwise you can also call clear followed by round brackets and press return key

```javascript
let data = {
  "market": "Capital Market",
  "marketStatus": "Close",
  "tradeDate": "11-Jan-2021",
  "index": "NIFTY 50",
  "last": 14347.25,
  "variation": 209.89999999999964,
  "percentChange": 1.48,
  "marketStatusMessage": "Market is Closed"
};
clear(); // clears console
```

## 4 - Inspecting element

**Command:** `inspect(elementSelector)`

You can inspect element without touching mouse or touchpad using following command

```javascript
// go to google.com
// open developer console and type
inspect(document.querySelector('input[name="q"]'));
```

## 5 - Show markup of recently selected element

`$0` returns the most recently selected element 

### BONUS TIP

Similarly, $1 returns the second most recently selected one
The `$0`, `$1`, `$2`, `$3` and `$4` commands work as a historical reference to the last five DOM elements inspected within the Elements panel
Web scraping with Puppeteer
Tags: learningtowebscrape, javascript, puppeteer, typescript
Published: 2021-01-29 12:51:28

---
title: Web scraping with Puppeteer
published: true
date: 2021-01-18 12:22:00 UTC
tags: LearningtoWebScrape,Javascript,Puppeteer,Typescript
canonical_url: https://javascriptwebscrapingguy.com/web-scraping-with-puppeteer/?utm_source=rss&utm_medium=rss&utm_campaign=web-scraping-with-puppeteer
---

[Sample code here](https://github.com/aarmora/web-scraping-with-puppeteer)

Another quick video showing the basics of web scraping with Puppeteer.

<iframe title="Web scraping with Puppeteer" width="640" height="360" src="https://www.youtube.com/embed/Te37sGow68o?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Looking for business leads?

Using the techniques talked about here at [javascriptwebscrapingguy.com](https://javascriptwebscrapingguy.com), we’ve been able to launch a way to access awesome web data. Learn more at [Cobalt Intelligence](https://cobaltintelligence.com)!

The post [Web scraping with Puppeteer](https://javascriptwebscrapingguy.com/web-scraping-with-puppeteer/) appeared first on [Javascript Web Scraping Guy](https://javascriptwebscrapingguy.com).
Implementing(scaling) graphql-redis-subcriptions to Apollo Server
Tags: apolloserver, graphqlsubscriptions, redis, scaling
Published: 2021-01-18 12:16:35

I have a question about Graphql Subscriptions.I'm trying to implement grapql-redis-subscription package to my apollo-server. Do I have to migrate my server to apollo-server-express ? All docs are imlementing the SubscriptionServer(index.js) with appliying additional middleware(express). Is there any way to config(redis-graphql-subscription with SubscriptionServer in index.js) with simple apollo-server package ? If there isn't anyway why ?
Travel in time in development/staging/... in your Rails app
Tags: rails, ruby, timecop
Published: 2021-01-18 11:22:36

---
title: Travel in time in development/staging/... in your Rails app
published: true
description: timecop + Rails + development / staging env
tags: rails, ruby, timecop
//cover_image: https://direct_url_to_image.jpg
---

Hello,

I would like to share my new gem which myself and my QA team already found useful and maybe your team could find too.

https://github.com/igorkasyanchuk/rails_time_travel

The idea is very simple - sometimes you need to add data in the past, and overide `Time.now`. 

I believe you already familiar with the gem https://github.com/travisjeffery/timecop which is very useful for testing. 

And my gem is basically providing a simple UI to "control" current time (per user).

```ruby
module RailsTimeTravel
  module Controller
    extend ActiveSupport::Concern

    included do
      around_action :time_travel_for_request
    end

    def time_travel_for_request
      time_travel
      yield
      time_travel_return
    end

    def time_travel
      if session[:timecop_date]
        logger.info "TIME TRAVEL START: #{session[:timecop_date]}"
        Timecop.travel(session[:timecop_date])
      else
        Timecop.return
      end
    end

    def time_travel_return
      logger.info 'TIME TRAVEL RETURN'
      Timecop.return
    end
  end
end
```

Most of the logic is simple and was taken from the stackoverflow, and only a simple control panel was codded to change datetime.

![Time Travel Rails](https://dev-to-uploads.s3.amazonaws.com/i/h5dc5012yfqd0n145hge.png)

To use this gem just add it to the `Gemfile`, bundle install and start the app. During start is adding ruby module above to the ApplicationController so this code will be executed on every request.

Once a server is running just open `/rails/time_travel`.

I hope you'll find it useful too!