teleren/devto huggingface dataset:
Easily Create Asset Icons for Xcode Apps
Published: 2020-12-23 15:05:45

---
title: Easily Create Asset Icons for Xcode Apps
published: true
date: 2020-12-06 23:33:25 UTC
tags: 
canonical_url: 
---

{% youtube CcDwMNQ9YG4 %}

Learn how to easily create icon assets from an image file and add them to Xcode projects using a great application to generate all the sizes and formats needed automatically.

The app used in this video is Asset Catalog Creator Pro, you can get this app and many more on the SetApp service. [https://peterwitham.com/setapp](https://peterwitham.com/setapp) for more details.
Javascript regex part 5 quick advanced shortcuts
Published: 2020-12-06 23:13:55

**Intro**

In previous blogs we looked at matching ranges of letters and numbers using `[]`. Now we will take a look at some shorter syntax for looking at matching a range of letters and numbers.

**Matching all letters and numbers**

Previously when we wanted to search for all letter and numbers in the alphabet we had to use `[a-z]`.

While there isn't a shortcut for letters only, there is a shortcut to search for letters and numbers using `\w`:

```
let short = /\w/
let myNumber = 23
let myPlayer = "Jordan"
short.test(myNumber) //true
short.test(myPlayer) // true
```

You can also use `/W` if you want to search everything but numbers and letters:

```
let short = /\W/
let myNumber = "45*"
let myPlayer = "Jordan!"
myNumber.match(short) //*
myPlayer.match(short) //!
```

**Match all numbers**

If you want to match all the numbers the shortcut for that is `\d` :

```
let movieName = "2002: Not A Space Odyssey";
let numRegex = /\d/g; // Change this line
let result = movieName.match(numRegex).length;

console.log(result) // 4
```

If you want to match all non numbers use `\D` :

```
let movieName = "2002: Not A Space Odyssey";
let numRegex = /\D/g; // Change this line
let result = movieName.match(numRegex).length;

console.log(result) //21
```
A search engine - Part 3: Searching the index
Tags: go, algorithms, datastructures, computerscience
Published: 2020-12-06 23:00:22


In the last episode we completed the algorithm for adding entries to our cache and index data structure.
This episode will cover the querying and retrieval of data.

The main part in our query algorithm is to check if the word we searched for does exist in our index map.
If that's the case, the assigned items from the cache are returned to the caller.

First, we'll define a custom type for our search results which will be returned from our method.

```go
// SearchResult represents a result set returned from a search execution
type SearchResult struct {
	Filter   string
	Matches  int
	Contents []string
}
```

The `Find()` func checks the index for occurences and if successful attaches the according entries from our cache.
It also returns a total match counter.

```go
// Find queries the index and returns all results from the cache
func (g *GlSearch) Find(s string) SearchResult {
    
    // create response
	sr := SearchResult{
		Filter: s,
	}

	contents := []string{}

	// split up using the same func as in part 1
	words := split(s, g.config.Seperators)

	for _, v := range words {

		// transform our search input again
		v = g.config.TransformFunc(v)

		// check map if there is a matching entry in our index
		if e, ok := g.index[v]; ok {

			// retrieve the occurences from our cache by traversing through the index
			for _, ci := range e {
				contents = append(contents, g.cache[ci])
				sr.Matches++
			}

		}
	}

	sr.Contents = contents

	return sr
}
```

So at this point we're finished with the basic implementation of our inverted index.
The three methods we defined in part 1 are now fully functional.

In the next episode we'll discuss some synchronization and thread safety features.
Front-end Interview prep: resources
Tags: career, webdev, codenewbie
Published: 2020-12-06 22:26:13

I've recently been preparing for frontend interviews and have compiled quite a list on my local drive. I wanted to share resources that have helped me in the past. This includes blog posts, Github Repos, other sites that have served as good sources of information.

![person waving on zoom](https://media.giphy.com/media/XHM2W1ZBo3DJMDwRM2/giphy.gif)

Hope this is helpful for those going through this process! Also, feel free to share what your favorite resource has been or currently is. :)

**General Interview Prep**
* [Udemy's Coding Interview Bootcamp](https://www.udemy.com/course/coding-interview-bootcamp-algorithms-and-data-structure/)
I would highly suggest investing in this course! Stephen Grider does such an amazing job of breaking down these common interview questions. 
* [Ben Rogojan's Study Guide](https://dev.to/seattledataguy/the-interview-study-guide-for-software-engineers-764)
shoutout to Ben for this lengthy and super helpful post!

**Frontend specific**
* [Github repo of Frontend specific Q's](https://github.com/h5bp/Front-end-Developer-Interview-Questions)
* [Yangshun's Frontend Interview Handbook](https://github.com/yangshun/front-end-interview-handbook)
* [GP Lee's Article on React Technical Q's](https://medium.com/javascript-in-plain-english/react-v16-technical-interview-questions-1d9b85e6167d)
* [A fun JS Fundamentals Quiz by Alison Quaglia](https://medium.com/better-programming/quiz-how-well-do-you-know-your-js-fundamentals-df813504ff53)

**Algorithm prep**
* [GeeksforGeeks Algorithm Q's](https://www.geeksforgeeks.org/top-10-algorithms-in-interview-questions/#algo2)
* [Leetcode's Easy and Medium collections](https://leetcode.com/explore/interview/card/top-interview-questions-easy/)
* [Leetcode's Learn section](https://leetcode.com/explore/learn)

Photo by [fauxels](https://www.pexels.com/@fauxels?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from Pexels
ایرانی اینجا کسی هست؟
Published: 2020-12-06 22:22:32

سلام
ایرانیا خودشونو نشون بدن میخوام شروع کنم ویدیو اموزشی درست کنم که حوصله ام سر نره،چیا دوست دارین درست کنم؟
StimulusJS 2.0 silencing depreciation message
Tags: stimulus, rails
Published: 2020-12-06 21:54:05

## Stimulus 2.0

🚀 The long expected [Stimulus 2.0 is Out](https://github.com/stimulusjs/stimulus/releases/tag/v2.0.0). The upgrade from 1.1.1 to 2.0 should be very smooth as they are very minimal breaking changes.

## Mute the data-target depreciation message in production

The data-target API has changed. While the 1.1 version is still supported. There is a warning message in the console every time an old syntax is seen for the first time.

The best way to fix this of course is to update all data targets but in a large code base this can take some time.

Another solution to gradually update your code is to silence the warning in production.

Here is a snippet to help

```js
import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'

const application = Application.start()

// remove Stimulus depreciation warnings in production
if (process.env.NODE_ENV === 'production') {
  application.logger = { ...application.logger, warn: () => {} }
}
```
Tackling Advent of Code 2020
Tags: aoc2020, javascript, frontend, challenge
Published: 2020-12-06 21:52:09

---
title: Tackling Advent of Code 2020
published: true
description: 
tags: AOC2020, javascript, frontend, challenge
//cover_image: https://direct_url_to_image.jpg
---

## A challenge worth taking on

I have been working with HTML, CSS, WordPress, and Drupal for 15 years. Creating javascript functions from scratch is a skill I have yet to master. I know all the programming basics, but still, I struggle with "stringing it all together".

## My progress

[Advent of Code 2020](https://adventofcode.com/) is giving me an opportunity to strengthen my algorithm solving skills. It offers up two katas a day from December 1 through December 25. The first week of Advent of Code is coming to a close and I have been able to solve 4 out of 6 challenges (skipped day 3 and am yet to tackled day 6). 

## Refactor? Maybe later.

My solutions are clumped into single functions and are not elegant. I'm sure it would be prudent to break them down into smaller, single-focused functions. When I get more efficient (time-wise), I'll give that a go but in the meantime, as long as I get the correct answer, I celebrate!

## Should you give it a try?
Why not? If you have the time to spare or need algorithm practice, Advent of Code is a great way to go. 

If you are motivated by competition, there is a leaderboard. The ranking is determined how quickly you solve the day's puzzle correctly as soon as the puzzle has been released. Give it a try. 

I don't expect to see my own name on the leaderboard. I'm doing this for skill-building. I will enjoy my leisurely pace and relish my small wins, one algorithm at a time.
GitHub Clones Replenish
Tags: github, git, tutorial, bash
Published: 2020-12-06 21:37:12

This configuration helps make my consistent pulling of repositories from GitHub a bit easier. Especially so if repositories can frequently change names, or the list of all current repositories can change. 

I wrote a script to clone all (specific) repositories in an organization.

## Context

My setup is currently running macOS Catalina, using iTerm2 with Bash.

You will need [`homebrew`](https://brew.sh/), [`jq`](https://stedolan.github.io/jq/), and [`gh`](https://cli.github.com/):

```sh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

brew install jq

brew install gh
```

## Operation

For this configuration, ensure you're in the desired directory and this script exists in the directory. This will create a new directory (named the date, i.e. `2020-12-06T21:16:47Z`) where you are, and then dump all the clones within that directory:

```sh
bash ./<SCRIPT_NAME>.sh INSERT_GITHUB_ORGANIZATION
# bash ./replenishRepos.sh accordproject
```

## Configuration

#### All
My configuration within this `scriptName.sh` file in order to clone **all** repositories within an organization:
```sh
#!/bin/bash
CURRENTDATE=$(date -u +"%Y-%m-%dT%H%M%SZ")
repositories=(`gh api /orgs/$1/repos --paginate | jq -r '.[]' |  tr '\n' '  '`)

mkdir "${CURRENTDATE}"
cd "${CURRENTDATE}"

echo "####"
echo "## Cloning repositories"
echo "####"
for repo in "${repositories[@]}"
do
  echo "####"
  echo "# Cloning repo https://github.com/clauseHQ/${repo}.git"
  echo "####"
  git clone "https://github.com/clauseHQ/${repo}.git"
done
```

#### Specific
My configuration within this `scriptName.sh` file in order to clone **only** repositories within an organization that have specific prefixes, are archived, and are private:
```sh
#!/bin/bash
CURRENTDATE=$(date -u +"%Y-%m-%dT%H%M%SZ")
repositories=(`gh api /orgs/$1/repos --paginate | jq -r '.[] | select(.private == <BOOLEAN> and .archived == <BOOLEAN>) | .name | select(test("<PREFIX_1>") or test("<PREFIX_2>"))' |  tr '\n' '  '`)

mkdir "${CURRENTDATE}"
cd "${CURRENTDATE}"

echo "####"
echo "## Cloning repositories into ${CURRENTDATE}"
echo "####"
for repo in "${repositories[@]}"
do
  echo "####"
  echo "# Cloning repo https://github.com/clauseHQ/${repo}.git"
  echo "####"
  git clone "https://github.com/clauseHQ/${repo}.git"
done
```

In this configuration, I can select archived or private repositories, and/or repositories with a specific prefix in the name.
Messages from a weather station.
Tags: python, raspberrypi
Published: 2020-12-06 21:29:20

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nj2l8vnl6trz8wk3unw1.png)
https://github.com/The-lady-code/Thermometer

I made that project in June and I was thinking about the messages you see in the matrix led... What kind of messages did you write it?
5 Helpful CSS Tips
Tags: css, html
Published: 2020-12-06 21:21:47

#1. Center an element directly on a page

Before Centering Styles are applied

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

```
page {
     height: 100vh;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}
```

*Child elements being flexed must be block level elements.*

After Centering Styles are applied

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

#2. Add shadow to an image directly (Image must have transparent background (PNG))

```
img { 
     filter: drop-shadow(5px 5px 4px #b6b6b6);
}
```

Result:

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

#3. Properly sizing an image.

Have you ever added an image to your html file and it just took up space on almost the whole page?

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

When working with images, it is good to have an image container. When you set a fixed width to that image container, and then set the actual images width to 100% it will then take up 100% of its parent container. 

Fix:

```
div.image-container {
     width: 200px;
}

div.image-container img {
     display: block;
     width: 100%; // of the image containers 200px width
}
```

Result:

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

#4. Use the CSS properties border or outline like crazy!

To get a visual representation of your website layout or where all, or some of your elements are on a page use ```border: 1px solid <some color>``` or ```outline: 1px solid <some color>``` This tremendously helps you to save time guessing where everything is.

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

*The outline property doesn't impact the layout of other elements around the element with the outline property defined. So outline may be better to use.*

#5. Bring out elements with box-shadow

I feel like everyone should learn a little something about box-shadow. It really makes your website stand out. I would suggest learning about the property and its value. Once you understand it, then check out [this website](https://www.cssmatic.com/box-shadow) that autogenerates box shadow code for you.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p2wsnymdj9ynud9hl1fz.png)
TIL: You can use Emojis as Favicons
Tags: emoji, html, firstpost, favicon
Published: 2020-12-06 21:19:12

Most browsers support SVG favicons, and SVGs' support any text in a `<text>` element. So with a little styling you can use an emoji as a favicon.

Here's the code used for the favicon on this (endtimes.dev) site:

```
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌍</text></svg>">
```

This code originally came from [Lea Verou on Twitter](https://twitter.com/LeaVerou/status/1241619866475474946) via [CSS Tricks](https://css-tricks.com/emojis-as-favicons/).


Using an SVG, and especially an SVG that contains a single emoji, is way smaller in size than the average favicon. (though I don't have a definite number for this, they tend to be around 10kb). Plus the SVG can easily be inlined, removing one web request. 


You can also change the emoji based on user preferences like dark mode. The code below will change the emoji to a sun for light mode and a moon for dark mode.

```
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3E %23m %7B opacity:0; %7D%0A@media (prefers-color-scheme: dark) %7B %23m %7B opacity:1; %7D %23e %7B opacity:0 %7D%0A%7D %3C/style%3E%3Ctext id='m' y='.9em' font-size='90'%3E🌝%3C/text%3E%3Ctext id='e' y='.9em' font-size='90'%3E🌞%3C/text%3E%3C/svg%3E">
```

…or you can change the emoji based on some event, check out [emoji clipboard](https://emojiclipboard.com) for an example.
Weekly Update #004
Tags: sql
Published: 2020-12-06 21:18:46

---
description: dynamic sql
---

I use sp_send_dbmail to send results of sql queries by email to business users. Recently an issue was raised that data was being cut off after 255 characters. To fix this I added @query_no_truncate =  1, however this stopped the column headings from being included. No idea why you can't have all the data and column headings but there you have it.

What I am doing now is running 2 queries, one to get the headings, and one to get the data. In theory you should be able to combine them with a Union however you then have datatype issues for non text columns so I gave up with that idea.

My results have 60 something columns (don't ask its for a data import into a third party system!) so I am not typing them all out. I can shove query results into a temporary table and then execute to get a list of columns.

```sql
SELECT name 
FROM tempdb.sys.columns 
WHERE object_id = object_id('tempdb..#TempTable')
```
However I need my list to be horizontal so I can use as column headers. I can use dynamic SQL and a pivot to flip them round.

```sql
DECLARE @cols AS NVARCHAR(MAX), @query  AS NVARCHAR(MAX)

SELECT @cols = STUFF((SELECT ',' + QUOTENAME(name) 
    FROM tempdb.sys.columns 
    WHERE object_id = object_id('tempdb..#TempTable') 
    FOR XML PATH(''), TYPE).value('.', 'NVARCHAR(MAX)'),1,1,'')

SET @query = N'SELECT ' + @cols + N' FROM 
(
    SELECT name 
    FROM tempdb.sys.columns 
    WHERE object_id = object_id(''tempdb..#TempTable'')
) x
PIVOT 
(
    MAX(name)
    FOR name IN (' + @cols + N')
) y'

```
Pokemon Pokedex UI con Ionic 5
Tags: ionic, angular, mobile
Published: 2020-12-06 21:05:51

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

Primer video de mi serie de UI Challenges utilizando Ionic y Flutter.

https://youtu.be/WAbEah-idro
New UIBuzz Podcast
Tags: podcast, design
Published: 2020-12-06 21:03:12

I got off my butt and recorded a new UIBuzz podcast episode where I talk a little about my design flow. Do you design before hand or during?

[Listen Here](https://uibuzz.com/2020/12/06/episode-my-design.html)

I would love to hear how you approach the problem.

Thanks for listening.
Ingest Millions of Messages in the Queue using Serverless
Tags: aws, serverless, azure, cloud
Published: 2020-12-06 20:54:38

While working on one of the Serverless projects, We came across a problem where I needed to ingest millions of messages from an external API to Azure Storage Queue. We made a series of changes in my approach to reach the solution which worked for us and I believe it can be helpful to anyone who’s struggling with the same problem.

We started with the approach where we were executing the Serverless function through the HTTP endpoint. We call it an Ingestion Function. The ingestion function would then hit an external API to get the messages and try to ingest it in Queue.

Here is how my initial architecture looked like:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mv1s1ed8ompqkp2v4bwz.png)

If you see the architecture diagram, the single ingestion function is a bottleneck as it can only scale up-to specific limits. Also, we’re not utilizing the strength of the actual serverless function, which is multiple parallel small invocations. Therefore, we decided to go with the approach where I could scale up the ingestion serverless to multiple invocations so that I can get the scalability as much as needed.

The idea was to divide the total number of messages into multiple chunks (of 5000 in my case) and then pass those messages to the ingestion function so that it can finally ingest those messages to the Queue.

We created another serverless function, we call it Chunking Function, to divide the messages into chunks using this helper function:

```
def chunking_of_list(data):
"""return the list in 5000 chunks"""
  return [data[x:x+5000] for x in range(0, len(data), 5000)]
```

And then uploaded each chunk in a separate file into Azure Blob Storage using this code:

```
def upload_chunks(idLists):
  st = storage.Storage(container_name=constant.CHUNK_CONTAINER)

  for index, singleList in enumerate(idLists):
     logging.info('Uploading file{0} to the {1} blob storage'  .format(index, constant.CHUNK_CONTAINER))
     st.upload_chunk('file' + str(index), singleList)
```
Finally, we set up the ingestion function to listen to the Azure Blob Storage file upload events. As soon as the file gets uploaded, the ingestion function will download the file, read it, and ingest the messages into Queue. As desired we now have multiple invocations of ingestion functions to work in parallel therefore, we achieved scalability.

Here’s how the final architecture looked like:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lqxcabfaaltgsrmikkoc.png)

We essentially followed a fan-out architecture, where we fan out our workload to multiple Serverless invocations instead of one.

Peace ✌
Webpack 5 in Craft CMS 3? Coming right up!
Tags: webpack, programming
Published: 2020-12-06 20:17:57

Webpack 5 has been out for several weeks now and has several [new features](https://webpack.js.org/blog/2020-10-10-webpack-5-release/) and changes that I very much wanted to work with and make use of in a Craft CMS 3 project I maintain.

However, when an update with breaking changes comes out, it can be an absolute _bear_ getting all of your dependencies to play together nicely. 

(Sometimes it can even be impossible until other dependency package maintainers can get to updating their own code.) 

Generally, I like to use boilerplates to kickstart my projects, but some of these updates are _so new_ that I wasn't able to find one that both worked correctly and suited my needs.

Since I couldn't find one, I created a new boilerplate with Webpack 5, PostCSS 8, Tailwind 2, and HMR for your development environment. (It also contains goodies like Sass and Babel, of course.)

It tries to make little-to-no assumptions about your project; only what it needs to in order to function. 

https://github.com/mizziness/craft3-webpack5-tailwind2-boilerplate

PRs and constructive feedback are always welcome!
Why am I learning Go?
Tags: go
Published: 2020-12-06 20:06:04

### Note
After writing this article people commented about Go being a terrible language.  That's fine, I'm just learning Go for fun. But I [wrote this other article about the popularity of Go](https://dev.to/raddevus/most-loved-languages-2020-go-lang-ranks-5-38e3). Check it out and comment.
# Original Article
I started reading this book, [The Go Programming Language, The (Addison-Wesley Professional Computing Series) 1st Edition (Donovan & Kernighan)](https://www.amazon.com/Programming-Language-Addison-Wesley-Professional-Computing-ebook-dp-B0184N7WWS/dp/B0184N7WWS/ref=as_li_ss_tl?_encoding=UTF8&me=&qid=1607283856&linkCode=ll1&tag=radink-20&linkId=698188be1f119a27f96d7fd82461e0fd&language=en_US), on a whim, just to see what Go was all about and now I'm discovering how nice the language is.

Interestingly, this book will remind you of the old book K&R C (and Brian Kernighan is one of the authors).

Here are a couple of interesting things that Go does:
**1)** makes it very easy to build to a native Exe --
**a)** on Linux you can just do
Hide   Copy Code

```$ go build hello.go ```


That will build the native exe named hello and it even handles making the file executable (no need to run chmod 777)
**b)** There's not a huge toolchain to learn. Just use the Go command. it's kind of nice.
**2)** Go is "smaller" and so it feels like the days of past when you could actually wrap your head around a language instead of feeling like you could never learn it all.
**3)** It makes retrieving data over HTTP much easier than other languages -- more like just opening a file.
**4)** It cleans up concurrency issues / makes them easier to handle
##Learning A Language That Keeps You Focused
It feels like learning a language that keeps you focused. Sometimes stuff is so huge now that you are going in a million directions with various tech like CSS, HTML, JavaScript, Angular, TypeScript.
## Go & Rust Seems Similar
Now, I'm just interested in why I might choose Go over something like Rust (or vice-versa).
## Have You Tried Go?
Have you tried out Go? What have your experiences with it been?