r/graphic_design - I am looking to commission a designer for a holographic alien logo
Strategy

I am looking to commission a designer for a holographic alie…


I’m starting a beauty brand and really love the idea of a holographic alien head. The photo below is a rough idea of what I’d like, but I’d like to add a small mouth, eyelashes, and some stars in the eyes etc.

I’m using this as part of the branding. I’d like it to be something I can print onto stickers for packaging, as well as something that can be used on social media, website, and incorporated into the rest of the logo.

I am open to prices and ideas!

Thanks!

r/graphic_design - I am looking to commission a designer for a holographic alien logo



Source link

Amplify, Amplified | CSS-Tricks
Strategy

Amplify, Amplified | CSS-Tricks


First, quickly: AWS Amplify has a new Admin UI. Amplify always had a CLI that helps you build projects by setting up stuff like auth, storage, and APIs. That’s super useful, but now, you can do those things with the new Admin UI. And more, like model your data (!!), right from a local UI. That’s great for people like… me (I like my GUIs).

Now, slower.

Let’s start with the idea of Jamstack. Static Hosting + Services, right? Amplify is that: static hosting is part of the offering. You connect an Amplify project with a Git repo (you don’t have to, you could upload a zip, but let’s be real here). When you push to the designated branch on that repo (probably main or master), it deploys. That’s part of the magic of development today that we all know and love expect.

Static hosting might be all you need. Done.

But a lot of sites need more. Maybe your site is client-side rendered (for some of it), so the JavaScript hits an API for data and then renders. What data? What API? AWS has these things for you. For us front-enders, that’s probably AWS AppSync, which is like real-time GraphQL (cool). How do you set that up? Well, you can do it in the CLI, but it’s now way easier with the Amplify Admin UI.

Say you’re building a blog structure. Blogs have Posts, Posts have Comments. And so:

I’ll tell ya, coming from a WordPress upbringing and identifying mostly as a front-end developer, this feels doable to me. It’s not far from using Advanced Custom Fields in WordPress to model some data for a Custom Post Type. No wonder the line is so gray between front-end and back-end development.

Now that the Amplify Admin UI has this data modeled out, I can yank it down into my project and the whole schema is mocked out.

I’m bullish on GraphQL, but I can tell ya, all the setup of it is generally over my head. I’m generally very happy just being a consumer of a GraphQL API that is already set up, or doing minor tweaks. This, though, feels doable for me. The visual builder and the freebie scaffolding of the schema… yes please.

At this point then you have this project you can test and deploy. Once it’s deployed, there is a real data store in the cloud ready for data. How do you use it? It’s CRUD time! Create, Replicate, Update, and Delete, the core tenants of all good websites, right? Well, It’s Just JavaScript™. Here’s how you create a new blog, then a post in that blog:

import { DataStore } from '@aws-amplify/datastore';
import { Blog } from './models';

const newBlog = await DataStore.save(
 new Blog({
   "name": "Name of Blog"
 })
);

await DataStore.save(
 new Post({
   "title": "Blog Post Title",
   "blogID": newBlog.id
 })
);

That all works because the database exists and our app knows all about the data model. But what is DataStore in AWS Amplify? That’s yet another thing that AWS Amplify helps with. They have libraries to make all this easier. You don’t have to manually write fetch calls and do error handling and all that… Amplify libraries make life easier with all sorts of helpers (like you see above).

With all that setup, this slide I saw in their developer preview I got a peak at should make sense

AWS Amplify: Getting it Done

Back to the Jamstack thing… now we’ve got Static Hosting going and we can deploy our website to it. By the way, that can be anything. A vanilla HTML/CSS/JavaScript thing. A React, Vue, or Angular app. Native apps too. Amplify doesn’t care, it just helps with the deployment and services.

Here’s a look at the Admin UI, where you can see the navigation with all the services you can set up, deployment activity, the ability to model (and edit) data, etc.:

What else is in there? With auth for one. If you’re storing data and managing it with API’s, it’s highly likely you’ll be dealing with authentication as well. Amplify has you covered. Need some to run some code server-side? You’ve got your functions right in there of course. Lambdas (serverless functions) are AWS bread and butter. Analytics? You bet.

