Development Questions
Strategy

Development Questions


Development Questions

I'm looking to get this type of effect built to spice up a website. This would be the background container, and as you mouse it reveals the background image and then fades away. I'd want it to feel like liquid a bit. What type of developer skills would i be looking for to achieve this?

https://preview.redd.it/j4adxsnbyts41.jpg?width=1680&format=pjpg&auto=webp&s=b8409aa1c1ced8e90306247fbdceec5d5a23fd61

submitted by /u/william_the_butcher
[comments]



Source link

Post image
Strategy

Use hierarchical product attributes? : webdev


TLDR: We are looking for a solid way to support hierarchical attributes included in 3rd party product data. Any code snippet or shared experiences were helpful :o)

We’re currently planning a WooCommerce Shop and want to offer customers a smooth product-filtering experience. One of the challenges is dealing with various different measurement systems – but what we’re after can quite nicely get visualized with product colours as well:

Imagine 10 T-shirts in various shades of red and by different brands. One can consider given that each brand uses its own fancy names for red (crimson red, cherry, melon…). One can further consider given, that customers who filter for product colours only want to see a single colour swatch, when filtering for red T-Shirts. Hence, we in our ERP (which manages all fundamental product data) plan to consolidate shades of popular colours to colour families. Crimson red gets a child of attribute red and both values are sent over to WooCommerce. The parent value (red) is used for product filtering, while the brand-assigned colour name was used on product pages (possibly to distinguish several tones of red in a single product).

While we can add this attributes-hierarchy in our ERP, we also need WooCommerce to chew this non-native data. Has anyone of you done similar before or knows a tool that could get us started, so that we don’t have to build from scratch? We’re equally interested in alternative approaches to solve the outlined problem. At this point we’re still free to decide, which route to take.

Thanks for any input!

Post image

Product filters: Fancy names found by query for red.

Post image

Display on product pages: The brand-assigned colour name still is available.



Source link

Using CSS to Set Text Inside a Circle
Strategy

Using CSS to Set Text Inside a Circle


You want to set some text inside the shape of a circle with HTML and CSS? That’s crazy talk, right?

Not really! Thanks to shape-outside and some pure CSS trickery it is possible to do exactly that. 

However, this can be a fiddly layout option. We have to take lots of different things into consideration, like character count, word count, typeface variations, font sizing, font formatting, and responsive requirements to name a few. One size, does not fit all here. But hey, let’s do it anyway.

Here’s the goal: we want to display a <blockquote> and an author citation inside a circle shape. We also want to make the layout as flexible as we can. This layout won’t require any additional files and keeps the HTML markup squeaky clean.

This is what we’re striving for:

The shape-outside feature is not supported in Internet Explorer or Microsoft Edge 18 and below at the time of this writing.

First up, the HTML

We’re going to end up needing a wrapper element to pull this off, so let’s use the semantic <blockquote> as the inner element. The outside wrapper can be a div:

<div class="quote-wrapper">
  <blockquote class="text" cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p>Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.</p>
    <footer>– Jesse James Garrett</footer>
  </blockquote>
</div>

If you’re interested in a deep-dive on the HTML of quotes, you’re in luck. We’re going to set the quote itself in a <p> and the name of the author inside a <footer>. We’ve got class names for the CSS styling hooks we’ll need.

Next, some baseline CSS

Let’s start with the div wrapper. First, we’ll set the minimum (responsive) square size at 300px so it fits on smaller screens. then, we’ll add relative positioning (because we will need it later). 

.quote-wrapper {
  height: 300px;
  position: relative;
  width: 300px;
}

Now we’ll make the blockquote fill the whole wrapper and fake a circle shape with a radial gradient background. (That’s right, we are not using border-radius in this example).

.text {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  height: 100%;
  width: 100%;
}

One thing to note is that 70% displays a much rougher edge. I manually added very small percentage increments and found that 70.3% looks the smoothest.

Notice the edge on the right is much smoother than the edge on the left.

Now we have our base circle in place. Add these additional style rules to .text.

.text {
  color: white;
  position: relative;
  margin: 0;
}

Here’s what we have so far:

Giving text the CSS treatment

Let’s style the paragraph first:

