teleren/devto huggingface dataset:
Season Of Docs-Community Bonding Period, Meeting-2
Published: 2020-09-09 10:23:09

On 2nd of September, I had a meeting with my mentors with regards to my Google's Season Of Docs project. Since we're still in the community bonding period which'll run till the 14th of September hence, I'm trying to get a bit more familiar with SynBioHub and it's nuances. 
I've been able to accomplish the following tasks:-

(1) I was able to download Ruby 2.5.1 on my PC(Ubuntu 20.04), though it took almost 5 hours to download and configure the directories.

(2) I'd Successfully opened the local instance of slate on my PC using the following commands:-
```
cd
cd api-docs/
bundle install
bundle exec middleman server
```
Also, I copied the non-API stuff locally from the API docs and hence pasted it onto the locally created SynBioHub-Documentation, and completed the following sections:
1. About SynBioHub
2. Installation
3. Plugins
4. API documentation (Already done in slate)
Hence, I was able to view the documentation locally using Hugo static site generator.

(3) I was able to implement a few of the operations using The GUI of SynBioHub rather than using the API calls.
They've been listed below:

**Under User Endpoints:-**
 
1. Successfully registered on synbiohub.org without any issues.
2. Successfully signed out.
3. Successfully logged in again.
4. Successfully changed the password.
5. Successfully viewed & edited my profile.

**Under Search Endpoints:-**

1. Was able to view the root collections.
2. Was able to view count search results.
3. Was able to view my submissions.
4. Was able to view the metadata on the objects that were 
   shared with me specifically.
5. Couldn’t understand what Sub-collections mean?
6. Was able to use filters.
7. Was unable to see the usage for SPARQL queries.
8. Was unable to use sequence search.

As far as the rest of the endpoints are concerned, I'll be having a brief discussion with my mentor so as to have a better understanding of how and where can I put them to use while using the GUI of SynBioHub.

(4) Also,I had a brief conversation over the Email with Prof. Myers, regarding the **Introduction** and the **Installation** section of SynBioHub, wherein significant additions are needed so as to make user experience hassle free. 


The Problems that I faced during this week:-
(1) I was facing serious trouble while downloading Ruby(v 
    2.5.1) on my PC since it has a few inbuilt bugs.

(2) I'm still working upon enhancing my knowledge regarding 
    the API endpoints.

(3) I'm still going through the [research paper] (https://pubs.acs.org/doi/abs/10.1021/acssynbio.7b00403) on 
    SynBioHub sent by Prof. Myers.

(4) I'm still searching for a software having a solid installations page, so as to have a slight idea on how to edit SynBioHub's installation page.

The next weekly meeting is scheduled to take place on 9th of September and I hope to clear all the queries that I have. 
Also, I'll try to chalk out a rough plan with regards to the User Documentation after having a discussion with my mentors.
Web Design Trends 2020
Published: 2020-09-09 08:36:07

Websites and web-related resources are becoming an integral part of our daily lives. So as demand for web design skills increases — a lot of us may still not know what exactly is web design. In simple words, It is an art of planning and designing websites from scratch. There are a number of small aspects that fall under the wider web development umbrella, such as website architecture, user interface and user experience, webpage layout, navigation, colors, fonts, and overall graphics. With the combination of all these, web designers are busy creating masterpieces that absolutely stand out in the crowd.

Let’s dig right into <a href="https://www.sphinx-solution.com/blog/web-design-trends-2020/">web design trends 2020</a>. These trends are the perfect blend of visual designing and emerging technologies. 

1) Use of Whitespace and Simplistic/Minimalist Design
It’s often said that simplicity attracts more than complexity, The minimalist trend in web design has become popular today, The best thing about this design trend is that while it continuously evolves and looks modern and classy. 

2) Dark Theme Design
The dark theme is a buzz word in the market as many businesses integrate dark mode themes on their website. This mode of web design not only looks ultra-modern but also easily attracts colours and design elements to the eyes. Dark themes are suitable for OLED screens as they help in saving power and increasing screen duration. 