Another thing you’ll surely be interested in is the different development stories. Like what is local development like? Well, it’s super good. Guess what?! Those screenshots above of the Admin UI… those aren’t some online dashboard in the AWS console, those are locally hosted on your own site. All this data modeling and storage and editing and such happens locally. Then you can push to live to any environment. Production, of course, but also whatever sort of staging environments you need.

When you need production data pulled down locally, you just… do that (with a command given to you right in the Admin UI).

You can join the Amplify team to find out more – they’ll be demoing on Twitch with Q&A this week:

Thursday,  Dec. 3rd at 10-11am PST/ 7pm GMT
Friday,  Dec. 4th at 1-3pm PST / 9pm GMT
www.twitch.tv/aws

I’m thinking this new Admin UI world is going to open up AWS Amplify to a lot more people. Having a UI to manage your site just feels better. For someone like me, it gives me a more complete understanding of what is going on with the backend and services, and more control over things. And yet, give me total freedom on the front end to do what I want to do, and also handle so many of the things I don’t (deployment, SSL, etc.) ?



Source link

github
Strategy

Setup Static Code Analysis for Python


Static code analysis is the technique of approximating the runtime behavior of a program. In other words, it is the process of predicting the output of a program without actually executing it. That’s what DeepSource does, statically analyzing your project and reporting to you the potential code quality issues which can be solved within no time.

This is what we will be doing here in this blog. We will try to integrate DeepSource over a forked repo, specifically on a Python project, and run analysis over it. We will further fix some of the issues with the auto-fix tool and let transformers fix some of the styling issues for our project.

Let’s get started!

Steps to Integrate DeepSource With GitHub

DeepSource needs only a few steps to integrate continuous analysis on any repository. The process looks like this:

  • Create an account on DeepSource
  • Pick a Python repository to analyse.
  • Visit to DeepSource dashboard.
  • Choose your project from the repository list.
  • Add DeepSource configuration file.
  • Run the analysis.

Pretty simple, isn’t it! Let us now look into the steps in detail:

We will first look for a python project on GitHub.

github

SIH-2019 is a Data visualisation project of National Accounts Statistics that was built within 36 hours. A short time span like this can be the obvious factor of introducing code quality issues.

Let us now fork this repo and open our DeepSource dashboard and activate the repo.

choose a repo

From this list, you can choose the project on which you want to run the analysis. Here, I am choosing pnijhara/sih-2019 which I forked. After clicking on the repository, you will be guided to add a DeepSource configuration file that is .deepsource.toml file for DeepSource to run analysis on the repo. The configuration file contains exclude file patterns which tell DeepSource to not to analyse these set of files, they can be migrations, example code, data, templates etc.

Followed by test file patterns to specify test files. These all patterns are written as glob patterns. You can read more about how to write these patterns correctly here. After which you got to specify the language(s) that you want DeepSource to look for in your project. And finally followed by a transformer to improve your code style.

  • From the list of projects, choose the project.
  • Generate configuration

generate configuration

You can directly commit the configuration file to GitHub with a single click. This will add a commit to the master branch of your repo. Or you can manually add the file. DeepSource will automatically look at the .deepsource.tomlconfig file and start running the analysis.

Dashboard Overview

As soon as you commit configuration file to GitHub, DeepSource starts analyzing the repo. First run can take sometime but mostly within a 5 minutes span and generates a report that contains issues which can be fixed.

github

Issue Categorization

DeepSource divides the issues into categories such as Anti-patterns, Bug-risk, Style, Performance, Security, and Documentation. Out of which DeepSource on the basis of collected data recommends you some issues that can be considered as high priority.

github

Automated Code Formatting

As soon as the Analysis finishes DeepSource automatically sends a PR related to fixing style issues because of the Transformer(black) we have added.

automated code formatting

Issue Triage

Though DeepSource ensures less than 5% false positives, you can still ignore the issues that you find not relevant to the project or are made intentionally. Read more about ignoring issues here.

Open Issue on GitHub

DeepSource allows you to create GitHub issues directly from the dashboard on your repo for letting other contributors to discuss and fix it. Again, it is a simple task. You just need to open any issue found be DeepSource and click on the button “Create issue on GitHub”. This button allows you to create an issue on your repository’s page on the VCS provider directly. You can edit the issue description and that title before the issue is created, and you’d also be able to add tags or assign it to someone in your team.