.text p {
  font-size: 21px;
  font-style: italic;
  height: 100%;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

Let’s use the blockquote’s ::before pseudo-element to create our shaping. This is where the shape-outside property comes into play. We plot out the polygon() coordinates and float it to the left so the text wraps inside the shape.

.text::before {
  content: "";
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 7%;
}

Let’s change the radial background color to red. The path editor polygon points and connecting lines are also blue. We are changing this color temporarily for greater contrast with the editor tool.

background: radial-gradient(
  ellipse at center,
  rgba(210, 20, 20, 1) 0%,
  rgba(210, 20, 20, 1) 70%,
  rgba(210, 20, 20, 0) 70.3%
);

I like Firefox’s developer tools because it has super handy features like a shape-outside path editor.  Click on the polygon shape in the inspector to see the active shape in the browser window. Big thumbs up to the Mozilla dev team for creating a very cool interface!

The Firefox shape editor tool also works for clip-path and <basic-shape> values.

Here’s what we have at this point:

Those points along the shape are from Firefox’s editing tool.

We can do the same sort of thing for the paragraph’s ::before pseudo-element. We use the shape-outside to make the same polygon, in reverse, then float it to the right.

.text p::before {
  content: "";
  float: right;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    2% 0%,
    100% 0%,
    100% 100%,
    2% 100%,
    50% 94%,
    76.6% 82.7%,
    94% 65.6%,
    100% 50%,
    94% 32.6%,
    76.6% 17.3%,
    50% 6%
    );
  shape-margin: 7%;
}

Looking good, but where did the footer go? It overflowed the <blockquote> (where the circular colored background is), so we’re unable to see that white text on a white background.

Styling the footer

Now we can style the <footer> and give it an absolute position to bring it back on top of the circle.

.quote-wrapper blockquote footer {
  bottom: 25px;
  font-size: 17px;
  font-style: italic;
  position: absolute;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  width: 100%;
}

Again, feel free to change the background color to suit your needs.

This is where the fiddly part comes in. The text itself needs to be styled in such a way that the number of words and characters work inside the shape. I used these CSS rules to help make it fit nicely:

  • font-size
  • shape-margin (we have two exclusion areas to adjust)
  • line-height
  • letter-spacing
  • font-weight
  • font-style
  • min-width  and min-height (to size of the .quote-wrapper container)

Adding the quote mark for some flourish

Did you see the giant quotation mark in the original demo? That’s what we want to make next.

We’ll take advantage of the ::before  pseudo-element for .quote-wrapper. Yet again, this will take a fair amount of fiddling to make it look right. I found line-height has a huge effect on the mark’s vertical position.

.quote-wrapper::before {
  content: "201C";
  color: #ccc;
  font-family: sans-serif, serif;
  font-size: 270px;
  height: 82px;
  line-height: 1;
  opacity: .9;
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 1;
}

There’s actually a difference between curly (“smart”) quote marks and straight (dumb) ones. I’d suggest using curly quote marks for dialogue and straight quote marks for coding.

Handling responsive styles

We should probably make our quote bigger on larger screens. I’m setting a breakpoint at 850px, but you may want to use something different.

@media (min-width: 850px) {
  .quote-wrapper {
    height: 370px;
    width: 370px;
  }
  .quote-wrapper::before {
    font-size: 300px;
  }
  .text p {
    font-size: 26px;
  }
  .quote-wrapper blockquote footer {
    bottom: 32px;
  }
}

There we have it!

We set HTML text inside a circular shape using a combination of old and new CSS techniques to make an appealing <blockquote> that commands attention. And we achieved our display goal without any additional dependencies, while still keeping the HTML markup clean and semantic.

I hope this article encourages you to explore new layout possibilities with shape-outside. Stay tuned for shape-inside.



Source link

Post image
Strategy

Bubble Pictures with Side Captions : web_design


I mocked this up in Xara, but I would like to code this by hand. I can not figure out how to get even margins on the two side circles and have them with side captions that line up properly. I don’t want to use exact placements, since I want this to be a responsive design. I’ve tried some different combinations of things with tables, aside, etc. and different forms of css. Maybe I’m just doing something wrong. Any tips? I’m so close, but not quite there. What I currently have is below

Post image

