teleren/devto huggingface dataset:
Day 012 of #100DaysOfDesign — GitHub Timeliner (Part 3)
Tags: design, webdev, challenge, 100daysofdesign
Published: 2020-04-12 20:08:56

Today, it was time to complete the design for **GitHub Timeliner** website. I already completed the user page yesterday, so I did not need to think too much about the layouts for other pages. Although I did make a change to yesterday’s design and it was to change the button text from “All Repos” to “View Repos”.This way it sounds more like a button rather than a normal text.

I started the today’s design with the repository page. I just copied the user page and started making the required changes. Again, I was not sure which details I get from the API so I needed to make sure to show useful details from the API response without making extra API calls. Once I had that information, I just used the almost same layout as user page and filled the information.

Next step was to design the modal containing the list of all the public repos for one user. When I was looking into the API endpoint for the list of all repos for one user, I found that I also get a property which says that the current repo is archived or not. To show this state in the list, I created simple tag so that user can easily identify archive repos.

![GitHub Timeliner - Final Design](https://dev-to-uploads.s3.amazonaws.com/i/prpham7a14r358pa242i.png)

Until Now I had already designed all the important pages for the website. I just needed to create about and 404 pages now. I used the same layout as other pages for about page. I removed the navigation from the page and showed “GitHub Timeliner” as heading. I also added GitHub’s logo as I planned in the wireframe. On the other hand, I used the primary colour for whole page’s background for 404 pages. This way these pages stands out differently and with their own layout and design. I only updated the titles and links to differentiate 404 pages for website, user and repos.

As I mentioned yesterday, I was planning to create mobile design for this website, but website already took too much time for this challenge. I started with the index page’s mobile design and realized the creating the mobile design for whole website will take more time to complete. Because of that reason, I dropped the idea for now. I might be designing it in free time or I might just work around with this during the development of this website.

**Figma File**: [#011, #012 — GitHub Timeliner](https://www.figma.com/file/CH8OQQERyY2DcoqapRsWYx/011-012-GitHub-Timeliner?node-id=41%3A19)

**Yesterday’s Work**: #Day 011 — [GitHub Timeliner (Part 2)](https://dev.to/harshppatel/day-011-of-100daysofchallenge-github-timeliner-part-2-4kf)

**Tomorrow’s idea**: Secret Message Website
Y’all ever buy domain names just for the novelty?
Published: 2020-04-12 19:58:25

---
title: "Y’all ever buy domain names just for the novelty?"
published: true
description: "I'm curious if anyone else acquires domains for bits or to entertain themselves."
tags: 
---

I have 22 domains registered for myself and I really only use a couple for professional purposes. Most are because I thought they were funny and in the hope that I’d have a good idea to build something as an experiment later. Most don’t make it to the renewal phase...

but I’m quite proud of yuns.fun and fart.bar — hoping that I get around to doing something weird with spicetime.xyz

It’s not domain squatting as I’d never want to sell any of these. More just making a small commitment to inspire further tinkering. I’m sure others do this as well, right?
Only Download Changes for ISOs
Published: 2023-01-06 01:28:59

---
title: Only Download Changes for ISOs
published: true
date: 2020-04-12 19:28:31 UTC
tags: 
canonical_url: https://brandonrozek.com/blog/downloadchanges/
---

When testing daily ISO images, it is useful to only download the parts of the ISO that has changed since the previous days. That way we can preserve time and bandwidth.

## Rsync method

This approach requires server-side support, and a lot of flags specified.

```
rsync --times \
  --compress --partial \
  --progress --stats \
  --human-readable \
  --human-readable \
  rsync://cdimage.ubuntu.com/cdimage/kubuntu/daily-live/20200412/focal-desktop-amd64.iso \
  kubuntu-focal-desktop-amd64.iso

```

| Flag | Description |
| --- | --- |
| `--times` | Transfer modification times along with the files. |
| `--compress` | Compress the file data during transit. |
| `--partial` | Keep partial downloads if interrupted. |
| `--progress` | Print information showing the progress of the /transfer. |
| `--stats` | Print a set of statistics on the file transfer. |
| `--human-readable` | Output numbers in a more human readable format, can use up to 3 times. |

## Zsync method

This approach does not involve adding a bunch of flags, but it does require the provider to have a `.zsync` file on their server and for the user to have the `zync` package installed. This package typically isn’t installed by default on most systems.

```
zsync http://cdimage.ubuntu.com/kubuntu/daily-live/20200412/focal-desktop-amd64.iso.zsync

```
Single Number problem
Tags: computerscience, swift
Published: 2020-04-12 19:12:34

# Problem

Given a non-empty array of integers, every element appears twice except for one. Find that single one.

Note:

Your algorithm should have a linear runtime complexity. Could you implement it without using extra memory?

Example 1:

```
Input: [2,2,1]
Output: 1
```

Example 2:

```
Input: [4,1,2,1,2]
Output: 4
```

# Solution

Suy nghĩ đầu tiên là duyệt mảng, và đếm số lần xuất hiện của từng phần tử. Tuy nhiên, chắc chắn độ phức tạp không thể là linear và phải sử dụng thêm bộ nhớ.

Phương pháp được gợi ý là sử dụng phép toán bit XOR với tính chất:

- a XOR a = 0
- a XOR 0 = a

Với mảng đầu vào có đặc điểm là các phẩn tử xuất hiện tối đa 2 lần, chỉ một phần tử xuất hiện 1 lần.

Lời giải là đơn giản duyệt mảng và áp dụng phép toán bit XOR với từng phần tử, kết quả cuối cùng sẽ là phần tử xuất hiện 1 lần trong mảng.

```swift

func singleNumber(_ nums: [Int]) -> Int {
    var res = 0
    for i in 0..<nums.count {
        res = res ^ nums[i]
    }
    return res
}

```

# Result

```
16 / 16 test cases passed.
Status: Accepted
Runtime: 80 ms
Memory Usage: 21.3 MB
```

Original Post: [My blog](https://www.mi4t.me/blog/single-number)
How to load a google font in a web component ?
Tags: help, javascript
Published: 2020-04-12 18:56:48

---
title: How to load a google font in a web component ?
published: true
tags: help,javascript
---
How to load a google font in an encapsulated shadow dom. I am learning web components and couldn't find any way to add a google font URL to the shadow dom. quick help please?
How Often Do You Dream In Code?
Tags: discuss, webdev, python, sql
Published: 2020-04-12 18:50:20

I dreamed "in code" last night.

Part of my dream involved looking at a Python file in which I was manipulating a MySQL database and exporting out data to a CSV file.

I think I have dreams like the one above a couple of times per week.

Have you dreamed "in code" before lol? What was your dream about?
Started with Unity 2D Game Dev
Tags: unity3d, gamedev
Published: 2020-04-12 18:44:02

This week I started learning the basics for Unity 2D Game Development. When I was in college I learned with a few Unity courses and created a [3D Space shooter](https://learn.unity.com/tutorial/extending-space-shooter#).:rocket:

I studied Java in college so C# wasn't that hard to use. I love videogames since childhood, I'm a Nintendo fan and I was completely amazed by how physics and programming have control over characters, enemies, animations and many more. Due to this worldwide crisis [Unity Learn Premium](https://learn.unity.com/) is free for three months, the perfect moment to brush up the Unity3D knowledge. 
I'm following different Unity Learn courses and projects, also I'm doing the [Domestika's course](https://www.domestika.org/es/courses/716-introduccion-a-unity-para-videojuegos-2d) for 2D Games.👾

If you have any content recommendations to learn more about unity and games, I'm looking forward to completing these courses and keep posting my learnings. 💭


Links:
- [3D Space shooter](https://learn.unity.com/tutorial/extending-space-shooter#)
- [Unity Learn](https://learn.unity.com/)
- [Domestika - Introducción a Unity para videojuegos 2D](https://www.domestika.org/es/courses/716-introduccion-a-unity-para-videojuegos-2d)
GatsbyJS with Netlify CMS
Tags: gatsby, javascript, webdev
Published: 2020-04-12 18:43:40

GatsbyJS is a powerful framework based on React; combined with Netlify CMS and Bulma CSS you can create fast apps with zero server configuration. :rocket:

### Personal Web
About two weeks ago I created a personal website for my girlfriend [Sarah Stand](https://sarahstand.me/), just for fun and practice. It was easy to get the app up and running with the [Netlify CMS Starter](https://github.com/netlify-templates/gatsby-starter-netlify-cms), cloned to my GitHub account and deployed with Netlify in less than a minute. Building the UI was easy with Bulma CSS because it comes with many common components like sidebar, hero, sections, bottom navigation bar. At this moment she's able to edit the content (text and images) all within Netlify CMS's page editor, that'll trigger a commit and push into the GitHub repository updating the markdown files required to load the react components. Where the magic happens :sparkles: 

### Landing page
Another day I worked on a [landing page](https://tender-stonebraker-6d8b69.netlify.com/) for my [startup](https://merkabahbs.com). The CTA was to have the user submit the form, so I decided to give it a try to Gatsby with the previous starter template. The Netlify's built-in form handling is an awesome feature, it detected the `form` tag in the website and you can start receiving submissions in no time, zero server configurations. Additionally, I could configure an email and slack message notifications with a few clicks! :ok_hand:

It was an enjoyable experience to develop with all of these tools. I'm thinking about new features to work on it, probably I'll test out the blog that cames with NetlifyCMS. Let me know any suggestion you have and I'll take it into account for upcoming websites 💭

Links
- [GatsbyJS](https://www.gatsbyjs.org)
- [Bulma CSS](https://bulma.io/)
- [Netlify](https://www.netlify.com)
- [Netlify CMS](https://www.netlifycms.org/)
- [Sarah Stand](https://sarahstand.me/)
- [Merkabah Workshop](https://tender-stonebraker-6d8b69.netlify.com/)
Rails active jobs & Tests
Tags: ruby, rails, webdev, testing
Published: 2020-04-12 18:43:15


This week I worked with background jobs for Rails. It is useful to use [Active Job](https://edgeguides.rubyonrails.org/active_job_basics.html) when you're working with API Rest because your app needs to respond ASAP to your client's devices, i.e. web browsers, mobile apps or CLI apps in order to get a better UX. :rocket:

## Active Job
>Active Job is a framework for declaring jobs and making them run on a variety of queuing backends. These jobs can be everything from regularly scheduled clean-ups, to billing charges, to mailings. Anything that can be chopped up into small units of work and run in parallel, really.

Let's suppose you have to update your user's information with some information from another service.

To create a job run the command
`rails g job update_user`

Rails will create a file called `update_user_job.rb` in your `app/jobs` folder. You can edit the file and run your needed application logic inside the `perform` method

```ruby
# app/jobs/update_user_job.rb
class UpdateUserJob < ApplicationJob
  queue_as :default

  def perform(user_id)
    user = User.find(user_id)
    # let's imagine you're getting external information for your user
    metadata = get_some_external_metadata(user.email)
    user.update(metadata: metadata)
  end
end
```

Then you need to call your job's `perform_later` method whenever you want to execute your job
```ruby
# app/models/user.rb
  after_create :update_metadata

  def update_metadata
    UpdateUserJob.perform_later(user_id)
  end
```
That's it! Let's take a look at how to test this.

### Test your background job
It gets more complicated to test your background jobs because your tests will call the methods but your user fields won't be updated. Your user is being updated in the background! Thanks to [Active Job Test Helper](https://edgeapi.rubyonrails.org/classes/ActiveJob/TestHelper.html) we can use some methods to test whether our jobs are being enqueued and updating our users, i.e:

- `assert_enqueued_with` *Asserts that the job has been enqueued with the given arguments.*
- `assert_performed_jobs` *Asserts that the number of performed jobs matches the given number.*
- `perform_enqueued_jobs` *Performs all enqueued jobs.*


```ruby
 test "update user metadata when created" do
    user = user(:one)
    assert_enqueued_with(job: UpdateUserJob, args: [user.id])
    perform_enqueued_jobs
    assert_performed_jobs 1
  end
```
#### Rspec

If you're using `rspec-rails` gem, you have [helpers](https://relishapp.com/rspec/rspec-rails/v/3-5/docs/job-specs/job-spec) as an alternative to help you test your background jobs. Your tests must set the queue adapter as :test `ActiveJob::Base.queue_adapter = :test` and you'll be able to use methods like `enqueue_job` and `have_been_enqueued`


Links:
- [Active Job](https://edgeguides.rubyonrails.org/active_job_basics.html)
- [Rspec Jobs Helper](https://relishapp.com/rspec/rspec-rails/v/3-5/docs/job-specs/job-spec)
- [Test Helper](https://edgeapi.rubyonrails.org/classes/ActiveJob/TestHelper.html)
Gridsome, pushing "Google Analytics" code
Tags: help, gridsome, vue
Published: 2020-04-12 18:31:07

I wanted to add Google Analytics on my website, Gridsome Plugin didn't work 
 [plugin Google Analytics](https://gridsome.org/plugins/@gridsome/plugin-google-analytics) so I thought I can just insert this code in head / body on my page (https://gridsome.org/docs/head/), I make this:

```
head.script.push({
    src:'<script async src="https://www.googletagmanager.com/gtag/js?id=UA-151506029-2"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(\'js\', new Date()); gtag(\'config\', \'UA-151506029-2\');</script>',
    body: true})
```
Local is everything ok but online I got an error in HTML below footer

```
" data-body="true">
```

I am beginner, so I don't know what is wrong
Day 4 - 100 days of Coding - Vs Code Extension - Store Date in a permanent file
Tags: 100daysofcode, javascript, learning, vscode
Published: 2020-04-12 18:29:24

---
title: Day 4 - 100 days of Coding - Vs Code Extension - Store Date in a permanent file 
published: true
description: A simple Pomodoro Timer extension for VS Code built using Javascript
tags: #100daysofcode, #JavaScript, #Learning, #vscode
cover_image: https://miro.medium.com/max/2400/1*aLEReyihZv-VHmnAjCbQxg.jpeg
series: 100 Days of Code
---
So it's day 4 of 100 days of coding

## Today's Objectives
####   1)Add Pause Functionality for Rest Timer
####   2)Store Completed Pomodo into permanent file

I managed to complete the both the objective for today

### Add Pause Functionality for Rest Timer
To Achieve this I had to Either add a new Command or adjust existing command. I decided to go with the existing command. So whenever startPomodoTimer is executed, it will check for current Action State, if it is Pomodoro Timer it will trigger start Work Timer or it will trigger rest Timer.

```javascript
    if (this.currentAction == POMODO_TIMER) this.startWorkTimer();
    else this.startRestTimer();
```
### Store Completed Pomodo into permanent file
To achieve this I had to use Vscode Context. There is a path allocated for all the plugins. To make sure our specific directory exist we need to make sure using fs module of node.

```javascript
  try {
    fs.mkdirSync(context.globalStoragePath, { recursive: true });
  } catch (exception) {
    console.log(exception);
  }
```
So whenever a Pomodoro is completed, We need to call storeDatetoFile Method, Currently it's a simple text file that stores the start time of a Pomodoro and it's status (which is completed always)
```javascript
  storeDataToFile() {
    fs.appendFile(this.fileName, this.currentTime + ",completed", (err) => console.log(err));
  }

```
Tomorrow I will be working on improvising the Storage feature. 

You can check the full code in my repo [simple-pomodoro-timer](https://github.com/ganeshraja10/simple-pomodoro-timer)
A Linux GTK Theme Bites The Dust - Goodbye Adapta [QUICK/SHORT]
Published: 2020-04-12 18:14:41

For those unaware, the [Adapta GTK themes](https://github.com/adapta-project/adapta-gtk-theme) (applicable to ALL GTK apps and desktops for Linux (and possibly Windows)) has stopped development. What does this mean? Well, a lot and near nothing at the same time. This means that a fairly huge hole has been opened in the GTK theming community. This is a LARGE community. Adapta was arguably the LARGEST GTK theme there was, and it had multiple variations.

This is good and bad news. Bad news as in there are a lot of people using the Adapta theme. The good news in that many people want to fill this new hole. Now Adapta isn't dying any time soon. Like LXDE, many people will just stick with it, but development is no longer.
The Best JavaScript Podcasts 2020
Tags: javascript, podcast, webdev
Published: 2020-04-12 18:05:02

---
cover_image: https://i.imgur.com/yw22rPK.png
---
### ...or at least my favourite ones
So you’re that hooked and eager to learn even while you’re away from the laptop? Hopefully, this list of JavaScript Podcasts will ease the coding withdrawal symptoms while you exercise, go outside or even sit elsewhere to give your eyes a break from the screen.

![Syntax](https://i.imgur.com/LG4DvK1.jpg)

## [Syntax](http://syntax.fm/)
Syntax.fm has been a favourite of mine to listen to since 2018 and continues to be my goto. Wes Bos and Scott Tolinski are some of the best JavaScript content creators on the web, as they collaborate on this, I think it’s their best content. As a bonus, Wes Bos sometimes includes BBQ tips. If you are looking for video content and haven’t found these guys, you are in for a treat 💜

![JavaScript Jabber](https://i.imgur.com/h175dq1.jpg)

## [JavaScript Jabber](http://devchat.tv/js-jabber/)
This is one of the best-established JavaScript Podcasts. You know it’s a good Podcast when even the daddy of JavaScript Brendan Eich has been interviewed on the show. Some great guests and episodes suitable no matter what stage in your JavaScript journey you are at.

![Frontend Happy Hour Logo](https://i.imgur.com/77GHuuC.jpg)

## [Frontend Happy Hour](http://frontendhappyhour.com/)
Frontend Happy Hour has panellists from companies like LinkedIn, Netflix, and Apple which can help us understand some different topics in the frontend space from some of the best in the industry. With over 60 episodes at the time of typing, there’s plenty to keep you learning.

![Modern Web](https://i.imgur.com/xZqO5Lb.png)

## [Modern Web](https://www.thisdot.co/modern-web)
Want to keep up to date with the latest modern tools like React, Angular and Vue? Modern Web is all about the latest tooling in Web Development space. Learn from others building modern web applications.

![Full Stack Radio](https://i.imgur.com/xmhOY8o.jpg)

## [Full Stack Radio](http://www.fullstackradio.com/)
A podcast for developers interested in building great software products. Every episode, Adam Wathan is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.
Honourable mention for anyone new in the JS world:

![Code Newbie](https://i.imgur.com/IbRGaxG.jpg)

## [Code Newbie](https://www.codenewbie.org/podcast/)
Stories from people on their coding journey. For people starting their journey, this might be the motivation you need to keep going. Includes a tonne of soft skills that could take years to learn without learning from someone else.

What's your favourite JS podcast? 

---

[Follow me on Twitter](https://twitter.com/nialljoemaher)

Subscribe on [Codú Community](https://www.youtube.com/c/Cod%C3%BACommunity)
Crack the Code
Tags: python, fun, codechallenge
Published: 2020-04-12 17:56:32

---
title: Crack the Code
published: true
description: "A fun challenge for the weekend."
tags: Python, fun, code challenge
canonical_url: "https://modasserbillah.ml/2020/04/12/crack-the-code/"
cover_image: "https://source.unsplash.com/3y1zF4hIPCg/1000x420"
---

With quarantines and lock-downs, most people around the world are stuck and bored in their houses. A lot of fun riddles are circulating in news feeds on social medias. Here's one of those.

![riddle](https://modasserbillah.ml/images/quiz.jpg)

Can you crack the code? It's fun to solve by hand but can you crack it using Python? Here's how I did it:

```python
from itertools import product


def first_fifth_condition(candidate, condition):
    common_elements = [digit for digit in candidate if digit in condition]
    return (len(common_elements) == 1) and (
        candidate.index(common_elements[0]) != condition.index(common_elements[0])
    )


def second_condition(candidate):
    condition = (1, 8, 9)
    common_elements = [digit for digit in candidate if digit in condition]
    return (len(common_elements) == 1) and (
        candidate.index(common_elements[0]) == condition.index(common_elements[0])
    )


def third_condition(candidate):
    condition = (9, 6, 4)
    common_elements = [digit for digit in candidate if digit in condition]
    if len(common_elements) != 2:
        return False
    for digit in common_elements:
        if candidate.index(digit) == condition.index(digit):
            return False
    return True


def fourth_condition(candidate):
    condition = (5, 2, 3)
    common_elements = [digit for digit in candidate if digit in condition]
    return len(common_elements) == 0


def find_code():
    # for completeness test all possible permutations with repetition of digits for length 3.
    # We can further optimize by eliminating 0,5,2,3 from the possible candidate calculation.
    for candidate in product(range(10), repeat=3):
        if (
            first_fifth_condition(candidate, (1, 4, 7))
            and second_condition(candidate)
            and third_condition(candidate)
            and fourth_condition(candidate)
            and first_fifth_condition(candidate, (2, 8, 6))
        ):
            return "".join(map(str, candidate))
    return "No solution found."


if __name__ == "__main__":
    print(find_code())

```

Got better code to crack the code? Share links to your solution in the comments! Happy hacking!