3) Retro Styled or Vintage Web Design
The retro era is back, this year, we are going to experience the early 50s, and 60s inspired vintage or retro style websites as the latest trends in web design. Many designers use effects that remind us of the vintage period, such as faded colors, black-and-white photos, classic images, vintage typography, etc. 

4) Combination of Illustration and Photos
We are witnessing another stunning trend in web design, where photos or images combine with a simple hand-drawn 2D sketch. It’s a well-known fact that custom illustration is an excellent way to highlight your brand.

5) Data Visualization in Web Design
Data visualizations look creative, appealing, useful, and never misleading. Designers are creators of visuals. Many people understand visual information better than text information. Data visualization is an effective way of quantitative representation data visually.


After considering every factor, we can say this year we would witness some significant development by the web design companies. The fusion of two or more technologies will be trending.
Today I learned - Sentence case in CSS
Tags: css, todayilearned, sentence
Published: 2020-09-09 10:19:12

<sub>Cover photo by [Patrick Tomasso](https://unsplash.com/@impatrickt) on Unsplash</sub>

> This post was originally published on [my website](https://missing-manual.com/til-sentence-case/).

**CSS** provides an amazing toolset for style manipulation, but when it comes to text manipulation you often need to resort to JavaScript for additional help. However, CSS has many tricks up his sleeve you might not be aware of.

One thing that can be irritating is when backend API (over which you might not have full control) responds with different casing than expected. It might not even be your backend's fault - perhaps the user forgot to switch off **caps lock** before submitting that message.

CSS has two builtin options to change the case:
* text-transform: lowercase
* text-transform: uppercase

But what if we need to change the casing to **sentence case** (first letter uppercase, rest lowercase). 

Turns out, CSS provides `pseudo selectors` that can target the first letter.

```css
.sentence-case {
  text-transform: lowercase;
}
.sentence-case::first-letter {
  text-transform: uppercase;
}
```

Which renders this:

```html
<p>THIS TEXT IS ALL CAPITAL</p>
<p>this one is all lowercase</p>
<p>aNd THiS oNE iS MIXeD</p>
```

Into this:

```html
This text is all capital
This one is all lowercase
And this one is mixed
```

One important thing to know is that `first-letter` pseudo selector **ONLY** works on block elements (p, div, li, etc.).

If you need to use it on inline elements (e.g. span, b) you will have to set `display: inline-block`:

```css
span.sentence-case {
  display: inline-block;
}
```
Consumer Driven Contract Testing - Hosting A Mocked API Using Azure Functions
Tags: testing, pact, azure, serverless
Published: 2020-09-09 10:02:42

Applying the concept of Consumer Driven Contract Testing is useful when you are building a system that is composed of multiple decoupled services. Some of these services will *provide* APIs, others will *consume* these APIs. Consumer Driven Contract Testing is about the API consumer publishing their  expectations on the API in a way that allows
- the provider of the API to verify that that it fulfils these expectations
- the consumer of the API to easily stand up a mock of the provider API to run their own tests against

If you are not already familiar with the concept, you can dive deeper into the topic by reading [Frank Rosner's excellent article](https://dev.to/frosnerd/consumer-driven-contract-testing-with-pact-1a57) or visit [https://pact.io/](https://pact.io/). PACT is one of the major libraries available to implement Consumer Driven Contract Tests. The examples shown in this article however are based on the [Impact library](https://github.com/ChristianEder/impact).

The basic idea is, that the consuming service defines a so called `Pact` that codifies the consumers expectations on the API structure & behavior:

{% gist https://gist.github.com/ChristianEder/ee4d0c3db75a7970221dda048922248f %}

The `Pact` shown in the example above defines an HTTP API that responds to any `GET` request to an URL with a path matching `weatherforecast\/([a-zA-Z]+)\/(\d+)` and responds with weather forecast data.

Based on this `Pact`, the consumer can stand up a test server on `localhost` and run tests of the consuming service using this mocked API:

{% gist https://gist.github.com/ChristianEder/3d8442f67a11037503aee488030f3b56 %}

After successfully running its own tests against this mocked API, the consumer can publish the PACT to the provider as a JSON file:

{% gist https://gist.github.com/ChristianEder/b3994c92a4d0a7550ce8abb246083a8d %}

The provider can now take this JSON file and run the expectations defined in that file against its own API:

{% gist https://gist.github.com/ChristianEder/27ed2d25c73589cc5440f17af34bf6a0 %}

#Hosting the mocked API on an Azure Function

If the consuming service does not want to run the mocked provider API on `localhost` - e.g. because it wants to run its own tests against a cloud hosted environment - we need a way to host the MockServer in the cloud as well. The following code snippet shows a fully working example of an Azure Function that will host an HTTP endpoint which will respond to any request as defined in the `Pact`:

{% gist https://gist.github.com/ChristianEder/e9f98fbdd631865dc2126a975123945a %}

You can find the whole example (and more) on [my GitHub repo](https://github.com/ChristianEder/impact/tree/master/src/Samples/Impact.Samples.ProviderMockAsAzureFunction)
Quick tip about setTimeout function
Tags: javascript, function, quicktips, tips
Published: 2020-09-09 10:01:28

In JavaScript, we have the **[event loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop)**.

So, without [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API]), **JavaScript** is *single-threaded, non-blocking, asynchronous, concurrent language*.

What can I do with the **setTimeout** function ?
I can launch the execution of a part of your code after a delay.

[The delay may be longer than intended](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified).

```javascript
setTimeout(() => console.log('After the delay'), 5000);

console.log('Before the delay');

// Printed => 'Before the delay'
// After ≈ 5 secondes => 'After the delay'
```

### One more thing
Sometimes you can see this kind of code.
```javascript
setTimeout(() => {someHTMLNode.style.color = 'yellow'}, 0)
```
We are manipulating a property of a *node element* (it's a *DOM element*).
But the *DOM* is not ready, `someHTMLNode` doesn't exist.

The`setTimeout(fn, 0)` is a *workaround*, we can delay our affection after the DOM rendering !

That's it, make good use of it !

---

I'm not a native English speaker so, thanks in advance if you want to improve my article with correct syntax/grammar/sentences.

I can accept all kind remarks :)

Cover by [Icons8 Team](https://unsplash.com/@icons8) on [Unsplash](https://unsplash.com/photos/dhZtNlvNE8M)

______

Merci d'avoir lu cet article ! 
Il a été posté initialement sur mon [site](https://necraidan.com) : https://necraidan.com/blog/back-to-basics-set-timeout
AVIF image format TLDR
Tags: webdev, html, css, webperf
Published: 2020-09-09 10:00:00


This post is a summary of the good, long post of Jake Archibald: [AVIF has landed](https://jakearchibald.com/2020/avif-has-landed/). If you want to know more, and play with interactive image compression comparisons, read the original post directly!

---

A new image format is coming to our browsers! 

AVIF shows very promising results compared to WebP, JPEG, and PNG.

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

On top of that, it's already in Chrome 85, implementation is in progress for Firefox, and will likely be in Safari (Apple contributes).


AVIF is output from AV1 video format. Its compression algorithm seems to smooth out the "divisions" between certain parts of the image, but it goes quite unnoticed without zoom.



According to Jake Archibald's comparisons, the gains in terms of size are impressive, and we often see a reduction from x2 to x5 for a more or less similar quality (which requires a zoom to make the difference).

For equal weight, AVIF gives a much better quality.

AVIF seems to work just as well for images with lots of detail as for illustrations.


But it comes with a few drawbacks:
- No progressive loading (the image is displayed suddenly)
- Longer encoding time (possibly quite significantly)
- Decoding and CPU: possibly more important (infos not available)

No progressive image loading does not seem a big drawback for the modern web, particularly when we can setup [traced svg placeholders](https://using-gatsby-image.gatsbyjs.org/traced-svg/).

As we integrate such format in our Jamstack sites, we'd rather have a good caching system so that we don't process AVIF images unnecessarily across site builds. 

----

In short, a powerful image format that could reduce the weight of our websites, if you are willing to trade weight for CPU and build time.
Learning About APIs and Hooks in React
Tags: devjournal, codenewbie, react
Published: 2020-09-09 09:22:37

_This post was originally published on September 9, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Hey, hey, hey! Today is Podcast Production Wednesday for [The Ladies Code Collective Podcast] 
(https://www.ladiescodecollective.com/podcast), which means I'll be focusing most of today's attention on launching an episode and recording a future episode - yay!

Yesterday, I started playing around with APIs in React by fetching data from Reddit and displaying it on a test React app. It was awesome!

I essentially made an axios call to the Reddit URL with whatever props I passed it as the subreddit. Just from changing the subreddit prop that was passed into it at the time of rendering the component, I could update what was displayed in the DOM.

I've also been taking more of a deep-dive into the different React methods (i.e. componentDidMount, componentDidUnmount, etc), which has been super interesting because I distinctly remember being extremely confused on why these methods were always used within components, and now it's making more and more sense.

Basically, in my head, I was thinking 'Wait, why does every developer name these methods the same thing?' when in reality, they're just the names of the methods that make up the React framework.

I also started in on learning about Hooks which has *always* been on my radar but I'd always felt like I wasn't ready for. I studied them a bit yesterday, and I'll focus on them a bit more tomorrow.

Looking forward to using them more in practice!

----------


P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen [right over here >>] (https://www.ladiescodecollective.com/podcast)

![The Ladies Code Collective Podcast cover art](https://dev-to-uploads.s3.amazonaws.com/i/e9bnxljvfrdjeti7fvbr.png)
Mastering Fundamentals
Published: 2020-09-09 09:20:55


I know this title can be a bit of click-bait, but this post is for references to myself as well to force me to dig more on the fundamentals of programming but wait...

## What are the Programming fundamentals?

I know that this can be a silly question if you don't think deeply on it. I have been thinking about this for a while because the main advice for junior devs over and over is to learn and  Master fundamentals but, is there a clear view which the fundamentals are?

What I mean is that the fundamentals in javascript are the same as the fundamentals in Python or C#. I don't think so, of course, they all have a lowest common denominator, and that is what I will try to achieve during this series of posts focused to those concepts that you may have a clear overall vision but do you understand them deeply?

### What this series will focus?

From my understanding and I'm more than happy to hear your opinions and talk about it, at the end this post is more about to learning than to teach so, please feel free to comments if you think my vision is incorrect.

I will focus on the three languages I know Javascript, Python, and Ruby.

- Variables and the difference between languages

- Conditional code.

- Loops, what is happening underneath and its types.

- Built Data types on each language.

- Functions/Methods release all its power.

- Programing Paradigms.


I think this is more or less what all languages have in common, so I think those are the Programming Fundamentals.

Are you Agree? Should I add, delete something? Please comment and help me to understand and structure this series for future references.
Sudoku Solver – Backtracking & deduction
Tags: algorithms, go, solver
Published: 2020-09-09 09:20:29


This post describes the algorithms used to solve a sudoku grid 9x9. A lot of deducted rules are used and also the backtracking. The project is written in golang and hosted on Github.

[Read more...](https://algomaths.tech/sugolver/)

{% github lunatikub/sugolver no-readme %}
SenseDeep Recommendations and Insights
Tags: cloudcomputing, aws, lambda, serverless
Published: 2020-09-09 08:30:20

---
title: SenseDeep Recommendations and Insights
published: true
description: The fastest way to troubleshoot serverless apps
cover_image: https://www.sensedeep.com/images/sensedeep/recommendations.png
canonical_url: https://www.sensedeep.com/blog/posts/2020/sensedeep-2.7.0.html
tags: cloudcomputing, aws, lambda, serverless
---

SenseDeep has smart recommendations to assist you in tuning and optimizing your AWS Lambda functions.

SenseDeep Recommendations will advise if:

- you can reduce allocated memory to save execution costs,
- should increase memory to reduce the risk of memory exhaustion,
- should increase your AWS concurrency limit to handle your peak load,
- should use reserved concurrency to ensure a function can scale effectively,
- have too many function cold starts which are impacting the user experience,
- are experiencing function throttling which is impacting performance,
- should increase the function timeout to prevent timeouts,
- should reduce the function timeout to reduce the risk of a run-away function, or
- should migrate the a heavily used function to EC2, EKS or Fargate to save execution costs.

## Recommendation Engine

SenseDeep uses machine learning and a suite of deep metrics to detect opportunities to optimize your function's performance.

## Summary

SenseDeep recommendations guides you as you optimize your service and troubleshoot issues.

SenseDeep is the fastest Serverless troubleshooting service. It is unique in that it uses direct access from your browser to AWS rather than duplicating Lambda and log data in a 3rd party solution.

SenseDeep will display Lambda results in real-time with full metrics, analysis and application log data in context. SenseDeep is the fastest serverless troubleshooter.

## Getting Started

There is nothing to install. Just navigate your browser to: [https://app.sensedeep.com/](https://app.sensedeep.com/).

To learn more about SenseDeep and how to use the app, please read the documentation at: [https://www.sensedeep.com/doc/](https://www.sensedeep.com/doc/).

Please let us know what you think, we thrive on feedback. [dev@sensedeep.com](mailto:dev@sensedeep.com).

### Links

* [SenseDeep Web Site](https://www.sensedeep.com/)
* [SenseDeep App](https://app.sensedeep.com/)
Automations
Tags: discuss, robotics
Published: 2020-09-09 07:59:29

So I don't often see many robotics topics, I wanted to share this video because I'm becoming quite facinated by mechanical engineering. Recently Nasa announced a competition to build a 100% mechanical rover, how on earth will that work? Well it's going to venus so I guess that doesn't matter. To remind you what is possible with mechanical engineering, check out this.

{% youtube laJX0txJc6M %}

I wish we could 3d print this stuff at home it's nuts!
Angular vs React vs Vue
Tags: angular, vue, react, javascript
Published: 2020-09-09 07:25:06

**A simple comparison...**

Angular is a framework, while React and Vue are libraries, therefore angular is heavier than the other two, due to its big codebase. The Angular’s core contains most of the functionalities you might need in your application, while with React and Vue, you have to find external libraries, maintained by probably, independent contributors. Therefore, when working with React and Vue, you have to be more careful when choosing libraries, being aware that libraries with a poor maintenance might be deprecated in future.

## Coding style
To build an app with Angular you have to learn Typescript, which is a superset of JavaScript, while with Vue and React you can use pure JS. Regarding the view, with Angular and Vue you write it with HTML, where in React you have to write JSX, which is a syntax that allows coexistence between HTML and JS. Thus, Angular and Vue are ideal if you want to reuse HTML from a huge codebase.

## Model
Vue and React use a Virtual DOM (VDOM), which is a node tree listing content, and elements and their attribute as objects and properties. The browser DOM is not updated directly but instead, they use the VDOM as abstraction layer. On the other hand, Angular is based on the MVC pattern and manipulates the DOM directly. Changes in your application will update it without any middleware.

## State
As common, when creating our apps, the components will have their scoped state, and Angular, and Vue works in a way that the data is mutable. User inputs and code can modify the state directly. In React, the state is immutable. To update it, you have to use a specific function that will do it asynchronously.

## Community
Angular and React have a powerful community behind. Angular was created by Google, and React by Facebook. Therefore, both have longer life expectancy. Whereas Vue, is an open source project, created by Evan You. Nevertheless, Vue gained a huge fame, because the creator’s idea was to take the best of the other two. From Angular, it took similar templates with good syntax, and from React, it got many features, specially the component-based approach. Vue is actively maintained, with almost 300 contributors and supported by many big companies.