<style>

div.big-con{

position: relative;

max-height: 320px;

max-width: 60%;

}

div.lit-con{

max-width:15%;

position:relative;

float:right;

}

.big-rnd{

width:75%;

float:left;

position:relative;

}

.lit-rnd2,

.lit-rnd1{

right:50%;

position:relative;

width:20%;

margin-top:15%;

}

p.caption{

color:darkcyan;

font-size:32px;

}

p.caption{

right:75%;

}

</style>

<div>

<div><div class=”big-con”>

<img class=”big-rnd” src=”images/dog.png” alt=””></div></div>

<aside class=”lit-con”>

<table>

<tr><th><img class=”lit-rnd1″ src=”images/dog.png” alt=””></th><th><p class=”caption”>Wellness Exam</p></th></tr>

<tr><th><img class=”lit-rnd2″ src=”images/dog.png” alt=””></th><th><p class=”caption”>Nope</p></th></tr>

</table>

</aside>

		</div>



Source link

Post image
Strategy

Is there anyone who uses Tailwind CSS? Please help! : webdev


Hi

Let’s see what I did:

I follow these steps:

  1. writing npm install tailwindcss with the terminal part of my editor (VS Code)

  2. writing the code below into my styles.css file:

@/import "tailwindcss/base";

@/import "tailwindcss/components";

@/import "tailwindcss/utilities";

3. writing npx tailwindcss build styles.css -o output.css with the terminal part of my editor (VS Code)

I can use Tailwind CSS classes, but when I want to customize nothing happens

Post image

for example, I wrote it and saved it, but there is no text-x class

What should I do?



Source link

Post image
Strategy

Server, cli, native-like frontend : webdev


https://github.com/deepkit/deepkit

Post image

Product page: https://deepkit.ai/

It’s a machine learning platform for experiment tracking, execution, and debugging. The GUI is a real-time interface with native-like desktop interface which means all data is streamed using reactive RPC APIs via websockets. There’s no REST or polling involved.

Additional new Typescript open-source byproducts that were created specifically for this product and might be of interest to you:

  • Marshal.ts – The fastest universal Typescript data serializer and validator incl. Mongo-ORM abstraction

  • Glut.ts – A reactive real-time client-server framework with distributed entity/file abstraction, distributed data exchange, and automatic entity syncing, based on RxJs and websockets

  • angular-desktop-ui – A GUI library for native-like GUI widget based on Angular 9+

  • npm-local-development A `npm link` alternative that actually works with complex setups.

  • typedoc-plugin-lerna-packages – TS auto doc generator for lerna packages

Some notes:

  • Package management with Lerna

  • oclif for cli (with custom build), Angular 9+ for GUI, Electron 8+, custom client-server framework using Glut.ts, Mongo DB

  • Development time roughly 1 year (80h/week, total EUR ~450k), a single developer (for the main product + those OSS libs)

  • multi component build based on classic Makefile and webpack

I post it here to give people the opportunity to look how such a complex product is organised, that it is possible to write something like that in TS as a solo developer, and to ask questions about the development process and the like.



Source link

Setting Skill runtime
Strategy

Alexa Skill With Node.js – DZone Web Dev


Alexa Skills can be developed using Alexa Lambda functions or a REST API endpoint. Lambda function is Amazon’s implementation of serverless functions available in AWS. Amazon recommends using Lambda functions despite the fact that they are not easy to debug. While you can log to a CloudWatch log, you can’t hit a breakpoint and step into the code.

This makes live debugging of Alexa requests a very hard task. In this post, we will implement a custom Skill for Amazon Alexa by using Node.js, npm, and AWS Lambda Functions. This Skill is basically a “Hello World” example. With this post, you will be able to create a custom Skill for Amazon Alexa, implement functionality by using Node.js, and start your custom skill both from your local computer and from AWS. This post contains materials from different resources that can be seen in the Resources section.

Prerequisites

Here are the technologies used in this project:

  1. Amazon Developer Account – How to get it.
  2. AWS Account – Sign up here for free.
  3. ASK CLI – Install and configure ASK CLI.
  4. Node.js v10.x.
  5. Visual Studio Code.
  6. npm Package Manager.
  7. Alexa ASK for Node.js (Version >2.7.0).
  8. ngrok.

