Post image
Strategy

I created the first mood-inducing text editor (Showoff Satur…


Post image

Hi everyone! First off, I hope you and your loved ones are doing fine under these circumstances.

I wanted to share this web application I recently made, a mood inducing word processor called Frost. It’s the first of its kind text editor meant for people who prefer writing to music and wish to get their first draft going.

Brief list of features

  • Completely distraction-free

  • Ad-free Music

  • Ability to download your file

  • Dark theme

  • Minimalistic interface

  • Overall ad-free experience

  • Numerous themes varying from mood to mood

It’s completely free to use and has been for several months now. It will remain free to use forever.

Inspiration behind the application: I just wanted to have a platform for writers and poets who wish to write to music. Nobody has the time to search for the ‘perfect’ soundtrack while writing and you just can’t afford to get the muse get away while doing so.

The website is frostwriter.com and works best on laptop/desktop devices. Headphones are recommended for the complete experience!

I would love to get feedback on it and see your opinion on it. Thanks for reading!



Source link

underside view of Jupter
Strategy

Space Photos of the Week: Keeping an Eye on Jupiter’s Storms


Jupiter has one of the most bizarre atmospheres in the entire solar system. Gas giants like Jupiter are believed to have some kind of semi-solid core, but are mostly made of gas like hydrogen, helium, and ammonia. The planet is also the fastest spinning orb in the solar system, which creates a lot of turbulence and some very complex storm systems. And for the past few years, NASA’s Juno spacecraft has been orbiting the planet to keep a close eye on Jupiter’s behavior. NASA, by the way, sourced the name from a Greek myth: Jupiter, king of the gods, was a philanderer and whenever he brought another woman back to his lair he’d hide his activity by engulfing himself with a thick layer of clouds. Too bad for him he didn’t realize that his wife, Juno, had the ability to see through the clouds. Joke’s on you Jupiter!

Earlier this month, NASA announced that two telescopes, the Hubble Space Telescope and the ground-based Gemini telescope, will partner up with the Juno craft to help scientists get an even more comprehensive look at the planet. Researchers want to understand how Jupiter’s atmosphere works, and the best way to do this is by viewing it through different wavelength filters. Fortunately both the Hubble Space Telescope and Gemini have the filters needed to see into Jupiter’s haze. By deploying lenses that screen for UV light, infrared, and other frequencies, scientists will get a more complete picture of what is happening.

This week we will encircle the famous gas giant and peer down onto the planet with Juno’s eyes. Grab your space suit, we’re going in!

Juno was 29,000 miles from Jupiter when it snapped this photo in May 2019. You can see the windy bands of Jupiter, as well as the series of white storms also called the “String of Pearls.”Photograph: Gerald Eichstadt/Sean Doran/NASA/JPL-Caltech/SwRI/MSSS
This is the view from only 11,000 miles above the surface. This “blue” region is made up of swirling, connected storms. The white clouds to the left are high-altitude clouds, which cast shadows onto the next layer of atmosphere below them.Photograph: Gerald Eichstadt/Sean Doran/NASA/JPL-Caltech/SwRI/MSSS
Jupiter completes a full rotation on its axis every 10 hours, which makes for a very churny planet, as you can see in this slightly dizzying photo of the windy bands that move at speeds of 300 miles per hour.Photograph: Björn Jónsson/NASA/JPL-Caltech/SwRI/MSSS
During its 11th close flyby, Juno took this color enhanced photo showing Jupiter in a rosy light.Photograph: Matt Brealey/Gustavo B. C./NASA/JPL-Caltech/SwRI/MSSS
This jet stream, known as Jet N3, is an intricate swirl of storms. It wasn’t until Juno arrived at Jupiter that scientists realized the storms in the atmosphere weren’t just in the atmosphere, but rather they extended deep into the planet–some 1,900 miles deep.Photograph: Gerald Eichstädt/NASA/JPL-Caltech/SwRI/MSSS
There is no mistaking Jupiter’s great red spot. This color enhanced image brings out the deep orangy-red of this iconic storm—scientists think that the reddish color could be caused by the sun’s radiation interacting with the ammonium hydrosulfide in the planet’s atmosphere. You can also see part of the tan-colored belt and a white cyclone that is not much smaller than the Earth. These different colors are likely created by the sunlight reflecting off of chemicals in the clouds.Photograph: Gerald Eichstadt/Sean Doran/ NASA/JPL-Caltech/SwRI/MSSS

Head over here to look at more space photos.



Source link

Post image
Strategy

[Showoff Saturday] I made a free music practice tracker webs…


Site link – www.tuneupgrade.com

I launched this late last year and have been updating but just discovered this sub (feature set and updates here: https://news.tuneupgrade.com/ ). It’s a music practice tracker for musicians of any skill level. While there were other apps that did similar things, I didn’t feel like they behaved in quite the way I wanted, giving a good blend of structure to practice when you wanted it, or freedom to just mess around and jam, as well as organize things you are playing well.

The software is free and I’m building this as a pet project to help people – I don’t want to charge for it unless i start implementing features that cost me more. I’ve gotten around 20-30 people regularly coming back to log their practice and many more signups, which feels pretty great, and about 600 hours of practice time logged from users in 6 months.

Happy to answer any questions about the development process I use, the underlying technologies, or anything else you want to ask. I’ve also built a complimentary chrome extension that lets you quickly add a chord chart or a link online as a song to your library.

I am a full time software developer in the industry for 15 years, and I balance building this up with using it myself to track my music practice.

Interested in any feedback or ideas on how to expand the software or make more folks aware of it, as music can be an expensive hobby and in these COVID times I hope a regular practice routine will help people feel more fulfilled.

Screenshots:

Post image

Dashboard showing weekly progress

Post image

Practicing

Post image

Song Library with tagging and filtering



Source link

Post image
Strategy

[Showoff Saturday] I made an online formatter and syntax hig…


I’ve created a website to quickly format any JSON / XML / HTML / CSS / SQL.

https://format-express.dev/

I focused on the UX to make it as easy to use as possible :

  • maximize the height of the input area to feet the navigator window

  • when input is pasted in the textarea, the input is immediately formatted (no need to click “Format”)

  • the right formatter is chosen automatically (no need to select the input type).

  • error tolerance : everyone sometimes copy a bunch of text without the first/last character; the formatter will try to fix an invalid JSON / XML

  • once the input has been formatted, the nodes can be collapsed

  • a breadcrumb indicates the current position of the node under the cursor

  • a darkmode is available

  • the site is fast and lightweight

Any feedback will be greatly appreciated.

Post image

If you need input to test the site, here are 2 examples :

JSON :

{"id":0001,"type":"donut","name":"Cake","ppu":0.55,"batters":{"batter": [{"id":1001,"type":"Regular"},{"id":1002,"type":"Chocolate"},{"id":1003,"type":"Blueberry"},{"id":1004,"type":"Devil's Food"}]},"topping":[{"id":5001,"type":"None"},{"id":5002,"type":"Glazed"}]}`

HTML :

<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/><title>FormatExpress</title> <link rel="canonical" href="https://format-express.dev/"/> </head> <body itemscope itemtype="http://schema.org/WebPage"><section id="form-container" class="container" itemprop="mainContentOfPage"> <div class="row"><h1 itemprop="description">Paste XML, JSON, CSS, SQL... and get it immediately formatted</h1><span class="brand" itemprop="name"><a href="/">FormatExpress</a></span> </div><div id="input-container" class="inputWithoutHeader" data-viewer-enabled="false"> <div id="express-input-header"> <div id="task-bar"> <div class="row"> <div id="input-status" class="four columns"> <span id="input-status-loading"></span> <span id="input-status-text" class=""> </span> </div></div></div></div><div id="express-input-placeholder"> <textarea name="express-input" id="express-input" class="u-full-width" placeholder="Paste here" wrap="off" spellcheck="false"></textarea> <div id="viewer"> <div id="viewer-viewport"> <div id="viewer-content"> </div></div><div id="express-breadcrumb"></div></div></div><span id="toggle-fullwidth" title="Toggle full width page"></span> </div></body></html>



Source link

how to merge two photos and remove the line between them?
Strategy

how to merge two photos and remove the line between them?


how to merge two photos and remove the line between them?

Hi everyone, These are two vertical photos I want to merge them and remove the line between them, How can I do it? I am on AE but other software is ok.

https://preview.redd.it/2hcpq2ulmf051.jpg?width=1920&format=pjpg&auto=webp&s=a082f130e92eff32357b9f0ddaa9e8a6b7450bf0

submitted by /u/mohamedyehia481995
[comments]



Source link

Node.js – Working With Web Servers and Web Frameworks
Strategy

Node.js – Working With Web Servers and Web Frameworks


Welcome to the future. Life is good, but it can be better. And why shouldn’t it be? All you need is to want it. Think about finally having everything you always wanted.

— Max Lord (Wonder Woman 1984)

I won’t say that I thought of Node.js when I first hear Max Lord saying those words in the trailer of upcoming wonder woman movie. However, it is close when we talk about building applications using Node.js. From working with devices to building web applications, sometimes that’s all you need.

In one of my previous posts, I wrote a brief introduction about Node.js. Node can be used in many places and today I will write about how Node can be used in web development. My idea is to keep these articles simple and same time build a path for more complex upcoming posts. If you are new to Node, I will suggest to first check my previous article here on DZone on this link, which will provide you the background context and will make it easy for you the follow the topics we are going to cover. So let’s start.

Built-in HTTP Module

Node has a built-in web-server and the code above is demonstrating a very basic web server. Actually, I took this screenshot from my last article, and here we are going to understand a little bit more in detail. 

  • The require call here returns something. It’s just a function call. This call returns the API of the module that we are requiring.
  • We are capturing the API of the http module into a local variable, also named http. We could have named it something else, but its a convention usually.
  • This local http variable now has all the methods defined on the public API of the http. module.

createServer is a higher-order function coz it receives another function as parameter.
We could have write the code as following as well:

requestListener function receives two arguments. These are positional arguments:

req = Represent the request side of the request-event.
res = Represents the response side of the request-event.

So, the requestListener here is a function that will be invoked every time there is a request event.

Server as Event-Emitter

The server object that we get as a result of calling the createServer() method is an event-emitter and one of the events it emits is named “request”.

In fact, this same code can be re-written using the event-emitter API:

Every time we have a request event coming to this sever, we are instructing the server object to execute our requestListener function.

Are you connecting the dots now?

RequestListener Function

Regardless of which route you take for creating the server, the RequestListener gets invoked.

  • Inside the function we can read information about request using the reqobject. For example, we can read:
    • What URL the user is requesting.
    • What parameters they are sending along.
    • What IP they are coming from and many other things.
  • We can write data back to the requester using the res object which we are doing using .end() method (shorthand for .write and .end methods).
  • Since this is an HTTP communication, we need to follow the HTTP protocol. The protocol for example, requires an explicit signal that the communication is over. This is exactly why we need to use the .end() method. This method is not optional because without that, the http session will think that we’re still streaming data to it.

Listen Function

CreateServer method only creates the server, it does not make it actively listening to requests. To run the server and activate it, we needed to call the .listen method on the server object.
The first argument is port and second is a callback function that will get invoked if the server reserved the port and started listening on it successfully.

Note also when we run this server, the Node process did not exit because the event-loop is now also busy listening the incoming connections on port and it will do that forever. More about event-loop in future post.

So, our running server has an active task and it is listening for incoming requests. However, this node process only uses V8 when there are HTTP connections, otherwise, V8 will remain idle. This listen function is actually the task that keeps node running busy and not exit.

Node Web Frameworks

  • Although Node comes with built-in modules to work with HTTP (which we saw above), those modules are low-level and they offer limited capabilities.
  • There are some frameworks available that wrap the built-in power in Node and expose a simpler API to create features in your web server. One of the popular ones is express.
  • The other popular frameworks are:
    • KOA.js
    • Sails.js
    • Meteor.js and many more

Setup Express

You can use npm to install express as follows. I also installed chalk (for console messages) as well.

  • >> npm install express
  • >> npm install chalk

Basic Express Server

This code is all we need to spin up a very simple express server.

Now, here is a difference in regard to built-in http server. We do not define a single request listener. We define many listeners. We actually define a listener per URL (url, http operations)

Let’s build a simple API using Node.js, express, and lodash. For persisting, I will use in-memory array, but feel free to use any persistence mechanism you like. One option could be JSON file using lowdb. For details about that part check my other article on DZone.

Here is what we will be building :

  • API will allow users to perform CRUD operations.
  • I will work with an array of Device object.
  • We will see a nice pattern to encapsulate REST calls for specific entity (controller style).

Install lodash

lodash simplifies working with JavaScript Arrays and Objects:

Application Code

Also all the source code is available via git and you can download it from the link in the summary section. The following screenshots will give you an overview of the building blocks. The code is self-explanatory but if something is not clear, feel free to ask in the comments.

Following is the server.js file which is our entire web-server code. This file reference (require) another module devices.js, which contains all the routes and actions. You can use Postman tool to make REST calls to test the API.

server.js

devices.js (CRUD Operations)

Result

Create Operation:

Read (GetAll) devices data:

You can test Update (PUT) and Delete operations in similar way.

Summary

Node is a very good framework to work with and it makes certain things very interesting when programming. Due to the dynamic nature of Javascript, it seems different on the backend, but at the same time, it’s a pleasing experience as well.

You can download the code repo from this link. I will keep sharing my dev experiences with you. Till next time, happy coding.



Source link