Open Issue on GitHub

This will redirect you to your repo with an issue that you can open.

Note: You can create GitHub issues through this method only if the repository settings allow you to do so. Else you will get a 404 Error.

Autofixable Issues

Many issues that DeepSource found can be automatically fixed in a click. DeepSource sends a pull request for you with the fix which can be merged right away on approval. In the above forked project where DeepSource found 278 issues out of them 64 can be autofixed. Look for the “Autofix” button against an issue.

Autofixable Issues

And with a single click a PR is generated to the repo with an additional commit of formated code with black(transformer).

Autofixable Issues

prefix unused arguments

References

Note: I’m associated with DeepSource.io 



Source link

A red area chart against a dark gray background.
Strategy

How to Make an Area Chart With CSS


You might know a few ways to create charts with pure CSS. Some of them are covered here on CSS-Tricks, and many others can be found on CodePen, but I haven’t seen many examples of “area charts” (imagine a line chart with the bottom area filled in), particularly any in HTML and CSS alone. In this article, we’ll do just that, using a semantic and accessible HTML foundation.

Let’s start with the HTML

To simplify things, we will be using <ul> tags as wrappers and <li> elements for individual data items. You can use any other HTML tag in your project, depending on your needs.

<ul class="area-chart">
  <li> 40% </li>
  <li> 80% </li>
  <li> 60% </li>
  <li> 100% </li>
  <li> 30% </li>
</li>

CSS can’t retrieve the inner HTML text, that is why we will be using CSS custom properties to pass data to our CSS. Each data item will have a --start and an --end custom properties.

<ul class="area-chart">
  <li style="--start: 0.1; --end: 0.4;"> 40% </li>
  <li style="--start: 0.4; --end: 0.8;"> 80% </li>
  <li style="--start: 0.8; --end: 0.6;"> 60% </li>
  <li style="--start: 0.6; --end: 1.0;"> 100% </li>
  <li style="--start: 1.0; --end: 0.3;"> 30% </li>
</li>

Here’s what we need to consider…

There are several design principles we ought to consider before moving into styling:

  • Units data: We will be using unit-less data in our HTML (i.e. no px, em , rem , % or any other unit). The --start and --end custom properties will be numbers between 0 and 1.
  • Columns width: We won’t set a fixed width for each <li> element. We won’t be using % either, as we don’t know how many items are there. Each column width will be based on the main wrapper width, divided by the total number of data items. In our case, that’s the width of the <ul> element divided by the number of <li> elements.
  • Accessibility: The values inside each <li> is optional and only the --start and --end custom properties are required. Still, it’s best to include some sort of text or value for screen readers and other assistive technologies to describe the content.

Now, let’s start styling!

Let’s start with general layout styling first. The chart wrapper element is a flex container, displaying items in a row, stretching each child element so the entire area is filled.

.area-chart {
  /* Reset */
  margin: 0;
  padding: 0;
  border: 0;

  /* Dimensions */
  width: 100%;
  max-width: var(--chart-width, 100%);
  height: var(--chart-height, 300px);

  /* Layout */
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  flex-direction: row;
}

If the area chart wrapper is a list, we should remove the list style to give us more styling flexibility.

ul.area-chart,
ol.area-chart {
  list-style: none;
}

This code styles all of the columns in the entire chart. With bar charts it’s simple: we use background-color and height for each column. With area charts we are going to use the clip-path property to set the region that should be shown.

First we set up each column:

.area-chart > * {
  /* Even size items */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;

  /* Color */
  background: var(--color, rgba(240, 50, 50, .75));
}

To create a rectangle covering the entire area, we will reach for the clip-path property and use its polygon() function containing the coordinates of the area. This basically doesn’t do anything at the moment because the polygon covers everything:

.area-chart > * {
  clip-path: polygon(
    0% 0%,     /* top left */
    100% 0%,   /* top right */
    100% 100%, /* bottom right */
    0% 100%    /* bottom left */
  );
}

Now for the best part!

To show just part of the column, we clip it to create that area chart-like effect. To show just the area we want, we use the --start and --end custom properties inside the clip-path polygon:

.area-chart > * {
  clip-path: polygon(
    0% calc(100% * (1 - var(--start))),
    100% calc(100% * (1 - var(--size))),
    100% 100%,
    0% 100%
  );
}

Seriously, this one bit of CSS does all of the work. Here’s what we get:

Working with multiple datasets

Now that we know the basics, let’s create an area chart with multiple datasets. Area charts often measure more than one set of data and the effect is a layered comparison of the data.

This kind of chart requires several child elements, so we are going to replace our <ul> approach with a <table>.

<table class="area-chart">
  <tbody>
    <tr>
      <td> 40% </td>
      <td> 80% </td>
    </tr>
    <tr>
      <td> 60% </td>
      <td> 100% </td>
    </tr>
  </tbody>
</table>

Tables are accessible and search engine friendly. And if the stylesheet doesn’t load for some reason, all the data is still visible in the markup.

Again, we will use the --start and --end custom properties with numbers between 0 and 1.

<table class="area-chart">
  <tbody>
    <tr>
      <td style="--start: 0; --end: 0.4;"> 40% </td>
      <td style="--start: 0; --end: 0.8;"> 80% </td>
    </tr>
    <tr>
      <td style="--start: 0.4; --end: 0.6;"> 60% </td>
      <td style="--start: 0.8; --end: 1.0;"> 100% </td>
    </tr>
  </tbody>
</table>

So, first we will style the general layout for the wrapping element, our table, which we’ve given an .area-chart class:

.area-chart {
  /* Reset */
  margin: 0;
  padding: 0;
  border: 0;

  /* Dimensions */
  width: 100%;
  max-width: var(--chart-width, 600px);
  height: var(--chart-height, 300px);
}

Next, we will make the <tbody> element a flex container, displaying the <tr> items in a row and evenly sized:

.area-chart tbody {
  width: 100%;
  height: 100%;

  /* Layout */
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  flex-direction: row;
}
.area-chart tr {
  /* Even size items */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

Now we need to make the <td> elements cover each other, one element on top of each other so we get that layered effect. Each <td> covers the entire area of the <tr> element that contains it.

.area-chart tr {
  position: relative;
}
.area-chart td {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Let’s put the magical powers of clip-path: polygon() to use! We’re only displaying the area between the --start and --end custom properties which, again, are values between 0 and 1:

.area-chart td {
  clip-path: polygon(
    0% calc(100% * (1 - var(--start))),
    100% calc(100% * (1 - var(--end))),
    100% 100%,
    0% 100%
  );
}

Now let’s add color to each one:

.area-chart td {
  background: var(--color);
}
.area-chart td:nth-of-type(1) {
  --color: rgba(240, 50, 50, 0.75);
}
.area-chart td:nth-of-type(2) {
  --color: rgba(255, 180, 50, 0.75);
}
.area-chart td:nth-of-type(3) {
  --color: rgba(255, 220, 90, 0.75);
}

It’s important to use colors with opacity to get a nicer effect, which is why we’re using rgba() values. You could use hsla() here instead, if that’s how you roll.

And, just like that:

Wrapping up

It doesn’t matter how many HTML elements we add to our chart, the flex-based layout makes sure all the items are equally sized. This way, we only need to set the width of the wrapping chart element and the items will adjust accordingly for a responsive layout.

We have covered one technique to create area charts using pure CSS. For advanced use cases, you can check out my new open source data visualization framework, ChartsCSS.org. See the Area Chart section to see how area charts can be customized with things like different orientations, axes, and even a reversed order without changing the HTML markup, and much more!



Source link

managing connected apps
Strategy

Planning Poker Using Salesforce and Heroku


Feature teams often employ the concept of Planning Poker (or Scrum Poker) to help estimate the effort required to complete a given user story. Each team member is provided a set of cards, which are used to provide their estimate for the level of effort required for a given story. Most teams employ decks that utilize a Fibonacci-like sequence of the following values: 0, ½, 1, 2, 3, 5, 8, 13, 20, 40, 100.

Experienced scrum masters make teams aware that an eight-point story should be able to be broken into a three-point and five-point story. As a result, stories are typically not worthwhile to estimate as anything greater than a value of eight.

It is helpful for feature teams to agree on a baseline story. That baseline story helps define what a given story value resembles. In my personal experience, a three-point effort is often used, since it falls in the middle of usable sequence range. The team can reference this baseline story, understand the effort required, and conclude that is the definition of the corresponding baseline value.

Over the years, I have referenced this gamified technique for story estimation in the Agile Zone at DZone. Two of my favorite articles are noted below:

Why Salesforce?

The use of physical card decks is not as effective in a world working through a pandemic which has transformed feature teams from being located in a dedicated team room to a 100% remote situation. While mobile applications can be utilized in place of physical cards, the idea of having a contained system to host the planning session and process the results seems more ideal.

Organizations that employ the Salesforce ecosystem have the necessary infrastructure to introduce applications that can be developed quickly and avoid having to handle aspects like infrastructure needs. Organizations which do not currently utilize Salesforce can get started at no cost using one of the free editions (like Salesforce Developer Edition) with minimal effort.

While a custom application could be created in Salesforce and utilize Lightning Components to provide a polished appearance, an application has already been created by Aditya Naag (@adityanaag) and is a fully opened-source packaged application for Salesforce.

I wanted to try something different for my team and utilize Aditya’s application.

Why Heroku?

The challenge with using a Salesforce-based solution is that not all of the feature team members will have a Salesforce account. In fact, in the twelve years I have been utilizing Agile principles, there has been only one project where the entire team was self-contained to a single organization. Every other situation utilized external staff to handle aspects of the project which are not core to the corporate team. This is no different with my current team – having corporate team members who are located in North America and external consultants located in Asia and Europe.

These external consultants would also need a way to utilize the planning poker application, without the need to acquire a Salesforce client license. Given the ease by which Heroku can bring applications up to speed, using Heroku to provide a guest client seems quite logical.

Using Node.js as a backend service and Lightning Web Components Open Source, Aditya’s repository includes a Guest Player application, which can be run from Heroku in a matter of steps. Of course, if all participants in the Planning Poker session have their own Salesforce license, the Guest Player application setup and configuration can be skipped.

The Planning-Poker-Salesforce Repository

According to the README.md, the planning-poker-salesforce application is a consensus-based, gamified technique for estimating user stories in Scrum. This app allows you to utilize this technique for your planning and is completely built on Salesforce.

  1. Choose your own User Story Source Before starting a game, you can select any Salesforce object to be the source of the list of user stories, and save the consensus (Story points) directly to the user story records.
  2. Use pre-defined card sets or create your own This app comes with pre-defined card sets like Fibonacci and multiples of two. You can also create your own custom card sets.
  3. Hidden Cards All player’s responses are hidden until the timer runs out or until the host chooses to reveal them.
  4. Host Controls The host has options to show a timer, hide or reveal cards, reset votes and more. The host can also play the game if they choose to.

The planning-poker-salesforce repository, along with some type of Salesforce Org and an optional free Heroku Dyno provides everything needed for a feature team to host a planning poker session.

The remainder of this document will walk through setting up Salesforce and Heroku, then demonstrating the planning poker solution in action. For the purpose of maintaining confidentiality with my client, example data will be utilized for the remainder of this article.

Setup and Configuration

There are two options to introduce the planning-poker-salesforce application into Salesforce:

  • Using a package
  • Using SFDX commands

Both options are described in the following link:

https://github.com/adityanaag3/planning-poker-salesforce#installation

At this point, the planning-poker-salesforce application is ready for use in Salesforce for participants with a Salesforce license. Users with the “Planning Poker Player” permission set will be able to join the session created by a user with the “Planning Poker Host” permission set.

(Optional) The Guest Player Application

If there is a need for at least one player without a Salesforce license, a certificate needs to be created which will allow the same Salesforce org to communicate with the Node.js application that will be running in Heroku. Implementations where all users utilize a Salesforce account do not need to follow this step and can continue to the “Hosting a Planning Poker Event” section (below).

From my Mac Book Pro, I executed the following command in a new folder I created for this article:

openssl req -nodes -new -x509 -keyout private.pem -out server.cert

Below, is the output I received from executing this command:

As a result of the command above, two files are created:

  • server.cert — Public key of the SSL certificate
  • private.pem — Private key (encoded and created in a Base-64 based PEM format which is not human-readable)

Within Salesforce a Connected App needs to be created from the Setup | Apps | App Managerscreen. I decided to call the connected app “Planning Poker Client” (Planning_Poker_Client) and configured as shown below:

managing connected apps

The “Use digital signatures” option was selected and the server.cert (created above) was selected as the digital certificate. The Callback URL was also provided once the “Enable OAuth Settings” was activated.

The Manage screen for the Planning Poker Client is shown below:

planning poker client

The only difference here was to change the value for the “Permitted Users” property. Clicking the “Edit Policies” button allowed the “Planning Poker Player” permission set to be utilized:

profiles

Navigating to the App Manager now shows three applications installed and ready in Salesforce:

lightning experience app manager

Finally, the Node.js application for non-Salesforce users needs to be created. The process can be started by using the following link:

https://heroku.com/deploy?template=https://github.com/adityanaag3/planning-poker-heroku/master

Once logged into Heroku, the following properties are set within the newly created Heroku Dyno:

private_key

The PRIVATE_KEY properties are the contents of the private.pem file created above. The SF_LOGIN_URL and SF_NAMESPACE have multiple values, which are defined in the following URL:

https://github.com/adityanaag3/planning-poker-salesforce#player-app-for-guests

Finally, the SF_USERNAME is the unique username in Salesforce which was used to create the application. This can also be any user which maintains the Planning Poker Player permission set.

With the Heroku Dyno up and running, everything is set to start a planning poker session:

logging

Hosting a Planning Poker Event

Within Salesforce, I created a very simple backlog item for estimation by the planning-poker-salesforce application:

backlog

Keep in mind, use of another object in Salesforce is also possible, which is linked in the Game object creation step (below).

Next, I created a game called “Planning Session 1”.

planning sessions

Aside from providing a name for the entry, I specified that the host could vote during the planning poker session. I also set all of the attributes for the Game Data Sources. This is something I really appreciated about Aditya Naag’s design – to be able to utilize different sources for the data used by the planning-poker-salesforce application. One example would be the seamless integration with Agile Accelerator.

With a planning poker game created, the next step was to navigate to the Host Planning Poker app in Salesforce and select the Host Planning Poker tab.

host planning poker

Once there, the “Planning Session 1” option is selected and the “Launch Game” button is clicked. At this point, other users can join the planning poker session. Guest users simply need to launch the URL for the Heroku Dyno, which will present the following screen:

enter game key

The game key is displayed in the screenshot below, which also provides a summary of all of the players who have joined the session:

host planning poker

Playing Planning Poker

Upon single-clicking the “Start Playing button”, the first (and only) backlog item is presented:

host planning poker

Each guest user can vote confidentially. Two sessions are displayed below:

planning poker

Once all of the votes have been cast, the host screen appears as shown below:

planning poker

At this point, the team discusses their estimates. Once a consensus is reached, the Host Controls are updated as shown below:

host controls

In this example, a score of 2 was selected and the “Save Consensus” button was clicked. The save action automatically updated the source record — include objects external to this application (like Agile Accelerator). However, if another vote was required, the Vote Controls can be used to clear out the prior results.

The “Next Story” button can be used to repeat the process for the remaining backlog items. When finished, the host simply needs to utilize the “End Game” button.

Conclusion

In the nearly thirty years I have served in a technologist role, I truly respect the cost of employing technology to meet the needs of an organization. Along this journey, the one key point that I try to instill in future generations is to avoid doing things which do not drive innovation and progress for the underlying business needs of the corporation.

Salesforce provides functionality that can be configured and customized to fit the needs of an organization — saving significant costs when compared to building, managing, and supporting a custom CRM application. Heroku provides similar value to allow feature developers to focus on meeting the needs of the business and not have to gain an understanding of a complex cloud option. Aditya Naag’s planning-poker-salesforce provides an open-source option for feature teams who need a robust solution for story effort estimation. These three aspects lead to a rare situation where a need is being fully met without a single line of original source code. My current team has really enjoyed using this approach with our Planning Poker sessions.

In the end, an example has been introduced that helps keep the cost to support the feature team minimal and allows the team members to remain focused on making business-driven improvements. In my book, that is the key factor toward facilitating success.

Have a really great day!





Source link