The Alexa Skills Kit Command Line Interface (ASK CLI) is a tool for you to manage your Alexa skills and related resources, such as AWS Lambda functions. With ASK CLI, you have access to the Skill Management API, which allows you to manage Alexa skills programmatically from the command line. We will use this powerful tool to create, build, deploy and manage our “Hello World” Skill. Let’s start!

Creating the Skill With ASK CLI

For creating the Alexa Skill, we will use de ASK CLI previously configured. First of all, we have to execute this command:

This command will run and interactive step-by-step creation process:

  1. The first thing the ASK CLI is going to ask us is the runtime of our Skill. In our case, Node.js v10:

Setting Skill runtime

The second step is the template that our Skill is based on. In our case, we will select the Hello World template:

Selecting Hello World template

Finally, the ASK CLI is going to ask us for the name of the Skill:

Adding name of our Skill

Project Files

These are the main files of the project:

  • .ask: Folder which contains the ASK CLI’s config file. This config files will remain empty until we execute the command ask deploy
  • .vscode/launch.json: Launch preferences to run locally your Skill for local testing. This setting launch lambda/custom/local-debugger.js. This script runs a server on http://localhost:3001 for debug the Skill.
  • hooks: A folder that contains the hook scripts. Amazon provides two hooks, post_new_hook and pre_deploy_hook.
    • post_new_hook: executed after the Skill creation. Inn Node.js runs npm install in each sourceDir in skill.json
    • pre_deploy_hook: executed before the Skill deployment. In Node.js runs npm install in each sourceDir in skill.json as well.
  • lambda/custom: A folder that contains the source code for the skill’s AWS Lambda function:
    • index.js: the lambda main entry point.
    • utilities/languageStrings.js: i18n dictionaries used by the library i18next, which allows us to run the same Skill in different configuration languages.
    • package.json: this file is core to the Node.js ecosystem and is a basic part of understanding and working with Node.js, npm, and even modern JavaScript
    • utilities/util.js: file with helpful functions.
    • local-debugger.js: used for debug our skill locally.
    • errors: folder that contains all Error handlers.
    • intents: folder that contains all Intent handlers.
    • interceptors: here you can find all interceptors.
  • models: A folder that contains interaction models for the skill. Each interaction model is defined in a JSON file named according to the locale. For example, es-ES.json.
  • skill.json: The skill manifest. One of the most important files in our project.

Lambda Function in JavaScript

The ASK SDK for Node.js makes it easier for you to build highly engaging skills by allowing you to spend more time implementing features and less time writing boilerplate code.

You can find documentation, samples, and helpful links in their official GitHub repository

The main JavaScript file in our lambda project is index.js, located in lambda/custom folder. This file contains all handlers, interceptors and exports the Skill handler in exports.handler.

The exports.handler function is executed every time AWS Lambda is initiated for this particular function. In theory, an AWS Lambda function is just a single function. This means that we need to define dispatching logic so a single function request can route to appropriate code, hence the handlers.

It is important to take a look into the LaunchRequestHandler as an example of Alexa Skill handler written in Node.js:


Building the Skill With Visual Studio Code

Inside package.json, we will almost always find metadata specific to the project. This metadata helps identify the project and acts as a baseline for users and contributors to get information about the project.

Here is how this file looks:

With JavaScript or Node.js, the build is a little bit different. For building our Skill, we can run the following command:

This command installs a package, and any packages that it depends on. If the package has a package-lock or shrink-wrap file, the installation of dependencies will be driven by that.

It could be the way to build our Alexa Skill.

Running the Skill With Visual Studio Code

The launch.json file in .vscode folder has the configuration for Visual Studio Code, which allow us to run our lambda locally:

This configuration file will execute the following command:

This configuration uses the local-debugger.js file runs a TCP server listening on http://localhost:3001

For a new, incoming Skill request, a new socket connection is established. From the data received on the socket, the request body is extracted, parsed into JSON, and passed to the Skill invoker’s lambda handler. The response from the lambda handler is parsed as an HTTP 200 message format as specified here. The response is written onto the socket connection and returned.

After configuring our launch.json file and understanding how the local debugger works, it is time to click on the play button:

Running initial Skill

After executing it, you can send an Alexa POST requests to http://localhost:3001.

Debugging the Skill With Visual Studio Code

Following the steps before, now, you can set up breakpoints wherever you want inside all JS files in order to debug your Skill:

Debugging Skill

Testing Requests Locally

I’m sure you already know the famous tool call Postman. REST APIs have become the new standard in providing a public and secure interface for your service. Though REST has become ubiquitous, it’s not always easy to test. Postman makes it easier to test and manage HTTP REST APIs. Postman gives us multiple features to import, test, and share APIs, which will help you and your team be more productive in the long run.

After running your application, you will have an endpoint available at http://localhost:3001. With Postman, you can emulate any Alexa Request.

For example, you can test a LaunchRequest:


Deploying Your Alexa Skill

With the code ready to go, we need to deploy it on AWS Lambda so it can be connected to Alexa.

Before deploy the Alexa Skill, we can show the config file in .ask folder it is empty:

Deploy Alexa Skill with ASK CLI:

As the official documentation says:

When the local Skill project has never been deployed, ASK CLI creates a new Skill in the development stage for your account and then deploys the Skill project. If applicable, ASK CLI creates one or more new AWS Lambda functions in your AWS account and uploads the Lambda function code. Specifically, ASK CLI does the following:

  1. Looks in your Skill project’s config file (in the .ask folder, which is in the skill project folder) for an existing Skill ID. If the config file does not contain a Skill ID, ASK CLI creates a new Skill using the skill manifest in the skill project’s skill.json file and then adds the skill ID to the skill project’s config file.
  2. Look in your Skill project’s manifest (skill.json file) for the skill’s published locales. These are listed in the manifest.publishingInformation.locales object. For each locale, ASK CLI looks in the Skill project’s models folder for a corresponding model file (for example, es-ES.json), then uploads the model to your skill. ASK CLI waits for the uploaded models to build, then adds each model’s eTag to the skill project’s config file.
  3. Looks in your Skill project’s manifest (skill.json file) for AWS Lambda endpoints. These are listed in the manifest.apis..endpoint or manifest.apis..regions..endpoint objects (for example, manifest.apis.custom.endpoint or manifest.apis.smartHome.regions.NA.endpoint). Each endpoint object contains a sourceDir value, and optionally, a URI value. ASK CLI uploads the contents of the sourceDir folder to the corresponding AWS Lambda function and names the Lambda function the same as the URI value. For more details about how ASK CLI performs uploads to Lambda, see AWS Lambda deployment details.
  4. Looks in your Skill project folder for in-skill products, and if it finds any, uploads them to your skill. For more information about in-skill products, see the In-Skill Purchasing Overview.

After the execution of the above command, we will have the config file properly filled:


Test Requests Directly From Alexa

ngrok is a very cool, lightweight tool that creates a secure tunnel on your local machine along with a public URL you can use for browsing your local site or APIs.

When ngrok is running, it listens on the same port that your local web server is running on and proxies external requests to your local machine

From there, it’s a simple step to get it to listen to your web server. Say you’re running your local web server on port 3001. In your terminal, you’d type in: ngrok http 3001. This starts ngrok listening on port 3001 and creates the secure tunnel:

So now, you have to go to Alexa Developer console, go to your skill > endpoints > https, add the HTTPS URL generated above. Eg: https://20dac120.ngrok.io.

Select the My development endpoint as a sub-domain…. option from the dropdown and click the save endpoint at the top of the page.

Go to the Test tab in the Alexa Developer Console and launch your skill.

The Alexa Developer Console will send an HTTPS request to the ngrok endpoint (https://20dac120.ngrok.io), which will route it to your skill running on Web API server at http://localhost:3001.

Resources

Conclusion

This was a basic tutorial to learn Alexa Skills using Node.js. As you have seen in this example, the Alexa Skill Kit for Node.js and the Alexa Tools like ASK CLI can help us a lot, and also they give us the possibility to create skills in an easy way. I hope this example project is useful to you.

You can find the code in my Github.

I hope it will be useful! If you have any doubts or questions, do not hesitate to contact me or put a comment below!

That’s all folks!

Happy coding!



Source link